Giter VIP home page Giter VIP logo

yashchavanweb / online_stopwatch_app Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 5.96 MB

Explore a sleek and interactive website featuring a dynamic stopwatch. Engage with precision timekeeping and seamless transitions. Our sophisticated timekeeping tool boasts user-friendly controls, including start and stop, reset, laps, and clear all buttons.

Home Page: https://yashchavanweb.github.io/PRODIGY_WD_02/

HTML 12.99% JavaScript 44.64% CSS 42.37%
html-css-js javascript stopwatch webapplication webdevelo

online_stopwatch_app's Introduction

Task :

To build a stopwatch web application, you can use HTML, CSS, and JavaScript. HTML is used to structure the elements of the application. By implementing functions for starting, pausing, and resetting the stopwatch, as well as tracking and displaying lap times, users can accurately measure and record time intervals. With these technologies and functionalities, you can create an interactive and user-friendly stopwatch web application.

Website Link : https://yashchavanweb.github.io/Online_StopWatch_App/

Demo :

Prodigy.Video.2.mp4

Learnings from the Project:

HTML:

  1. Element separation for improved DOM manipulation.

CSS:

  1. Utilizing box-sizing to include padding, margin, and border in height and width calculations.
  2. Using overflow: hidden to prevent scrolling and overflow to clip container content.
  3. Responsive design with em, rem, vh, vw units.
  4. flex-wrap for responsive layout, flex-column for vertical alignment.
  5. Media queries for max-width responsiveness.
  6. Animations for dynamic content transitions.
  7. Additional Details:
    • box-sizing: border-box; ensures that padding and border are included in the element's total width and height.
    • overflow: hidden; disables scrolling, and strategic use of overflow is employed to clip content.
    • Units like em, rem, vh, and vw are used for automatic responsiveness with width adjustments.
    • flex-wrap is applied for elements to stack vertically instead of overlapping.
    • Animations are used for smooth transitions, like animating the displayed time.
    • Media queries with max-width are used for responsiveness, setting maximum widths for layout adjustments.

JavaScript:

  1. QuerySelector for accessing HTML elements using class and ID.
  2. EventListener for constructing events, passing functions without parentheses.
  3. Functions:
    • Toggle Start:
      • Determines whether to start or stop the stopwatch based on the current state (isRunning).
      • Calls the appropriate function accordingly.
    • Start Stopwatch:
      • Sets the starttime value.
      • Adjusts the start time if the stopwatch was paused (pausetime is not zero).
      • Calls the updateStopWatchFunction to display and animate the stopwatch.
    • Pause Stopwatch:
      • Sets isRunning to false.
      • Records the pause time (pausetime) as the current time minus the start time.
    • Update Stopwatch:
      • Calculates the elapsed time by subtracting the start time from the current time.
      • Calls the formatTime function to convert the elapsed time into hours, minutes, and seconds.
      • Calls the displayTime function to update the displayed time.
      • Initiates an animation for the displayed time.
    • Format Time:
      • Performs mathematical calculations to obtain hours, minutes, and seconds from the given time.
      • Ensures the formatted time values are limited to two digits.
      • Returns an object containing the formatted time values.
    • Display Time:
      • Updates the HTML content for hours, minutes, and seconds with the values received in the object parameter.
    • Resume Watch:
      • Sets isRunning to true.
      • Adjusts starttime based on the original start time and any pause time.
      • Resets pausetime to zero.
      • Calls the updateStopWatchFunction to display and animate the resumed stopwatch.
    • Reset Stopwatch:
      • Resets the stopwatch to its initial state.
      • Sets isRunning to false, pausetime to zero.
      • Calls clearLaps to clear lap records.
      • Resets lap number to 1.
      • Updates the displayed time to zero.
    • Clear Laps:
      • Clears lap records by setting the innerHTML of the lap container to an empty string.
      • Resets the lap number to 1.
    • Record Laps:
      • Checks if the stopwatch is running before creating a lap record.
      • Calculates lap time using the formatTime function.
      • Creates a new div element using createElement.
      • Applies CSS styling to the div using classList.
      • Updates the innerHTML of the div with lap details using template literals.
      • Appends the div to the lap container using appendChild.

General:

  1. Dynamic use of backticks and ${} for string interpolation.
  2. Consistent use of camelCase for function and variable names.
  3. Careful handling of conditional operations based on isRunning state.
  4. Strategic use of createElement, classList, and appendChild for dynamic content manipulation.

online_stopwatch_app's People

Contributors

yashchavanweb avatar

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.