/60sec_Timer

Timer of 1 Min

Primary LanguageJavaScript

Circular Timer Project

This project implements a simple circular timer with countdown functionality using HTML, CSS, and JavaScript. The circular timer visually represents the remaining time as the countdown progresses.

Table of Contents

Demo

You can view a live demo of the circular timer here.

Features

  • Circular timer animation with three overlapping circles
  • Countdown timer with minutes and seconds display
  • Buttons to add time, skip time, clear the timer, and restart the timer

Installation

To use this circular timer in your project, follow these steps:

  1. Clone the repository:

    git clone <repository-url>

  2. Include the necessary files in your HTML file:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and title -->
  </head>
  <body>
    <!-- Include the CSS -->
    <link rel="stylesheet" href="./style.css" />

    <!-- Timer Section -->
    <!-- Add the HTML structure here -->

    <!-- Include the JavaScript -->
    <script src="script.js"></script>
  </body>
</html>

Usage

To start using the circular timer, simply include the necessary files as described in the installation section. The circular timer will automatically start when the HTML page is loaded.

  • To add 10 seconds to the timer, click on the "Add(+10s)" button.
  • To skip 5 seconds from the timer, click on the "Skip(-5s)" button.
  • To reset the timer to zero, click on the "Clear" button.
  • To restart the timer to its initial value, click on the "Restart" button.

image