https://github.com/janicemv/stopwatch

Practicing Javascript and object-oriented programming with a stopwatch
https://github.com/janicemv/stopwatch

bootstrap javascript vanilla-javascript vanilla-js

Last synced: 4 days ago
JSON representation

Practicing Javascript and object-oriented programming with a stopwatch

• Host: GitHub
• URL: https://github.com/janicemv/stopwatch
• Owner: janicemv
• Created: 2024-12-16T12:59:01.000Z (9 days ago)
• Default Branch: main
• Last Pushed: 2024-12-16T13:02:36.000Z (9 days ago)
• Last Synced: 2024-12-16T14:19:27.391Z (8 days ago)
• Topics: bootstrap, javascript, vanilla-javascript, vanilla-js
• Language: JavaScript
• Homepage: https://janicemv.github.io/stopwatch/
• Size: 82 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Stopwatch - Time Tracking Application

This is a simple stopwatch application built with JavaScript, HTML, and CSS. It allows users to start, pause, record laps, and reset the timer. The interface also displays the accumulated time and the recorded laps.

## Features

- **Start the Stopwatch**: Begins counting time.

- **Stop the Stopwatch**: Pauses the count and records the elapsed time.

- **Record a Lap**: Displays the time of the recorded lap without stopping the stopwatch.

- **Reset the Stopwatch**: Resets the stopwatch and clears all recorded laps.

## Technologies Used

- **Vanilla JavaScript**: Logic for stopwatch functionality.

- **HTML**: Page structure.

- **CSS and Bootstrap**: Basic styling for the interface.

## How It Works

The stopwatch is implemented using a class-based structure in JavaScript. The core functionality includes tracking time, updating the display, and handling user interactions with buttons.

### Methods:

- `start()`: Starts the stopwatch if it is not already running.

- `stop()`: Stops the stopwatch and saves the paused time.

- `lap()`: Records the current lap time.

- `reset()`: Resets the stopwatch and clears the lap list.

- `updateTime()`: Updates the displayed time every second.

- `pad()`: Pads the time to ensure it is always displayed in a two-digit format (e.g., `01:02:03`).