Timer

A basic timer that will start a countdown based on an input of time in seconds.

The Timer provides start, stop, and rest functionality. When the timer reaches a value <= 10, the timer color changes to red.

Component Diagram

This project also demonstrates:

• a typcial React project layout structure
• babel setup and configuration
• webpack setup and configuration
• eslint setup and configuration
• SCSS setup and configuration

---

Developed With

• Node.js - Javascript runtime
• React - A javascript library for building user interfaces
• Babel - A transpiler for javascript
• Webpack - A module bundler
• SCSS - A css metalanguage
• Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
• [Surge] - Static web publishing for Front-End Developers

---

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'react-timer-basic' repository from GitHub

  git clone 

• Install node modules

  cd react-timer-basic
  npm install
  npm dedupe

Build

• Build application

  This command will also run ESLint as part of build process.

  npm run build

• Build application and start watching for changes

  This command will also run ESLint as part of build process.

  npm run build:watch

Run ESlint

• Lint project using ESLint

  npm run lint

• Lint project using ESLint, and autofix

  npm run lint:fix

Run

• Run start

  This will run the 'serve' npm task

  npm start

• Run webpack dev server

  npm run serve:dev

• Alternatively run live-server (simple development http server with live reload capability)

  npm run serve

---