The goal of this assessment is to evaluate your capabilities with React, familiarity with modern web development practices, and code cleanliness.
Implement a 5-star rating system (like you would use on Yelp or Uber). When you click on one of the stars, it will fill that star and all the stars up until that one (i.e. when you select the third star, the first, second, and third stars become filled).
You should implement this using React and in the project scaffolding provided. You have up to 2 hours to complete the assessment but do not feel compelled to spend the full 2 hours if you complete the assessment early.
Please attempt this problem by completing the following requirements in order. Even if you do not complete all the requirements, please submit what you have.
- Displays 5 empty stars.
- When you click on a star, it will fill that star and all the stars up until that one. The remaining stars stay empty.
- When the user hovers over a star, it will fill or highlight that star and all the stars up until that one.
- Make total number of stars dynamic based on a prop passed into the RatingSystem component.
- When the user clicks the same star twice, it resets the selected stars.
The assessment requires Node 10 LTS or above. You can download & install Node.JS here.
- Clone the repo locally, run
git clone <hackerrank repo url>
in your terminal. - Go into the directory, run
cd <repo name>
in your terminal. - Install dependencies, run
npm install
in your terminal. - Run the app, run
npm start
in your terminal. - Open http://localhost:8000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.
The browser should automatically reload whenever you save your changes. However, if the browser is not automatically reloading, sometimes a page refresh is needed.
Feel free to refactor src/App.js
. You can use it as guidance but don't feel obligated to keep or use any of the code that is currently there.
-
Use
git
to commit your changes by runninggit add <filename>
thengit commit <filename>
in your terminal. -
Push your changes back up to HackerRank by running
git push origin master
in your terminal.
When you are done with the assessment, submit the work on HackerRank. Double check your work has been correctly pushed up to HackerRank.
Please contact your recruiter if you're having any setup or submission issues.
Good luck!
This project was bootstrapped with Create React App.