Add files via upload

syed-naqi-abbas · Dec 18, 2024 · 578ae9a · 578ae9a
1 parent 3ce3fc5
commit 578ae9a
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
diff --git a/alarm/alarm.html b/alarm/alarm.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alarm Clock</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+</head>
+<body>
+    <div class="text-center bg-light border-bottom border-body">
+        <h1 style="color: black;">
+            Alarm Clock
+        </h1>
+    </div>
+    <br>
+
+    <div class="container text-center">
+        <button id="newAlarm" type="submit" class="btn btn-primary">Add New Alarm +</button>
+    </div>
+    <br>
+    <div id="grid" class="row row-cols-2 row-cols-md-4 g-4">
+
+    </div>
+    <script src="alarm.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/alarm/alarm.js b/alarm/alarm.js
@@ -0,0 +1,62 @@
+let num=0;
+let grid = document.getElementById("grid");
+let bell = new Audio("bell.wav");
+function addNewAlarm(){
+    let insert = `<div id="${num}" class="col">
+            <div class="card" style="width: 20rem;">
+                <div class="card-header">
+                  Create New Alarm
+                </div>
+                <ul class="list-group list-group-flush">
+                  <li class="list-group-item">Hours : <input id="card${num}h" type="number" value=0></li>
+                  <li class="list-group-item">Minutes : <input id="card${num}m" type="number" value=0></li>
+                  <li class="list-group-item">Seconds : <input id="card${num}s" type="number" value=0></li>
+                  <li class="list-group-item"><button id="card${num}b" class="btn btn-primary" onclick="create(${num})">Create</button></li>
+                </ul>
+            </div>
+        </div>`;
+    grid.insertAdjacentHTML('beforeend',insert)
+    num++;
+}
+function delay(){
+    return new Promise((resolve,reject)=>{
+        setTimeout(()=>{
+            resolve(1);
+        },1000);
+    })
+}
+async function create(mynum){
+    let h = Number.parseInt(document.getElementById(`card${mynum}h`).value)
+    let m = Number.parseInt(document.getElementById(`card${mynum}m`).value)
+    let s = Number.parseInt(document.getElementById(`card${mynum}s`).value)
+    let time = h*60*60 + m*60 + s;
+
+    let mydiv = document.getElementById(mynum.toString())
+
+    for(let i=1;i<=time;i++){
+        mydiv.innerHTML = `<div class="card" style="width: 20rem;height:15rem">
+                <div class="card-header">
+                    Alarm
+                </div>
+                <div class="card justify-content-center align-items-center" style="height:100%; width:100%;border-style: none;">
+                    <p style="font-size:xx-large;">${h} : ${m} : ${s}</p>
+                </div>
+            </div>`
+        await delay();
+        if(s==0) {
+            s=60;
+            if(m==0){
+                h--;
+                m=60;
+            }
+            m--;
+        }
+        s--;
+    }
+    console.log(`${mynum} just got over`);
+    bell.play();
+    mydiv.replaceWith("");
+}
+
+let newAlarm = document.getElementById("newAlarm")
+newAlarm.addEventListener('click',addNewAlarm)