-
Notifications
You must be signed in to change notification settings - Fork 124
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #482 from apu52/Stopwatch
- Loading branch information
Showing
8 changed files
with
254 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <h1 align="center"> Stopwatch ⏱️ </h1> | ||
|
|
||
| <div> | ||
| <br> | ||
| <h2>Hello Sir/Ma'am👋, Here is my Project of Stopwatch ⏱️ </h2> | ||
| <h3>Issue No. #339</h3> | ||
|
|
||
|
|
||
| <p>Hello Coders👨💻 ,I am Arpan Chowdhury, a aspiring Web developer.🤖 Here is the project of the front-end Web Developement. We all use the most famous Application in our phone named STOPWATCH. | ||
| I want to add my Project under GSSOC 2.0 . Please take a review of my PR & please merge it. 🙏</p> | ||
|
|
||
| # Video | ||
|
|
||
| https://github.com/apu52/Stopwatch-maker/assets/114172928/2cc065fe-f0bd-4759-9fa9-71d50844f31c |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Stopwatch</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="timer-display"> | ||
| 00 : 00 : 00 : 000 | ||
| </div> | ||
| <div class="buttons"> | ||
| <button id="start-timer">Start</button> | ||
| <button id="pause-timer">Pause</button> | ||
| <button id="reset-timer">Reset</button> | ||
| </div> | ||
| <div class="laps-container"> | ||
| <button id="laps-timer">Laps</button> | ||
| </div> | ||
| </div> | ||
| <div class="laps-items"> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]; | ||
| let timeRef = document.querySelector(".timer-display"); | ||
| let laps = document.querySelector("#laps-timer"); | ||
| let lapsItems = document.querySelector(".laps-items"); | ||
| let int = null; | ||
|
|
||
| document.getElementById("start-timer").addEventListener("click", () => { | ||
| if (int !== null) { | ||
| clearInterval(int); | ||
| } | ||
| int = setInterval(displayTimer, 10); | ||
| }); | ||
|
|
||
| document.getElementById("pause-timer").addEventListener("click", () => { | ||
| clearInterval(int); | ||
| }); | ||
|
|
||
| document.getElementById("reset-timer").addEventListener("click", () => { | ||
| clearInterval(int); | ||
| [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]; | ||
| timeRef.innerHTML = "00 : 00 : 00 : 000 "; | ||
| }); | ||
|
|
||
| function displayTimer() { | ||
| milliseconds += 10; | ||
| if (milliseconds == 1000) { | ||
| milliseconds = 0; | ||
| seconds++; | ||
| if (seconds == 60) { | ||
| seconds = 0; | ||
| minutes++; | ||
| if (minutes == 60) { | ||
| minutes = 0; | ||
| hours++; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| let h = hours < 10 ? "0" + hours : hours; | ||
| let m = minutes < 10 ? "0" + minutes : minutes; | ||
| let s = seconds < 10 ? "0" + seconds : seconds; | ||
| let ms = | ||
| milliseconds < 10 | ||
| ? "00" + milliseconds | ||
| : milliseconds < 100 | ||
| ? "0" + milliseconds | ||
| : milliseconds; | ||
|
|
||
| timeRef.innerHTML = `${h} : ${m} : ${s} : ${ms}`; | ||
| } | ||
|
|
||
| // Inserting Laps | ||
| let i = 1; | ||
| laps.addEventListener("click", () => { | ||
| if (milliseconds > 0) { | ||
| const newNode = document.createElement("li") | ||
| newNode.setAttribute("class", "items") | ||
| lapsItems.style.display = 'block' | ||
| const ele = `<h4> | ||
| Id: \u00A0 ${i} \u00A0\u00A0\u00A0\u00A0\ --------> \u00A0\u00A0\u00A0 \u00A0\u00A0\u00A0 ${timeRef.innerText} | ||
| </h4>` | ||
| // updating i | ||
| i = i + 1; | ||
| newNode.innerHTML = ele | ||
| lapsItems.prepend(newNode) | ||
| } | ||
| else { | ||
| alert("Start Timer First") | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| *, | ||
| *:before, | ||
| *:after { | ||
| padding: 0; | ||
| margin: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| background: #8c52ff; | ||
| } | ||
|
|
||
| .container { | ||
| background-color: #fff; | ||
| width: 40%; | ||
| min-width: 500px; | ||
| position: absolute; | ||
| transform: translate(-50%, -50%); | ||
| top: 50%; | ||
| left: 50%; | ||
| padding: 20px 0; | ||
| padding-bottom: 50px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.338); | ||
| } | ||
|
|
||
| .timer-display { | ||
| position: relative; | ||
| width: 92%; | ||
| background: #fff; | ||
| left: 4%; | ||
| font-family: "Roboto mono", monospace; | ||
| color: #8c52ff; | ||
| font-size: 30px; | ||
| padding: 40px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-around; | ||
| border-radius: 5px; | ||
| box-shadow: 0 0 20px rgba(65, 5, 145, 0.25); | ||
| } | ||
|
|
||
| .buttons { | ||
| width: 90%; | ||
| margin: 60px auto 0 auto; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| } | ||
|
|
||
| .buttons button { | ||
| width: 120px; | ||
| height: 45px; | ||
| background-color: #8c52ff; | ||
| color: #fff; | ||
| border: none; | ||
| font-family: "Poppins", sans-serif; | ||
| font-size: 18px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| outline: none; | ||
| } | ||
|
|
||
| .buttons button:nth-last-child(2) { | ||
| background-color: #e35209; | ||
| } | ||
|
|
||
| .buttons button:nth-last-child(1) { | ||
| background-color: #f7df1e; | ||
| } | ||
|
|
||
| .buttons button:hover { | ||
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); | ||
| } | ||
| .laps-container{ | ||
| width: 88%; | ||
| margin: auto; | ||
| margin-top: 10px; | ||
| padding: 0 16px; | ||
| text-align: center; | ||
| } | ||
| .laps-container button{ | ||
| height: 45px; | ||
| width: 100%; | ||
| border: none; | ||
| background-color: rgb(14, 171, 14); | ||
| font-family: "Poppins", sans-serif; | ||
| font-size: 18px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| outline: none; | ||
| color: whitesmoke; | ||
| } | ||
| .laps-items{ | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 75%; | ||
| width: 40%; | ||
| min-width: 500px; | ||
| transform: translate(-50%); | ||
| /* background-color: #4f11cc; */ | ||
| margin-top: 10px; | ||
| padding: 10px 0; | ||
| /* display: none; */ | ||
| } | ||
|
|
||
| .laps-items .items{ | ||
| list-style-type: none; | ||
| margin-top: 5px; | ||
| background-color: whitesmoke; | ||
| border-radius: 10px; | ||
| text-align: center; | ||
| padding: 10px 25px; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /* Media Queries */ | ||
| @media screen and (max-width: 480px) { | ||
| .container{ | ||
| min-width: fit-content; | ||
| } | ||
| .timer-display{ | ||
| padding: 40px 0; | ||
| font-size: 26px; | ||
| } | ||
| .laps-container{ | ||
| width: 95%; | ||
| padding: 0 10px; | ||
| } | ||
| .laps-items{ | ||
| min-width: 354px; | ||
| top: 73%; | ||
| } | ||
| } |