• Frontend Mentor - Interactive rating component
  • Contents
  • Overview
    • The challenge
    • Screenshot
    • Links
    • Built with
  • Developing
  • Building
  • Author - Nic Britz

Thanks for checking out my solution to the Frontend Mentor Interactive rating component. I decided to use SvelteKit to do this project. This choice was mainly to better learn the framework. You can find a live version on the project here:

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

• Solution URL: Solution
• Live Site URL: Live Rating Component

• HTML5
• CSS custom properties
• Flexbox
• Javascript es6
• Mobile-first workflow
• SvelteKit

Once you've cloned the repo npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

• Website - Dark-Light
• Frontend Mentor - @NicBritz
• Twitter - @n_britz