How many elements did you end up going with? Why did you break it up that way?
When we first started building the code, it seemed like we only needed to work on 2 elements at most. But as we continued with progression, we saw that splitting up the different tasks into different elements was the easiest way to go about the build. We divided this code up into 4 different elements within the "src". One element contains all of the badge list aspects of the build, the second element contains a template of what the descriptions for each badge would consist of as well as links provided in that section of the build, the third element consists of the search bar functionality as well as some imports to support that element, and lastly we made an element for our step lists which holds data such as names, images, and and our arrays with some CSS to support the badges. We broke up the elements in this way to make it easier for our organizational skills and so that the overall code build would run smoother will the other elements.
What was the hardest aspect of this?
There were many challenges throughout this project, however one of the hardest aspects of this was the build and connectivity between the code and the api's functionality. My partner and I were stuck on a specific part in which the code wasn't displaying correctly on the local host visually. The badge list would display horizontality at times and the CSS would change randomly and lose color or images. This problem persisted for a day or so until we figured out the solution which include some api work and a few missed ";" to close off some lines of code fixed the issue. We also had some issues with GitHub's fork and merge work, I would try and merge some work into the build through GitHub however we kept running into many errors in which I had to delete and keep creating multiple forks so that my work would merge correctly. There were some instances where the code I implemented never transferred over, so to make it easier we primarily used one machine to complete this project. The creation of multiple code-pens for testing and examples also helped us through this issue.
What part of this project was easier than you expected?
After researching what exactly needed to be done for the project, the overall basis of making the image tags or creating the CSS behind the badge lists were the easiest part of the project. Since we had to create similar features from project one such as CSS design or HTML elements to work with JavaScript, the start of the project was way easier than expected due to our prior resources and knowledge.
Demo of Code:
Link to code: https://github.com/Jps709/badge-list
*Below are Screenshots and Explanations: *
(Result of Code)
(Here are elements plus our directory for the code build)
(Here is an example of some of our api work)
(These Next Images are Elements from src)
(Badge List)
(Badge Template)
(Search Bar)
(Step List)
Top comments (0)