M-lakshan / FM_Challenge-Interactive_Rating_Component

a simple rating component webpage using HTML, CSS & JS

Welcome! 👋🏼

Frontend Mentor - Interactive Rating Component

Frontend Mentor challenges help you improve your coding skills by building realistic projects

Table of contents

• Overview
  • The challenge
  • My Achievements
  • Screenshot
  • Links
• My process
  • Built with
• Author

Overview

This is an entry-level NEWBIE(Free) challenge that uses HTML, CSS & JS

The challenge

• View the optimal layout for the site 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

My Achievements

• built the component almost close to the design provided.
• set hover states for interactive elements using CSS
• customized & added some extra features for elements using Javascript
  • component will give a simple feedback animation if rating is undone
  • set some animation functions for custom feedbacks

Screenshot

• mobile-version

• desktop-version
  

Links

• Solution URL: Frontend Mentor Solution Page
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox & Grid
• Mobile-first workflow
• custom interactions & validations using JS
• with Visual Studio Code Editor

Author

• Frontend Mentor - @M-lakshan
• Dev.to - @mlakshan