4-1 Improving a React Clock Tracker

This activity is designed to give you practice with React. You will enhance the clock dashboard app that we discussed in lecture.

Steps

To get started, accept the classroom50 assignment and clone the repository locally. Run the command npm install, and then npm run dev. The development server should start, and If you open your browser to localhost:3000,it will start running the app in src/App.tsx.

In the repository, make 2+ enhancements to our webapp! Here are some possible options, but feel free to make your own:

  1. Add a "reset offsets" button in the parent.
  2. "Add a clock." Introduce a new AddClock component with controlled inputs for a city name and numeric offset.
  3. "Rename a clock." (presupposes "add a clock") Let the parent update the name field for an existing clock.
  4. "Filter clocks by name or offset." Add a text/number input that only displays clocks whose city names match.
  5. "Highlight a selected clock." add an input that will select a clock by key (or other identifier).

When you are done, add a comment with what enhancements you included and push your code to github.

Grading Rubric:

This assignment is worth 10 points.

If you do one enchancement, you will get 5 points.

If you do any two enhancements, you get 7.5 points.

If you do 3 or more enhancements, you get 10 points.