Merge pull request #392 from Sapna2001/alarm_clock

tejan-singh · web-flow · commit 77f235bf3e35 · 2020-11-19T11:34:34.000+05:30
Alarm clock in JavaScript
diff --git a/JavaScript/Alarm_Clock/Readme.md b/JavaScript/Alarm_Clock/Readme.md
@@ -0,0 +1,10 @@
+# Alarm Clock
+
+A website for alarm clock.
+
+## How to use the script ?
+
+Open index.html in any browser. 
+
+## Screenshot
+![demo](https://user-images.githubusercontent.com/56690856/99620214-18af7d80-2a4b-11eb-8f07-dfbf52b9df48.png)
diff --git a/JavaScript/Alarm_Clock/audio.mp3 b/JavaScript/Alarm_Clock/audio.mp3
diff --git a/JavaScript/Alarm_Clock/index.html b/JavaScript/Alarm_Clock/index.html
@@ -0,0 +1,24 @@
+<!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 rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <form>
+            <label for="alarm"><h1>Set Alarm</h1></label>
+            <h2>Enter the time in yyyy-mm-dd hh:mm:ss</h2>
+            <input type="text" id="alarm" name="alarm" placeholder="ENTER"></br>
+            <button id="alarmSubmit" type="submit" class="btn">Set Alarm</button>
+            <button id="alarmStop" type="submit" class="btn">Stop Alarm</button>
+        </form>
+    </div>
+    <audio id="alarmAudio">
+        <source src="audio.mp3" type="audio/mpeg">
+    </audio>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/JavaScript/Alarm_Clock/index.js b/JavaScript/Alarm_Clock/index.js
@@ -0,0 +1,35 @@
+const alarmSubmit = document.getElementById("alarmSubmit");
+const alarmStop = document.getElementById("alarmStop");
+const audio = document.getElementById("alarmAudio");
+
+// Add an event listener to the submit button
+alarmSubmit.addEventListener("click", setAlarm);
+
+// Add an event listener to the stop button
+alarmStop.addEventListener("click", stopAlarm);
+
+// function to play the alarm ring tone
+function ringBell() {
+	audio.play();
+}
+
+// function to set alarm
+function setAlarm(e) {
+	e.preventDefault();
+	const alarm = document.getElementById("alarm");
+	alarmDate = new Date(alarm.value);
+	now = new Date();
+	console.log(now);
+	let timeToAlarm = alarmDate - now;
+	console.log(timeToAlarm);
+	if (timeToAlarm >= 0) {
+		setTimeout(() => {
+			ringBell();
+		}, timeToAlarm);
+	}
+}
+
+// function to stop alarm
+function stopAlarm(e) {
+	audio.pause();
+}
diff --git a/JavaScript/Alarm_Clock/style.css b/JavaScript/Alarm_Clock/style.css
@@ -0,0 +1,38 @@
+body {
+    background-color: #fecd1a;
+}
+
+.container {
+    background-color: black;
+    color: white;
+    padding: 30px;
+    text-align: center;
+    margin: auto;
+    width: 50%;
+    margin-top: 10%;
+    border-radius: 30px;
+}
+
+h1{
+    font-size:60px
+}
+
+h2 {
+    font-size: 40px;
+}
+
+.btn{
+    margin: 25px;
+    font-size: 25px;
+    border-color: chartreuse;
+    border-width: 5px;
+}
+
+#alarm{
+    font-size: 30px;
+    padding: 10px;
+}
+
+::placeholder{
+    color: black;
+}
