All solutions

Rating: 10/10 Time: ~20hr over several days Languages: JQUERY, JS, HTML and CSS Rating: 4/5 Difficulty: Solid Intermediate

Reflection: This challenge was similar to the html college course assignment in the beginning of a semester. Surprisingly enjoyed playing around with this, as it tests out a lot of fundamentals, such as planning for repeating elements, responsive layouts and logically filtering information.

I chose to stick with static information loading rather than dynamically loading from the JSON list, but honestly it would probably take me maybe an hour at most more to get that working. If you've never worked with that in the past but have your other fundamentals strong, I would highly recommend this challenge. This would also be an excellent challenge to try a frontend framework, such as React, because you could learn how to reuse code elements and start learning how to manage state between elements with the filtering logic.

Time: ~6-8hr over several days Implementation Languages: JQUERY, JS, HTML and CSS Rating: 4/5 ⭐ Difficulty: Medium Junior, Hard Newbie

Reflection: After several other front end mentors with dropdown navigations, it was nice to have the navigation reused between the mobile and desktop displays rather than having a dialog and a regular nav duplicated. Understanding the dynamics of position relative and absolute more from this as well. Definitely think the dropdown components could be abstracted into another class or be a reuseable component for a library, but I was more focused on as simple a solution as possible for this.

Mainly was focused on getting an approximate version of the site while getting more practice with relative/absolute positioning. Background image work was rough, and if anyone knows a getter way than choosing between background images and absolute positioned images, let me know.

In retrospect, could clean up this code a lot through reading navigation data with json or with react router, as the various navs are common between header, footer and dialog. 🦖

Quick solution done in a couple of hours for practice.

General practice for frontend development, specifically css and old school js, without relying on the big frameworks.

Basic interaction implemented for the time switcher.

Pretty much up to design specs minus removing the hover css from the card when hovering over ellipsis buttons.