Awesome to see you post a project, BurritoDoggie! Great to hear from APG that you're getting into coding. I'm looking forward to seeing more of your projects! 🙂

That was fast!! Amazing work on this challenge, Jun! Your solution looks amazing and functions perfectly based on the brief. The one small thing I noticed was that the layout breaks slightly at 320px in the dev tool emulator on the invoices index. It might be worth playing around with that a bit. That's me being super picky, though! 😅

How did you get on with the challenge? Did you learn anything new while working through it?

Nice attempt at this challenge, Indu! That is odd about the screenshot. As it runs on a slightly older version of Firefox at the moment, it seems to be rendering your solution differently. The input is being pushed down because the two radio selection messages above render over two lines in the screenshot. I wouldn't worry too much about it though 🙂

I'd recommend removing the float property from the repertoire for the most part. Now that we have Flexbox and Grid, floats shouldn't be used for layout purposes anymore.

Overall you've done a good job, though! The main thing I'd recommend would be to spend some time refining the details a bit to get it matching up closer to the design. Attention to detail is a key part of being a front-end developer, so projects like this are a great way to practice.

Did you learn anything new while working through this challenge? It's a tricky one!

Keep up the great work! 👍

Hey Alex, I think you've done an amazing job! The animations are indeed smooth, as you mentioned, and add a very polished feel to the game. I also like the game switcher you added to the logo.

My main advice would be to use interactive elements, like the button element, to trigger the actions as opposed to div elements. As it stands, your game is inaccessible to anyone navigating using a keyboard. Ensuring the interfaces we build are accessible to as many people as possible is a key part of a front-end developer's role.

Keep up the great work. I love what you've done with this challenge! 👍

Great to see you post another project, Jen! How have you been getting on with React so far? It definitely takes on a new level of complexity as you build larger projects!

You've done an excellent job on this challenge. Your app looks great and functions as expected based on the project brief. Here are some thoughts after taking a look at your code:

• I'm not a fan of the useViewport() hook. Having a resize listener constantly running on the window isn't something you want to do if it can be avoided. Is there a reason you opted for this approach as opposed to using a media query?
• In the App.js file, you're defining a saveLocalTodos function and then calling it immediately. As you're calling it straight away, you don't need the definition at all. So you can remove the function and just set the items in the useEffect hook without it being wrapped in anything.
• Don't only show the delete todo button on hover. As it is, people navigating using a keyboard can't delete todos. I'd recommend trying to navigate and complete tasks using only your keyboard on any projects you build. This will give you a good insight into whether or not your project is navigable by keyboard users.
• As Steven mentioned, avoid setting height and width properties, except for particular circumstances where you have an obvious reason. Typically, you want the inner content of an element to dictate the dimensions of an element. For example, you've set a height on the todos. Try typing out a really long todo and see what happens. Ideally, you'd want the todo to grow with the content.
• You've got Main.js and ItemBox.js in their own file, but they're not actually doing anything other than being exported. If you're creating a component, I would recommend trying to keep all concerns for that component locally in the file. I'd recommend reading this "styled-components happy path article by Josh Comeau". It will hopefully give you some more ideas on this. As with anything, keep practising, and you'll develop better habits as you become more experienced with the tool.
• As Steven mentioned, the idea of React is to componentize code as much as possible to maximise reusability. An example of where you can break down a component further is the Todo.js. This could be broken up into smaller chunks, like the checkbox, text, and delete button.

I hope this helps. Keep at it and let me know if you have any questions! 🙂