Frontend Mentor

Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshots
  • Links
• My process
  • Built with
  • Enhancements
  • What I learned
  • Useful resources
• Author

Overview

Screenshots

• Mobile

• Desktop

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Interactive rating component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Javascript
• SCSS

Enhancements

• Initial disabled state for submit button
• Custom footer with links to code and package repositories

What I learned

• CSS property aspect-ratio to properly size svg images based on the original size, using just the height or width.
• CSS value currentColor for the svg fill property.

svg {
    aspect-ratio: 7 /1;
    fill: currentColor;
    height: 1.2rem;
}

Useful resources

• Sass Lang - This has documentation for the sass language.
• CSS Tricks - This has up-to-date information, tips, and tricks for css.
• Gulp - This is a toolkit to automate & enhance your workflow.

Author

• Frontend Mentor - @bboy77
• LinkedIn - Andy Bish
• NuGet - bboy77 - AebSolutions.codeConvention.SolutionTemplates
• dotnetnew.azurewebsites.net - Code Convention Multi-Project Ex Application (cc-multiex)