Skip to content
Submitted about 2 years ago

Html, CSS, Javascript

Mounir KHAOUADI•190
@Mounir-kh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

First, Thank you for your feedback, I wanted to slow the transition from rating card to thank you card, I need help to make it slow. Have a great day.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @Mounir-kh 👋, good job on completing this challenge! 🎉

    Here are a few suggestions I've made that you can consider in the future if you're looking to improve the HTML code:

    With semantic tags:

    <body>
   <main class="main-container">
      . . .
   </main>
   <footer class="attribution">
      . . .
   </footer>
<body>
    • The thank you illustration is for decoration purposes only, so it can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:
    <img src="images/illustration-thank-you.svg" alt aria-hidden="true">
    • The container isn't centered correctly. You can use flexbox to center elements:
    body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    Additionally, remove the margin to center the main-container correctly.

    .main-container {
    . . .
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin-top: 10%;
}

    Links with more information:

    I hope those tips will help you.

    Good job, and happy coding!

    Marked as helpful
    1
  • Mark•250
    @markskwidPosted about 2 years ago

    Hello, @Mounir-kh

    To slow the transition of your thank you card using JavaScript you can use setTimeout. Example:

    submitButton.addEventListener('click', () =>  {
    setTimeout(() => thankyouContainer.classList.remove("hidden"), 1000);
    mainContainer.style.display= "none";
 }
);

    Please visit this website to read more about setTimeOut

    Happy coding!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join 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