This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: Use the local JSON data to dynamically populate the content
Things yet to implement:
- Animations
- Button hover transition
- Progress bars loading animations
- Counting up the score on result card
Things I might implement:
- Interactive values (with hooks)
- Action on button click (either one of):
- Overlay
- Rendering a page
- Responsive Web Design
- Flexbox
- CSS Grid
- React - JS library
- Styled Components - Library for adding styles to React components
Things I have to still learn:
- Proper React workflow
- Hooks
- React Docs - The official React docs are well written and a very good resource for learning React.
- TypeScript - TypeScript docs are another invaluable resource for working with TypeScript.
- Passing props to a component in React Docs - Passing props to a child component gave me a bit of a headache, but looking into the docs cleared most things up for me.
- Rendering lists in React Docs
- Working with JSX in TypeScript Docs - This page in the TS documentation explains various ways to best utilize TypeScript in JSX.
- CSS Progress Bar Tutorial by Web Dev Simplified on YouTube - This is an amazing channel, and the tutorial was informative and easy to follow.
- Frontend Mentor - @nikkehtine
- Twitter - @nikkehtine