https://github.com/emmadonjo/react-timer

This React Timer app is a light-scale React Stop Watch that allows you to keep track of the time elapsed. For instance, you can measure how long you've been working on your PC and even conveniently control breaks. The interface is beautifully designed with a few effects to make things interesting.
https://github.com/emmadonjo/react-timer

react-components react-router-dom reactjs

Last synced: 3 days ago
JSON representation

This React Timer app is a light-scale React Stop Watch that allows you to keep track of the time elapsed. For instance, you can measure how long you've been working on your PC and even conveniently control breaks. The interface is beautifully designed with a few effects to make things interesting.

• Host: GitHub
• URL: https://github.com/emmadonjo/react-timer
• Owner: emmadonjo
• License: mit
• Created: 2020-12-06T12:21:23.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-09T18:30:49.000Z (about 4 years ago)
• Last Synced: 2024-11-10T23:29:23.286Z (2 months ago)
• Topics: react-components, react-router-dom, reactjs
• Language: JavaScript
• Homepage:
• Size: 564 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Timer App

![React Timer](./react_timer_banner.png)

This **React Timer** app is a light-scale React Stop Watch that allows you to keep track of the time elapsed. For instance, you can measure how long you've been working on your PC and even conveniently control breaks. The interface is beautifully designed with a few effects to make things interesting. 

## React Concepts Implemented

This is a lightweight React-based Timer. As a result it utilizes a few of React's API. However, it builds upon some of its popular concepts and ethics as listed below:

- **Components**: The entire app is built upon a single componet, the  Counter. This handles the click events, UI rendering, among others.

- **State**: Here is another concept implemented here. Manipulating states with the this.setState() method and accessing the state with this.state. For instance, this allows the app to toggle Start/Pause button when clicked.

- **Props**: Props are useful means of sharing data with components in React, and so, this Stop Watch uses the props to determine the increment or steps of the timer. 




    constructor(props){

        super(props)

    }





- **Class**: Though functions can be used to create the component, I chose class. I find the ES6 class syntax to be friendly and cool to implement. So, there's was not thinking which one to use. This was direct:




class Counter extends Component{

    //the rest happen

}





- **Events**: Again  events handlers were implemented first by binding the events in the constructor and then on the individual buttons. E.g. this.eventHandler = this.eventHandler.bind(this)

- **Others**: In addition, the app equally demonstrates the use of conditional rendering, setting and destroying timers (e.g. this.timer = setInterval((e)=>callback), 1000) and clearInterval(this.timer)

## Key Features

![React Timer Demo](./react-timer-demo.gif)

With this React Timer, you have the privilege of doing the following:

- View seconds, minutes, and hours elapsed

- Control when to start the timer

- Pause/stop the timer whenever you want

- Start a new timer session with the **Reset** button

## Contributing

To contribute, clone the repo, make your preferred changes. Then make a pull request. Your updates will be review and merged if need be.

## License

This Timer uses the **MIT** license, meaning you're free to do whatever you to do with it. [View the license](./LICENSE)