Giter Club home page Giter Club logo

open-clock's Introduction

iOS-Style Stopwatch, Timer, and Alarm Web App

This web application provides a sleek, iOS-inspired interface for a stopwatch, timer, and alarm clock. It's built using HTML, CSS, and JavaScript, offering a responsive and intuitive user experience.

Features

  1. Stopwatch

    • Start, stop, and reset functionality
    • Lap time recording
    • Millisecond precision
  2. Timer

    • Set custom hours, minutes, and seconds
    • Start, pause, and reset options
    • Alert when timer reaches zero
  3. Alarm Clock

    • Set alarms using a time input
    • Display time until alarm goes off
    • Play an alarm sound when the set time is reached
  4. Current Time Display

    • Shows the current time, updating every second
  5. Theme Toggle

    • Switch between light and dark modes
    • Theme preference is saved in local storage

Usage

  1. Open index.html in a web browser.
  2. Use the tab buttons to switch between Stopwatch, Timer, and Alarm functionalities.
  3. For the Stopwatch:
    • Click "Start" to begin, "Stop" to pause, and "Lap" to record lap times.
    • When stopped, click "Reset" to clear the stopwatch.
  4. For the Timer:
    • Enter the desired hours, minutes, and seconds.
    • Click "Start" to begin the countdown, "Pause" to stop, and "Reset" to clear.
  5. For the Alarm:
    • Set the desired alarm time using the time input.
    • Click "Set Alarm" to activate, and "Clear Alarm" to deactivate.
  6. Use the "Toggle Theme" button in the top-right corner to switch between light and dark modes.

Files

  • index.html: The main HTML structure of the app.
  • styles.css: Contains all the styling for the app, including light and dark themes.
  • script.js: Implements all the functionality for the stopwatch, timer, and alarm.

Customization

You can easily customize the app by modifying the CSS variables in the :root selector within styles.css. This allows you to change colors, fonts, and other visual aspects of the app.

Browser Compatibility

This app is designed to work on modern web browsers and is responsive for various screen sizes.

open-clock's People

Watchers

 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.