Design comparison
Solution retrospective
Hello, I have a few questions regarding this project. First, is it a good practice to use rem instead of fractions while setting up grid-template-columns? Second, I was trying to get data.json data into HTML, I was trying to use jQuery and JavaScript fetch. I failed with first one and second one I realized is rather for APIs than local files. Can somebody explain if there is a way for getting the data with pure JavaScript? I would be thankful for feedback.
Community feedback
- @ioangheraszimPosted over 1 year ago
Dear Weronika,
Congratulations on successfully completing this challenge. I have carefully reviewed your code and would like to provide some insights and suggestions.
- To retrieve data from the data.json file, you can utilize JavaScript's fetch function. Ensure that you assign a unique ID to each element that needs to be populated with data, such as the score, category, description, and individual icons and scores.
An Example of this would be:
fetch('data.json') .then(response => response.json()) .then(data => { const resultScore = document.getElementById('result-score'); const resultCategory = document.getElementById('result-category'); const resultDescription = document.getElementById('result-description'); // Populate the result section resultScore.textContent = data[0].score; resultCategory.textContent = data[0].category; resultDescription.textContent = `You scored higher than ${data[0].score}% of the people who have taken these tests.`; }).catch(error => { console.error('Error:', error); });
- In terms of CSS, I recommend using the min-height: 100vh property to position your component in the middle of the page vertically. This ensures that the component occupies at least the full height of the viewport, providing a visually pleasing and balanced layout. Additionally, for the button, consider adding the cursor: pointer property to enhance user experience by indicating that the button is clickable.
I hope you find these suggestions helpful in further improving your code.
Best regards, Ioan
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord