bradtraversy · Aanya-Saroha · Aug 16, 2024
diff --git a/Count Down Timer/Readme.md b/Count Down Timer/Readme.md
@@ -0,0 +1 @@
+A simple Count Down timer using html,css.
diff --git a/Count Down Timer/assets/hourglass.png b/Count Down Timer/assets/hourglass.png
diff --git a/Count Down Timer/font/sans.ttf b/Count Down Timer/font/sans.ttf
diff --git a/Count Down Timer/index.html b/Count Down Timer/index.html
@@ -0,0 +1,29 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="assets/hourglass.png" type="image/x-icon">
+    <title>Countdown Timer</title>
+</head>
+<body>
+    <h1>Countdown Timer</h1>
+    <div id="centered-text">
+    <h2>Set Your Timer</h2>
+    <div id="container">
+        <p id="hour-label" class="label">Hours</p><p id="min-label" class="label">Minutes</p><p id="sec-label" class="label">Seconds</p>
+        <input id="hour" type="number" max="99" min="0" value="0" class="time"><p id="p1" class="semicolon">:</p><input id="minute" type="number" max="60" min="0" value="0" class="time"><p id="p2" class="semicolon">:</p><input id="sec" type="number" max="60" min="0" value="0" class="time">
+        <button id="start" class="btn">Start</button>
+        <button id="reset" class="btn">Reset</button>
+        <button id="pause" class="btn">Pause</button>
+    </div>
+    <footer>
+        <p>&#x3c; &#47; &#x3e;by 
+          <a>Aanya Saroha</a>
+        </p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Count Down Timer/script.js b/Count Down Timer/script.js
@@ -0,0 +1,85 @@
+
+var start = document.getElementById('start');
+var reset = document.getElementById('reset');
+var pause = document.getElementById('pause');
+
+var h = document.getElementById("hour");
+var m = document.getElementById("minute");
+var s = document.getElementById("sec");
+
+//store a reference to the startTimer variable
+var startTimer = null;
+
+start.disabled = true;
+
+[h, m, s].forEach(input => {
+  input.addEventListener('input', () => {
+    if (h.value > 0 || m.value > 0 || s.value > 0) {
+      start.disabled = false;
+    } else {
+      start.disabled = true;
+    }
+  });
+});
+
+start.addEventListener('click', function(){
+    //initialize the variable
+    function startInterval(){
+        startTimer = setInterval(function() {
+            timer();
+        }, 1000);
+    }
+    startInterval();
+    start.style.display = "none";
+    pause.style.display = "inline-block";
+    reset.style.display = "inline-block";
+})
+
+
+pause.addEventListener('click', function(){
+    stopInterval();
+    pause.style.display = "none";
+    start.style.display = "inline-block";
+});
+
+
+reset.addEventListener('click', function(){
+    h.value = 0;
+    m.value = 0;
+    s.value = 0;
+    //stop the timer after pressing "reset"
+    stopInterval();
+    start.disabled = true;
+    start.style.display = "inline-block";
+    pause.style.display = "none";
+    reset.style.display = "none";
+})
+
+function timer(){
+    if(h.value == 0 && m.value == 0 && s.value == 0){
+        h.value = 0;
+        m.value = 0;
+        s.value = 0;
+        start.disabled = true;
+    } else if(s.value != 0){
+        s.value--;
+    } else if(m.value != 0 && s.value == 0){
+        s.value = 59;
+        m.value--;
+    } else if(h.value != 0 && m.value == 0){
+        m.value = 60;
+        h.value--;
+    }
+    if (h.value == 0 && m.value == 0 && s.value == 0) {
+        start.disabled = true;
+    }
+    return;
+}
+
+
+
+//stop the function after pressing the reset button, 
+//so the time wont go down when selecting a new time after pressing reset
+function stopInterval() {
+    clearInterval(startTimer);
+}
diff --git a/Count Down Timer/style.css b/Count Down Timer/style.css
@@ -0,0 +1,167 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: "sans";    
+}
+
+@font-face {
+    font-family: "sans";
+    src: url(font/sans.ttf);
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 90vh;
+    background: #19172e;
+    color: white;
+}
+
+h1{
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    top: 0;
+    padding-top: 120px;
+}
+h2{
+    margin-bottom: 20px;
+}
+
+#start-button{
+    position: absolute;
+    cursor: pointer;
+    color: #fff;
+    background: #333;
+    font-size: 1rem;
+    padding: 15px;
+    border: none;
+    border-radius: 8px;
+    bottom: 0;
+    margin-bottom: 280px;
+}
+
+#start-button:active{
+    background: #1e8e3e;
+
+}
+#container {
+    height: 200px;
+    width: 700px;
+    background-color: #F5E4C3;
+    margin: 0 auto;
+    border: 5px solid #88B169;
+    color: #19172e;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+}
+
+/*label*/
+.label {
+    margin: 0;
+
+    justify-self: center;
+    align-self: center;
+    font-size: 30px;
+}
+
+#hour-label {
+    grid-area: 1 / 2 / 1 / 3;
+}
+
+#min-label {
+    grid-area: 1 / 3 / 1 / 4;
+}
+
+#sec-label {
+    grid-area: 1 / 4 / 1 / 5;
+}
+
+/*times*/
+.time {
+    justify-self: center;
+    align-self: center;
+
+    border: none;
+    background-color: #ffffff00;
+    font-size: 50px;
+    width: 70px;
+    height: 50px;
+}
+
+#hour {
+    grid-area: 2 / 2 / 2 / 3;
+}
+
+.semicolon {
+    justify-self: center;
+    align-self: center;
+
+    font-size: 30px;
+    margin: 0;
+}
+#p1 {
+    grid-area: 2 / 2 / 2 / 4;
+}
+
+#minute {
+    grid-area: 2 / 3 / 2 / 4;
+}
+
+#p2 {
+    grid-area: 2 / 3 / 2 / 5;
+}
+
+#sec {
+    grid-area: 2 / 4 / 2 / 5;
+}
+
+/*buttons*/
+
+.btn {
+    align-self: center;
+
+    width: 100px;
+    height: 40px;
+
+    font-size: 30px;
+    justify-self: center;
+}
+
+#start {
+    grid-area: 3 / 2 / 3 / 4;
+}
+
+#reset {
+    grid-area: 3 / 3 / 3 / 5;
+    display: none;
+}
+
+#pause {
+    grid-area: 3 / 4 / 3 / 6;
+    display: none;
+}
+footer {
+    text-align: center;
+    color: white;
+    font-size: 1rem;
+    position:fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-bottom: 0;
+    padding: 5px;
+    line-height: 3vh;
+}
+
+footer a:visited {
+    color: inherit;
+}
+
+#centered-text {
+    text-align: center;
+  }