Skip to content
OverviewSolutions
19
Comments
14

Gaurav Singh

@Gaurav4604440 points

MERN stack developer

Latest solutions

View more solutions

Latest comments

  • Gaurav Singh•440
    @Gaurav4604

    Hi! Congratulations on completing the challenge, it looks great 🥳

    I took a look at your index.css and styles.css files, I see you've used margin: auto to try and center your content, this is good, but css provides you with better tools such as flexbox and grid for more layout customizations.

    here are some reference links on how to use them:

    CSS Flexbox

    CSS Grid

    Also, if you take a look at the design preview, you will see that the challenge expects you to have you text-align: center, on your text content, applying the same, will let your webpage be a more accurate representation of the design provided.

    Hope this was helpful 😊

    Marked as helpful
  • Gaurav Singh•440
    @Gaurav4604

    Hi! Congratulations on completing the challenge, it looks great 🥳

    I’ll be answering your second question, It’s normal to pass useState to the child component, to let it modify the data as a beginner, But the idea of React, is to build reusable components, which are meant to handle any environment.

    (One example is the <input> component, which itself takes a value, and an onChange function callback, thus the input component is no longer responsible for handling the data, but rather, only displays any changes)

    So if you wanted to build a more robust version of RatingCard and ThankCard, You should structure it as follows.

    <Rating
    rating={rating}
    OnRatingChange={(rating) => setRating(rating)}
    OnSubmit={(submit)=> setSubmit(submit)}
/>

    And in the Rating.jsx file,

    
const activeHandle = (e) => {
 let activeOption = document.getElementsByClassName('active');
 for (let option of activeOption) {
    option.classList.remove('active');
}
 e.target.classList.add('active');
 props.onOptionChange(e.target.innerHTML);
}

    You can follow similar logic for submit as well.

    Now you do not need to pass setState callback into the child component and let the child do the modifications

    Hope this was helpful 😊

    Marked as helpful
  • Gaurav Singh•440
    @Gaurav4604

    Hi! Congratulations on completing the challenge 🥳

    I have a few suggestions regarding CSS used

    • Try to use relative units rather than absolute units wherever possible this might help you
    • position:absolute should be used as a last resort, since it abstracts out the content from the website flow more about the same here
    • You seem to have specified the font family properly, but also make sure to include link to the right font family in html, or import in the css file hope this helps

    Overall, Good work! The page looks pretty cool! 😄

    Marked as helpful
  • Gaurav Singh•440
    @Gaurav4604

    Hi! Congratulations on completing the challenge! 🥳

    It looks great!

    I found a few places where you could improve upon the CSS side of things:

    • You could improve upon the use of responsive units for element sizing this might help you
    • It seems you've used the Fraunces font family in all typography elements, I would encourage you to refactor the CSS file and also include Montserrat font family in the required element styles.
    • You should also try to include all the specified font weights to ensure that the website looks similar to the design file

    Other than these issues, the Challenge site looks great! keep up the good work😄

    Marked as helpful
  • Gaurav Singh•440
    @Gaurav4604

    Hi! Congratulations on completing the challenge! It looks amazing 🥳.

    I had a few ideas for the project (some of them are definitely over-engineered).

    Marked as helpful
  • Gaurav Singh•440
    @Gaurav4604

    Hi! Congratulations on completing the challenge 🥳. It looks pretty cool!

    To answer your question, The reason why your div expands in size when you hover over the button, is: because of: border: 1px solid var(--light-gray);. This property adds an additional layout size to your button on hover. A quick fix for the same would be,

    .learn-more{
 border: 1px solid transparent;
}
.learn-more:hover{
border: 1px solid var(--light-gray);
}

    This will allow you to have a placeholder border, with no visibility, that will already have adjusted the parent div's size from the start itself. Thus it will lead you to not, having a resize on hover.

    Marked as helpful
View more comments