Link to Github Repo of badge-list: https://github.com/farisnif/badge-list
We are excited to share our progress relating to Project 2.
When it comes to how we are conceiving the API for our element on the front and backend, we plan to use a similar concept that we used with card-list, meaning that we will have the various iterations of constructors, and then implement the data there for the various instances. On our element their will be the badge icon, badge name, badge description, badge creator. These will all be controlled from the API using this.[relevant title]. Configuring this aspect of the project should be rather simple as I think it will be fairly identical to how it was done with flight-card and drew-card. This is just how I am looking at it from now, but as always there will be some challenges down the road that require additional research. For the searching process, although we currently do not totally understand how it will work, it should relate to the searching of an array, having the search terms (by name, by creator, by description), where the different terms are linked to the different indexes of the array of the API.
To get started, we looked at flight-card and Fawaz-Nice-Card as references for our project. Our first goal was to create a single web component that was identical to the badge component on the Penn State Badges website. We used concepts we learned from Project 1 such as the details button, card layout, and the constructors such as this.image, this.details, etc... to create the component. This project is similar in many aspects when it compares with the original card project we worked on, it is just being implemented in a different sense/style.
When it came to deciding what to attack first, we decided it would be best to get the single element down and finalized, this way we could begin to focus on implementing the API and then eventually figuring out the search bar aspect of this project. This means that we began with coding HTML, JS, and CSS.
While we have made progress, we have encountered some issues along the way. One of the main issues we are facing is that we have been unable to get the drop down button to move to the right side. In order to fix this we are beginning to think we should not be using a details element, and should instead consider an alternate method. Upon doing some research we discovered "accordions", it seems this is very similar to how the website is configured. We will try this next and have a really good feeling based on the visualization we saw that it will replicate rather well.
Link to accordion reference: https://youtu.be/APxbG5K_Eys
If you take a look at our Vercel link, you'll see the problem of how it's not the same. Despite the challenges, we are making steady progress towards our goal and are determined to deliver a high-quality micro-frontend that meets all the requirements outlined in the project.
If this accordion tactic that we recently discovered does not work, the main thing that we are unsure of how to resolve relates to how to move the details drop down button to the right side of our div. We imagined this would be done with CSS but have yet to find a way of doing it.
Image description: What we have so far, focus on how details drop down is on left side, it is also should not say details.
Image description: What it should look like.
Our next priority is to ensure that we have constructors wherever possible, even for the smallest things, which will allow us to maximize reusability which is critical in the web development world. This will be done in the exact fashion that we used for flight-card and fawaz-nice-card.
As we continue working on our micro-frontend, we're excited to explore more web components and see how we can use them to deliver a great user experience and meet the requirements in an efficient manner. We'll be sharing our progress along the way, so stay tuned for more updates!
Top comments (0)