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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

This is an interactive Rating Card Component built with react, for the front-end mentor design challenge

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

Desktop

Mobile

Links

• Repository: Github
• Live Site

My process

For this project, I took about 12 hours. I built it out entirely using React.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

• I have learned how to work wih props and states in React

• I have learned how to pass down props fom parent components to child components

<div className="App">
  <Container rating={this.setRating} submitStatus={this.submit} getRateValue={this.getRating}/>
</div>

• I have learned how to change the state of a parent component, from the Child Component

• I have learned conditional rendering. Only rendering a given component under a certaing condition

render()
  {
    if (this.state.submit === false)
    {
      return(
        <div className="App">
          <Container rating={this.setRating} submitStatus={this.submit} getRateValue={this.getRating}/>
        </div>
      );
    }
    else
    {
      return(
        <div className="App">
          <Success getRateValue={this.getRating}/>
        </div>
      );
    }
  }

Continued development

React is a very powerful UI library. I want to continue practising working with states, and props in React

Useful resources

• React Docs - This is the official documentation page for React. It helped mere learn about, how to pass additional argument to eventhandlers, and how to render components conditionally.

Author

• Frontend Mentor - @munyite001
• Twitter - @emunyite
• Github - munyite001