Spaces:

chandra7799
/

Timerapk

Sleeping

App Files Files Community

chandra7799 commited on May 6, 2025

Commit

6d3b08c

verified ·

1 Parent(s): 74b393a

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +56 -17

templates/index.html CHANGED Viewed

@@ -4,32 +4,71 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Timer App</title>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 <body>
-    <h1>Timer App</h1>
-    <div>
-        <label for="seconds">Set Timer (seconds): </label>
-        <input type="number" id="seconds" name="seconds" min="1" max="600" required>
-        <button id="start_button">Start Timer</button>
     </div>
-    <div id="timer_output"></div>
     <script>
-        // Start timer function
-        $("#start_button").click(function() {
-            let seconds = $("#seconds").val();
-            // Send a request to start the timer
-            $.ajax({
-                url: "/start_timer",
                 method: "POST",
-                data: {seconds: seconds},
-                success: function(response) {
-                    $("#timer_output").text(response.message);
                 }
             });
-        });
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Timer App</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin-top: 50px;
+        }
+        .container {
+            display: inline-block;
+            text-align: left;
+        }
+        #timer_output {
+            margin-top: 20px;
+            font-size: 20px;
+            font-weight: bold;
+        }
+    </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Timer App</h1>
+        <label for="seconds">Set Timer (seconds):</label>
+        <input type="number" id="seconds" min="1" max="600" step="1" value="10">
+        <button onclick="startTimer()">Start Timer</button>
+        <div id="timer_output"></div>
     </div>
     <script>
+        function startTimer() {
+            var seconds = document.getElementById("seconds").value;
+            fetch("/start_timer", {
                 method: "POST",
+                body: new URLSearchParams({
+                    seconds: seconds
+                }),
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded"
                 }
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log(data.message);
             });
+            updateTimerOutput();
+        }
+        function updateTimerOutput() {
+            var timerOutput = document.getElementById("timer_output");
+            var remaining = parseInt(document.getElementById("seconds").value);
+            var interval = setInterval(function() {
+                if (remaining > 0) {
+                    timerOutput.innerText = remaining + " seconds remaining...";
+                    remaining--;
+                } else {
+                    timerOutput.innerText = "Time's up!";
+                    clearInterval(interval);
+                }
+            }, 1000);
+        }
     </script>
 </body>
 </html>