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.