All solutions

What are you most proud of, and what would you do differently next time?

I started with the mobile layout first which was a mistake because when I tried to convert it to the grid layout it did not work as indented. I ended up starting over starting with the desktop layout.

Implementing the mobile navigation bar was simple.

What challenges did you encounter, and how did you overcome them?

There is a lot of inputs and I had to figure out how to relate them to one another to try and keep the code as simple as possible.

Creating the custom checkboxes required me to learn about different selectors in CSS.

What challenges did you encounter, and how did you overcome them?

Creating the accordion itself was a challenge because I wanted it to only display one item at a time and close the other tab question that was open before it. I had to figure out how to keep track of which question was open and how to change the plus or minus image back to the appropriate state as well.

What specific areas of your project would you like help with?

When I have two different html pages how do I handle JavaScript files? I use main.js for index.html and using html script elements for the other html pages.

What are you most proud of, and what would you do differently next time?

My code is somewhat disorganized with names that are potentially confusing. If I had time I would go back and reorganize my code.

What challenges did you encounter, and how did you overcome them?

This project was challenging for me because it had a lot of small requirements that initially seem simple but when you add them all together made it complex. For instance the reset button had may different features that needed to be implemented: hover effect, resetting the values, resetting the styles, and greying out the reset button when nothing can be reset.

What challenges did you encounter, and how did you overcome them?

I still don't completely understand how grid works and it was a challenge to get to behave correctly.

I initially struggled with getting started on reading the .json data. I found a tutorial online which showed me code to for an api fetch. While I don't exactly understand what the code does I got it to work.

What specific areas of your project would you like help with?

I ended up using a ton of if statements to properly assign the data to its correct place. Is there a more efficient way of doing this?

What challenges did you encounter, and how did you overcome them?

I had trouble creating the custom error message. I figured out that if I set the type to 'email' in the html form input it would handle the input validation for an email. However, it took some time to figure out how to combine this with JavaScript. By using the "invalid" argument in an event listener for the form input allowed me to do this.

What are you most proud of, and what would you do differently next time?

I usually do the mobile design first, but I did the desktop design first this time because it was more complex. The mobile mostly fell into place with ease by simply changing from grid to flexbox.

What challenges did you encounter, and how did you overcome them?

I was lost on how to create the grid layout so I used an online grid generator to get the layout how it is on the site. While I did copy the code from the generator I do now understand how it works and I could do something similar again without it now.

What specific areas of your project would you like help with?

When I set the height of the grid container it completely shifts the entire container down making it off-center. Not sure why it is doing this.

What challenges did you encounter, and how did you overcome them?

I had trouble with the desktop configuration of the cards. The solution I came up with was to create a new flexbox container for the Team Builder and Karma box and set it to row or column depending on if it was mobile or desktop.

What specific areas of your project would you like help with?

Could this have been done easily with a grid layout instead?

What challenges did you encounter, and how did you overcome them?

The mobile page would get cutoff at the top if the height of the screen was not perfect. I fixed this by changing "height: 100vh" to "min-height: 100vh" in the body css.

I was having some issues with the padding going outside of the out outer container so I used box-sizing: border-box; to make sure it did nothing went outside of the outer container.

What are you most proud of, and what would you do differently next time?

I wanted there to be a smooth transition from the mobile version to the desktop version regardless of if the share state is visible or note. If the share is visible on desktop and you change to mobile the share page will still be visible but in the mobile from and visa versa. This took longer than I wanted it to but I learned better how JavaScript works.

What challenges did you encounter, and how did you overcome them?

I was challenged by how to implement the share button because of how it was different in the active state as well as when in the desktop/mobile version. I had to learn how to use JavaScript in order to edit the style of the page like changing the colors of images and hiding containers.

What are you most proud of, and what would you do differently next time?

I am most proud of how the page seamlessly transitions from mobile to desktop.

What challenges did you encounter, and how did you overcome them?

Creating the Nutrition table was challenging because I needed to create lines went across the entire page for each value except for the last value. I achieved this by putting a bottom border in each table entry and then for the last value manually changing the style in the html file to have no border.

What challenges did you encounter, and how did you overcome them?

I leaned about hover elements as well as how to add a shadow to an element.

What challenges did you encounter, and how did you overcome them?

Creating the hover elements required me to learn about buttons and how I can change certain elements on the page when I hover over objects.

What challenges did you encounter, and how did you overcome them?

Figuring out how to center and overlap the "185 GB Left" element was a challenge as well as creating the chat bubble like element with the triangle in the corner on the desktop version of site. Both require me to learn how to use "position:absolute" to manipulate where the element goes. Most of my time was spent on this part of the site.

What are you most proud of, and what would you do differently next time?

I enjoyed adding a shadow the background of my container. I would put my style in a style.css file instead of the html file. Using the space-between flexbox option makes the most sense for pages like this because the content at the bottom and top need to be equally spaced from the edges.

What challenges did you encounter, and how did you overcome them?

I was trying to make the yellow leaning text box only as big as the text but it was very large. It turned out to be an issue with default margins of the h1 header.

What specific areas of your project would you like help with?

Is my code deviating from any best practices?

What are you most proud of, and what would you do differently next time?

I learned about centering content, padding, rounding edges, changing fonts and font colors, font thickness, and how to add images. Next time I would start by making the mobile design first as it is easier to scale up that to scale down.

What challenges did you encounter, and how did you overcome them?

The organization and structure of html is new to me. I don't think I used the best naming conventions but it still worked.

What specific areas of your project would you like help with?

How to deal with margins. The default margin values never seem quite right.