i created a stopwatch app

SalmanFarshe · Sep 23, 2021 · 17c9840 · 17c9840
commit 17c9840
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,85 @@
+:root{
+    --text-color:white;
+    --bg-color: rgb(51, 27, 73);
+    --button-bg:#27282C;
+}
+*{
+    margin: 0%;
+    padding: 0%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+body{
+    background-color:var(--bg-color);
+}
+.stop-watch-wrap{
+    background-color: var(--button-bg);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 580px;
+    width: 300px;
+    border-radius: 25px;
+    color: var(--text-color);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 100px;
+    text-align: center;
+    justify-content: center;
+    box-shadow: 0px 0px 15px -5px black;
+    border: 1px solid gray;
+}
+.time-wrapper{
+    display: grid;
+    grid-template-columns: max-content max-content max-content;
+    justify-content: center;
+    align-content: center;
+    border: 6px solid #9563EC;
+    border-radius: 100%;
+    height: 200px;
+    width: 200px;
+    font-size: 25px;
+    font-weight: bolder;
+    text-align: center;
+    margin: 0% auto;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    box-shadow: 0px 0px 25px -5px black;
+}
+.h1{
+    padding-top: 30px;
+    font-size: 40px;
+    text-align: start;
+    padding-left: 45px;
+}
+.pause-button,.reset-button,.Start-button{
+    background-color: var(--button-bg);
+    box-shadow: 0px 0px 15px -5px black;
+    padding: 10px 20px 10px 20px;
+    border-radius: 10px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: var(--text-color);
+    font-size: 15px;
+    font-weight: bolder;
+}
+.reset-button{
+    height: 50px;
+    width: 100%;
+    margin-left:80px;
+}
+.button-wrapper{
+    display: grid;
+    grid-gap: 50px;
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 50px 50px;
+    justify-content: center;
+}
+.start{
+    background-color:greenyellow;
+    color: black;
+}
+.pause{
+    background-color: red;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!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>Stop Watch</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="stop-watch-wrap">
+        <div class="h1">Stop Watch</div>
+        <div class="time-wrapper">
+            <div class="time-minute">
+                00 :&nbsp;
+            </div>
+            <div class="time-second">
+                00 :&nbsp;
+            </div>
+            <div class="time-milisecond">
+                00
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <button class="pause-button">Pause</button>
+            <button class="Start-button">Start</button>
+            <button class="reset-button">Reset</button>
+        </div>
+        <div class="laps-wrapper"></div>
+    </div>
+    <script src="js/root.js"></script>
+</body>
+</html>
diff --git a/js/root.js b/js/root.js
@@ -0,0 +1,63 @@
+var startButton = document.querySelector(".Start-button");
+var pauseButton = document.querySelector(".pause-button");
+var resetButton = document.querySelector(".reset-button");
+var timeMinute = document.querySelector(".time-minute");
+var timeSecond = document.querySelector(".time-second");
+var timeMilisecond = document.querySelector(".time-milisecond");
+var minuteCount = 00;
+var secondCount = 00;
+var milisecondCount = 00;
+var interval;
+function startButtonEvent() {
+	startButton.classList.add("start");
+	pauseButton.classList.remove("pause");
+	milisecondCount++;
+	timeMilisecond.innerHTML = milisecondCount;
+	if (timeMilisecond.innerHTML <= 9) {
+		timeMilisecond.innerHTML = "0" + milisecondCount;
+	}
+	if (timeMilisecond.innerHTML > 99) {
+		secondCount++;
+		timeSecond.innerHTML = secondCount;
+		milisecondCount = 00;
+	}
+	if (timeSecond.innerHTML <= 9) {
+		timeSecond.innerHTML = "0" + secondCount + " :&nbsp;";
+	}
+	if (timeSecond.innerHTML > 9) {
+		timeSecond.innerHTML = secondCount + " :&nbsp;";
+	}
+	if (secondCount == 60) {
+		minuteCount++;
+		timeMinute.innerHTML = minuteCount;
+		secondCount = 00;
+	}
+	if (timeMinute.innerHTML <= 9) {
+		timeMinute.innerHTML = "0" + minuteCount + " :&nbsp;";
+	}
+	if (timeMinute.innerHTML > 9) {
+		timeMinute.innerHTML = minuteCount + " :&nbsp;";
+	}
+}
+function startButtonInterval() {
+	interval = setInterval(startButtonEvent, 10);
+}
+function pauseButtonClearInterval() {
+	pauseButton.classList.add("pause");
+	startButton.classList.remove("start");
+	clearInterval(interval);
+}
+function resetButtonEvent() {
+    pauseButton.classList.remove("pause")
+    startButton.classList.remove("start")
+	minuteCount = 00;
+	secondCount = 00;
+	milisecondCount = 00;
+	timeMinute.innerHTML = '0' + milisecondCount + " :&nbsp;";
+	timeSecond.innerHTML = '0' + milisecondCount + " :&nbsp;";
+	timeMilisecond.innerHTML = '0' + milisecondCount;
+    clearInterval(interval);
+}
+startButton.addEventListener("click", startButtonInterval);
+pauseButton.addEventListener("click", pauseButtonClearInterval);
+resetButton.addEventListener("click", resetButtonEvent);