Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eucaue/interactive-rating-component
Challenge from the https://www.frontendmentor.io/
https://github.com/eucaue/interactive-rating-component
css localstorage rating-stars react reactjs styled-components
Last synced: 7 days ago
JSON representation
Challenge from the https://www.frontendmentor.io/
- Host: GitHub
- URL: https://github.com/eucaue/interactive-rating-component
- Owner: EuCaue
- License: gpl-3.0
- Created: 2022-07-25T21:54:10.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-10-12T17:00:10.000Z (about 2 years ago)
- Last Synced: 2023-04-30T23:39:56.302Z (over 1 year ago)
- Topics: css, localstorage, rating-stars, react, reactjs, styled-components
- Language: JavaScript
- Homepage: https://interactive-rating-component-main-six.vercel.app/
- Size: 1.77 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Interactive rating component solution
This is a solution to the [Interactive rating component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resources](#useful-resources)
- [Author](#author)
- [LocalTest](#local-test)
## 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
More screenshot in the folder
### Links
- Solution URL: [Github Repo](https://github.com/EuCaue/interactive-rating-component)
- Live Site URL: [Site(vercel)](https://interactive-rating-component-main-six.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- [React](https://reactjs.org/) - JS library
- [React-Router-Dom](https://reactrouter.com/) - For the routes
- [Styled Components](https://styled-components.com/) - For styles
- [React-Toastify](https://fkhadra.github.io/react-toastify/introduction) - For notifications
- [Eslint](https://eslint.org/) - For better code patterns
### What I learned
```html
```
```css
. -webkit-box-shadow: 0px 6px 36px -5px rgba(0,0,0,0.77);
-moz-box-shadow: 0px 6px 36px -5px rgba(0,0,0,0.77);
box-shadow: 0px 6px 36px -5px rgba(0,0,0,0.77);
```
```js
const handleSubmit = (e) => {
e.preventDefault();
// Checking if no stars were given 💬
if (!stars) return toast.info('Select a value');
// Checking if the value does not correspond to a star 💬
if (stars === '12345') {
return toast.info('Error with the value, please select again.');
}
localStorage.setItem('stars', JSON.stringify(stars));
// Navigate to the thanks page 💬
navigate('/thanks');
return true;
};
}
```
### Useful resources
- [ReactJS DOCS](https://reactjs.org/)
- [W3Schools](https://www.w3schools.com/)
## Author
- Frontend Mentor - [@EuCaue](https://www.frontendmentor.io/profile/EuCaue)
- Github - [EuCaue](https://www.github.com/EuCaue)
### Local Test
Clone the repo
git clone https://github.com/EuCaue/interactive-rating-component.git
Open the terminal inside of it
run npm i
Then click in localhost with ctrl key pressed