Matt Studdert

Excellent work on this project, Yazdun! I've never used TypeScript personally, but I just wanted to say nice job. Your project looks fantastic, and it's obvious you've paid great attention to detail.

I also love the challenge difficulty badge you've created for the README.md file!

Keep up the incredible work! 👍

Excellent work on this project, Kevin! It looks great and works well!

My main piece of feedback would be to avoid adding event listeners to non-interactive elements. For example, you're using li elements to switch timers and an img element to open the settings modal.

Whenever you expect a user to interact with an element, you should use an interactive element (e.g. a' or button`). This will allow people who can't/don't use a mouse or trackpad to use your app.

As the timer switchers and the settings trigger don't navigate to new pages, I'd recommend using button elements to trigger the actions.

It's always a good habit to try navigating anything you build while only using your keyboard to see if you can still use the app. If not, it needs refactoring to make it more accessible.

I hope this helps. Keep up the great work!

Brilliant work on this challenge, Nakoya! Your HTML looks great, and you've done an excellent job getting the solution close to the design. My only small suggestion would be to add focus states so that the label has an outline when the corresponding input is focused. You can do that with the sibling CSS selector like this input:focus + label. The visual state changes if you use the arrow keys when on the radio inputs, but you'll notice if you tab through the page, there's no initial style to provide a visual cue.

I hope that helps. Keep up the incredible work! 👍

Excellent work on this challenge! You've hit the nail on the head with the design comparison. I like the subtle animations you've added as well. Here are a couple of small pieces of feedback:

• If you scroll down on a page and then navigate to a new one, the screen remains halfway down the page. I'd expect it to pop up to the top when navigating to a new page.
• The items are duplicated between the Movies and TV Series sections on the Bookmarks page. So there are movies showing in the TV series section and vice versa. You could use .filter() instead of map to return only the items of a given category.

Amazing work overall. Keep it up! 👍

Hey Angelo! Excellent work on this challenge! It's great that you've made such an effort on the responsive side. You have quite a few instances where you're setting specific heights, widths, margins, and other values to position elements. This seems to be what's contributing to most of your repetitive code.

I'd recommend checking out Every Layout, which is an excellent resource to help shift layout decisions onto the browser instead of manually overriding your own code and fixing positions.

If you find yourself writing code like margin-left: 13%; and top: -410px;, it's usually a sign that there's a better way to do it. These are what developers call "magic numbers" as they're pretty arbitrary and are essentially plucked from thin air.

You'll find yourself using them less and less as you continue to gain experience building projects. So, for now, it's mostly a case of being aware of it and then trying to find more reusable solutions whenever it happens again.

I hope this helps! 🙂

P.S. Please try to avoid swearing in your messages as it goes against our community guidelines. You can edit your message by going to "Visit challenge hub" at the top of this page and updating your solution. Thanks! 👍