Frontend Mentor - Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

Screenshot

The following screenshots shows both the mobile and desktop version of the project.

Links

• Solution URL: Source code
• Live Site URL: Netlify live web

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Responsive web design.
• Mobile-first workflow

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

Since I had learned about javascript timeout function,having to put into practice what I learned was the most intresting thing that I learned throughout the project.

const setTimeout = () => {
  console.log("🎉"), 1000;
};

Continued development

I will continue perfecting my DOM manipulation skills and handling form data using javscript in general.

Useful resources

• Tools - This helped me for color and web testing tools. I really liked this pattern and will use it going forward.

• Tools - This is mozzila developer network for web developer documentation of html css and js.

Author

• Website - Erick Ngechu
• Frontend Mentor - @Rickyngechu
• Twitter - @Ricky_101com

Acknowledgments

I would like to acknowlegde Jonas schmedtman for the great skills he has offered me in his javascript courses.Furthermore I would like to pass my gratitude towards Kevin powell a great css master who has sharpened my css skills and responsive web design in general.