This week, my partner Daniel Rivera and I both had the opportunity to create something. This was the first project in our Flatiron school journey at the end of our first phase. This was such a big stepping stone because the project not only was from our own creative minds but also the complete result of us successfully passing our coding challenges.
For a little bit of clarification, a coding challenge is a meer 2-hour lab where we are expected to run through deliverables that we are supposed to understand and bring back a complete working webpage. Though it was difficult, the challenge tested our ability to think technically, a task that would prepare us for the project week we had ahead.
The deliverables for the project that we had were very similar compared to our own labs and practice. But creating something from scratch is something that is most definitely a different beast. Here are the requirements that we were expected to meet:
Project Requirements
- Your app must be an HTML/CSS/JS frontend that accesses data from a public API. All interactions between the client and the API should be handled asynchronously and use JSON as the communication format.
- Your entire app must run on a single page. There should be NO redirects. In other words, your project will contain a single HTML file.
- Your app needs to incorporate at least 3 separate event listeners (DOMContentLoaded, click, change, submit, etc).
- Some interactivity is required. This could be as simple as adding a “like” button or adding comments. These interactions do not need to persist after reloading the page.
- Follow good coding practices. Keep your code DRY (Do not repeat yourself) by utilizing functions to abstract repetitive code.
Daniel and I were then given one week to make all of this happen… and it honestly was very intimidating at first. We knew that this would be a hard week leading up to our presentation on Friday, but we understood that the only way to succeed was to plan accordingly. We proceeded to create a template that would lead us in the direction we wanted to go. Our plan was to finish with the base of the project by Wednesday so that could focus on the extra-ordinary objectives after the fact.
We decided to make a ‘wishlist’ styled website where the user can input a name, gift, price, picture, link to purchase, and any comments about the item such as sizing or color. This would provide the ability for users to send a list to their loved ones for Christmas or, what we intended the project for, to help provide a system to donate gifts to children from orphanages or children who aren’t going to be receiving gifts in the Holiday season. One could potentially place birthdays for each child in the respective comment section, allowing the user to know when each project should be bought by.
By the end of Monday we had the idea, basic HTML lined out, and a rough sketch of how the website should look.
And by the end of Wednesday, the website was honestly looking really good. I was genuinely so happy and impressed that this is something we were able to build from scratch. The reality that the project was actually coming together gave such an enormous feeling of joy as it’s something we had both been talking to our families about the entire week.
Finishing the core of the project by Wednesday gave us the opportunity to go over numerous questions we had with our instructor, Adam. Adam gave us such amazing insight into what we had to fix and where we had to go. One of the biggest visions we had was creating a form that would allow the user to ass their own gifts to the webpage. Although this may seem obvious, as it was the main use of the application, it was increasingly difficult to provide such information because the fetch command in javascript created much frustration. It was only after discussing with Adam, that he made me realize my data, organized in the db.json file did not have any IDs for the data to be sorted. 🤦🏾♂️ Of course it would be such a simple fix!
This prompted us to have another problem which was essentially breaking the website after the new information was being appended to the page after being submitted from the form. Nothing a couple of hours of stressing over CSS couldn’t fix.
After hours and hours of rewriting code, adjusting out syntax. We were finally able to present, our working project. And I’m very proud!
