Interactive Rating Component using HTML, CSS and Javascript

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 2 years ago

  Hello Paul! Nice solution!

  To add delay you can use setTimeout. Please refer to this resource

  setTimeout( () => {
   if (star.textContent.length === 0) {
           star.textContent = '0';
          thankYouPage.style.display = 'grid';
          welcomeSection.style.display = 'none';
      } else {
          thankYouPage.style.display = 'grid';
          welcomeSection.style.display = 'none';
      }
  }, 3000) //3000 is the delay in milliseconds
  

  Hope it helps! Cheers!

  Marked as helpful

  0

  ---

  

  Paul•120

  @SageKylePosted over 2 years ago

  @fazzaamiarso Thanks a lot, this is really helpful. I'll definitely try it out.

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Your solution looks great but I realised you used a different color for the design.

  Also you can reduce the background color's opacity to match the design. It is also a good practice to use max widths on this challenges. On smaller devices your container is small so its contents don't have enough spaces around them.

  Besides great job there👍 Happy coding👍💻

  Marked as helpful

  0

  ---

  

  Paul•120

  @SageKylePosted over 2 years ago

  @Kamasah-Dickson Thanks a lot. I'll keep that in mind for my next project

  0

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @SageKyle you are always welcome👍

  0