Giter VIP home page Giter VIP logo

react-stopwatch's Introduction

React Stopwatch

Recreate a stopwatch in React. Your final product should function similarly to this deployed version of the component.

Getting Started

  • Fork and clone this repo
  • Create a react app in this folder by running npx create-react-app .
  • Start the development server locally with $ npm start, then visit localhost:3000 in the browser to view app

Instructions

We're going to put everything into a component called Stopwatch. To create all the pieces found in the deployed version, we'll need:

  • an h1 tag that shows the stopwatch time
  • a div to contain our three buttons
  • three buttons for reset, start, and pause

Once you have that, then you'll need to add functionality to our app!

Steps to Take

  1. Initialize state with a counter property to track the incrementing time. (You may need additional state properties later on)

  2. Create a handleStart method that calls setInterval() and updates counter every second. (Make sure to use setState to update)

  3. Include an onClick attribute on the start button which calls handleStart

  4. Replace the 0 in the h1 heading with your counter.

  5. Next you will need to create onClick event attributes for reset and pause and associated methods for each.

  6. Finally, you'll want to limit which buttons can be pressed when.

  • Start button can't be pushed if there's a count already going
  • Pause and reset buttons can only be pushed if there's an active count

Hints...Shhhhhh!

  • It might be useful to rethink your state and what properties it should have to accomplish all the tasks!
  • You might also want to include an additional attribute in your constructor method (but outside of state) that keeps track of your current interval. (Think about the pros and cons of putting this variable in state vs outside of it)
  • You can use clearInterval to stop the current interval!
  • Use the ! operator to toggle boolean values!
  • When limiting button presses, think about how each value in state tells you what is going on! For example, if there is an interval set, that means there is count going!

Bonus!

  • Add some styling! You can make your stopwatch look like the demo, or do something else!
  • When the stopwatch is at 0, the display time should be a different style.
  • When the user first visits the page, the only button that should be active is "Start".
    • The other buttons should be unlocked only after the user clicks "start"
  • Have multiple Stopwatch components rendered on the page so the User can set off multiple timers.

react-stopwatch's People

Contributors

amaseda avatar 009kings avatar nolds9 avatar perryf avatar taylordarneille avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.