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: https://github.com/SuperJulia2024/frontendmentor-Results-summary-component
- Live Site URL: https://superjulia2024.github.io/frontendmentor-Results-summary-component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Javascript
Reading a local JSON file using fetch()
window.onload = function (e) {
const v_reaction = document.getElementById("value_reaction");
const v_memory = document.getElementById("value_memory");
const v_verbal = document.getElementById("value_verbal");
const v_visual = document.getElementById("value_visual");
fetch("./data.json")
.then(function (response) {
return response.json();
})
.then(function (data) {
v_reaction.innerHTML = data[0].score;
v_memory.innerHTML = data[1].score;
v_verbal.innerHTML = data[2].score;
v_visual.innerHTML = data[3].score;
});
};
- Frontend Mentor - @SuperJulia2024
Thanks for FrontEndMentor for this amazing challenge