Add files via upload

Eduardo-Zorzan · web-flow · commit 1fc1de045cd9 · 2024-02-22T15:47:19.000-03:00
diff --git a/timer/assets/js/index.js b/timer/assets/js/index.js
@@ -0,0 +1,63 @@
+function main () {
+    const timer = document.querySelector('.timer');
+    const startButton = document.querySelector('.start');
+    const stopButton = document.querySelector('.stop');
+    const restartButton = document.querySelector('.restart');
+    let timerJS = [0, 0, 0];
+    let timerJSString;
+
+    function timerFunction (list) {
+        if (list[2] < 59) {
+            list[2]++ 
+            return list
+        } else if (list[1] < 59) {
+            list[1]++
+            return list
+        } else if (list[0] < 23) {
+            list[0]++
+            return list
+        } else {
+            return list
+        }
+    }
+
+
+    function convertString (list) {
+        list = [`${list[0]}`, `${list[1]}`, `${list[2]}`]
+        if (list[2] < 10) {
+            list[2] = `0${list[2]}`
+        } 
+        if (list[1] < 10) {
+            list[1] = `0${list[1]}`
+        } 
+        if (list[0] < 10) {
+            list[0] = `0${list[0]}`
+        } 
+        return list
+    }
+
+
+    startButton.addEventListener('click', function startFunction () { 
+        const time = setInterval(function time () {
+                timer.classList.remove('paused')
+                timerJSString = convertString(timerFunction(timerJS))
+                timer.innerHTML = `${timerJSString[0]}:${timerJSString[1]}:${timerJSString[2]}` 
+            }, 900);
+            stopButton.addEventListener('click', function () {
+                setTimeout(function () {
+                    clearInterval(time)
+                }, 10);
+                timer.classList.add('paused')
+            })
+        return             
+    });
+    restartButton.addEventListener('click', function () {
+        timerJS = [0, 0, 0];
+        timerJSString = ['00', '00', '00']
+        timer.innerHTML = `${timerJSString[0]}:${timerJSString[1]}:${timerJSString[2]}`
+        timer.classList.remove('paused')  
+    })
+}
+
+
+main()
diff --git a/timer/assets/styles/styles.css b/timer/assets/styles/styles.css
@@ -0,0 +1,40 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+:root {
+    --background-color-one: rgb(2, 120, 112);
+    --background-color-two: rgb(206, 255, 252);
+}
+.container {
+    background-color: var(--background-color-one);
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.introduction {
+    width: 60vw;
+    height: auto;
+    margin-top: 10vh;
+    background-color: var(--background-color-two);
+    padding: 2vmin;
+    border: solid var(--background-color-two);
+    border-radius: 10px;
+    font-size: 1.2em;
+    display: flex;
+    gap: 2vmin;
+    flex-direction: column;
+}
+.timer {
+    font-size: 2em;
+}
+.introduction button {
+   padding: 1vmin;
+   width: 8vmin;
+   margin: 1vh 0 0 0;
+}
+.paused {
+    color: red;
+}
diff --git a/timer/index.html b/timer/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./assets/styles/styles.css">
+</head>
+
+<body>
+    <section class="container">
+        <div class="introduction">
+            <h1>Meu Timer</h1>
+            <div>
+                <h2 class="timer">00:00:00</h2>
+                <button class="start">start</button>
+                <button class="stop">stop</button>
+                <button class="restart">restart</button>
+            </div>
+        </div>
+    </section>
+    <script src="./assets/js/index.js"></script>
+</body>
+
+</html>
