Update and rename Hogwarts room/hogwarts timer to Hogwarts room/Hogwa…

…rts/index.html
ImChierry · Apr 13, 2024 · c410e0f · c410e0f
1 parent a3f6a7d
commit c410e0f
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 1 deletion.
diff --git a/Hogwarts room/Hogwarts/index.html b/Hogwarts room/Hogwarts/index.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+
+
+  <style>
+
+.section {
+			display: flex;
+      background-color: grey;
+			flex-direction: column;
+			align-items: center;
+			justify-content: flex-start;
+			padding: 5mm;
+			overflow: hidden;
+    }
+    #display {
+			font-size: 20mm;
+			font-weight: bold;
+      font-family: cookie;
+			color: peru;
+			margin-top: 2mm;
+			margin-bottom: 2mm;
+		}
+
+.section input {
+      font-size: 3mm;
+        color: goldenrod;
+        background-color: white;
+        text-align: center;
+        border: 0.1mm solid royalblue;
+        width: 40px;
+        padding: 3px 3px;
+        margin-right: 2px;
+       display: inline-block;
+    }
+    .buttons {
+        display: flex;
+        flex-direction: row;
+    }
+
+        .buttons button {
+            font-size: 14px;
+			color: white;
+			padding: 2px 3px;
+			border: none;
+			border-radius: 1px;
+			margin: 1px;
+			cursor: pointer;
+        }
+
+            .buttons button:active {
+                box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
+            }
+
+            .buttons button:last-child {
+                margin-right: 0;
+            }
+
+            .buttons button:nth-child(3){
+                background-color: #8bc34a;
+            }
+
+            .buttons button:nth-child(4){
+                background-color: rgb(201, 89, 69);
+            }
+
+  </style>
+
+</head>
+<body>
+  <section class="section">
+    <div id="display">0:00</div>
+
+    <div class="buttons">
+      <input type="text" id="input" name="input" placeholder="minutes">
+      <input type="text" id="input2" name="input2" placeholder="seconds">
+
+      <button onclick="start()">▶</button>
+      <button onclick="cancel()">∎</button>
+    </div>
+
+  </section>
+</body>
+
+
+<script>
+  function beep() {
+    var snd = new Audio("bell.mp3");  
+    snd.play();
+}
+  var timer;
+
+
+function start(){
+  var input = document.getElementById("input").value;
+  var input2 = document.getElementById("input2").value;
+
+
+minute = parseInt(input)
+seconds1 = parseInt(input2)
+if( isNaN(seconds1)){
+  seconds1 = 0
+}
+if( isNaN(minute)){
+  minute = 0
+}
+seconds = minute*60+seconds1
+
+if(seconds==0){
+
+  return;
+}
+
+var textSec = "00"
+textSec = seconds1
+
+var display = document.getElementById("display");
+display.innerHTML = minute + ':' + textSec
+    var statSec = seconds1
+    timer = setInterval(function(){
+        seconds--;
+
+        if(statSec != 0)
+            statSec--
+        else
+            statSec = 59
+
+        if(statSec < 10)
+            textSec = '0' + statSec
+        else 
+            textSec = statSec
+
+        display.innerHTML = Math.floor(seconds/60) + ':' + textSec
+
+        if(seconds == 0){
+          console.log('d')
+          beep();
+        clearInterval(timer)
+        }
+
+    }, 1000)
+
+}
+
+
+function cancel(){
+    clearInterval(timer)
+    display.innerHTML ='00:00'
+    seconds = minute * 60
+}
+
+
+
+</script>
+
+
+
+</html>
diff --git a/Hogwarts room/hogwarts timer b/Hogwarts room/hogwarts timer