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
- Solution URL: frontendmentor.io
- Live Site URL: ntjnh-results-summary.netlify.app
This was a good chance for me to practice a little bit of React. Other than creating two separate components for the results and the summary, I got to have a go at using data from a JSON file to dynamically populate the result categories.
One thing I struggled to do was get the images to display by referencing their paths as they appear in the JSON file. When files from the assets folder are imported into any of the JSX files, Vite gives them hashed names in the build version. I don't think this works when a file path is referenced directly as a string. Vite's documentation has useful information and advice about this. I'll try that next time I need to import/reference local files.
- How to Set backgroundImage with Inline CSS Style - This came in handy when I was trying to figure out how to use
background-imagein a style tag. I forgot about the camelCase thing. 🙄 - Static Asset Handling - Vite - Vite's page that explains all about bundling and asset hashing
- Website - Nate
- Frontend Mentor - @ntjnh
- Twitter - @natejonah