Skip to content
OverviewSolutions
19
Comments
2
Ioan
@ioangheraszim

All comments

  • armando1236•10
    @armando1236Submitted over 1 year ago

    Did I center the QR image correctly? I gave each side a different margin. I tried using auto for the left and right margin but it didn't work.

    Should I have given the bottom text a separate p tag instead of using span?

    How do you know when you should use rem, em, px, or % for sizing the width or anything else?

    QR code component using HTML and CSS

    4
    Ioan•300
    @ioangheraszimPosted over 1 year ago

    Hey Armando, good job on completing your challenge.

    After reviewing your code, I would like to offer some suggestions for improvement: consider adding the following properties to the body element:

    display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;

    By applying these styles, you will achieve perfect vertical centering of your component. The min-height: 100vh property ensures that the component is positioned precisely in the middle of the page.

    Hope this helps.

    Best regards,

    Ioan

    2
  • weronika•50
    @WerSzpeSubmitted over 1 year ago

    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.

    Results Summary Component build with HTML, CSS Grid

    1
    Ioan•300
    @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