diff --git a/index.html b/index.html index bb7139c2..fbc8a694 100644 --- a/index.html +++ b/index.html @@ -380,6 +380,13 @@

Random Fact Generator

+ +
+
+

Application

+

Stopwatch

+
+ @@ -420,4 +427,4 @@

IEEE SSIT VIT © 2023

- \ No newline at end of file + diff --git a/projects/Stopwatch/Contributing.md b/projects/Stopwatch/Contributing.md new file mode 100644 index 00000000..e69de29b diff --git a/projects/Stopwatch/Contributors.md b/projects/Stopwatch/Contributors.md new file mode 100644 index 00000000..e69de29b diff --git a/projects/Stopwatch/README.md b/projects/Stopwatch/README.md new file mode 100644 index 00000000..9ddb05f3 --- /dev/null +++ b/projects/Stopwatch/README.md @@ -0,0 +1,14 @@ +

Stopwatch ⏱️

+ +
+
+

Hello Sir/Ma'am👋, Here is my Project of Stopwatch ⏱️

+

Issue No. #339

+ + +

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. 🙏

+ +# Video + +https://github.com/apu52/Stopwatch-maker/assets/114172928/2cc065fe-f0bd-4759-9fa9-71d50844f31c diff --git a/projects/Stopwatch/Stopwatch.png b/projects/Stopwatch/Stopwatch.png new file mode 100644 index 00000000..61b30e7e Binary files /dev/null and b/projects/Stopwatch/Stopwatch.png differ diff --git a/projects/Stopwatch/index.html b/projects/Stopwatch/index.html new file mode 100644 index 00000000..63821b16 --- /dev/null +++ b/projects/Stopwatch/index.html @@ -0,0 +1,28 @@ + + + + + + + Stopwatch + + + +
+
+ 00 : 00 : 00 : 000 +
+
+ + + +
+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/projects/Stopwatch/script.js b/projects/Stopwatch/script.js new file mode 100644 index 00000000..3224bc51 --- /dev/null +++ b/projects/Stopwatch/script.js @@ -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 = `

+ Id: \u00A0 ${i} \u00A0\u00A0\u00A0\u00A0\ --------> \u00A0\u00A0\u00A0 \u00A0\u00A0\u00A0 ${timeRef.innerText} +

` + // updating i + i = i + 1; + newNode.innerHTML = ele + lapsItems.prepend(newNode) + } + else { + alert("Start Timer First") + } +}) \ No newline at end of file diff --git a/projects/Stopwatch/style.css b/projects/Stopwatch/style.css new file mode 100644 index 00000000..fd0d3315 --- /dev/null +++ b/projects/Stopwatch/style.css @@ -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%; + } +} \ No newline at end of file