Merge pull request #164 from Gaurav0203Shetty/alarm

Alarm clock project
shrey141102 · Dec 23, 2023 · 877cbd3 · 877cbd3
2 parents 1248ec5 + a61eee3
commit 877cbd3
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 0 deletions.
diff --git a/Alarm-clock/.DS_Store b/Alarm-clock/.DS_Store
diff --git a/Alarm-clock/.vscode/settings.json b/Alarm-clock/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
diff --git a/Alarm-clock/Files/.DS_Store b/Alarm-clock/Files/.DS_Store
diff --git a/Alarm-clock/Files/clock.png b/Alarm-clock/Files/clock.png
diff --git a/Alarm-clock/Files/ringtone.mp3 b/Alarm-clock/Files/ringtone.mp3
diff --git a/Alarm-clock/README.md b/Alarm-clock/README.md
@@ -0,0 +1,24 @@
+Alarm Clock Website:
+Welcome to the Alarm Clock website! This simple web application allows you to set alarms and be notified with a pleasant ringtone when the specified time arrives.
+
+Getting Started-
+To use this Alarm Clock website, simply open the index.html file in a modern web browser. The website is built using HTML, CSS, and JavaScript. You can customize the alarm sound by replacing the ringtone.mp3 file in the Files directory.
+
+Features-
+1)Set alarms for specific hours and minutes.
+2)Choose between AM and PM options.
+3)Clear alarms when no longer needed.
+4)Responsive design for a seamless experience on various devices.
+
+Usage-
+1)Open the index.html file in your web browser.
+2)Select the desired hour, minute, and AM/PM options from the dropdown menus.
+3)Click the "Set alarm" button to activate the alarm.
+4)The current time and set alarm time will be displayed at the top of the page.
+5)To clear the alarm, click the "Clear alarm" button.
+
+Customization-
+Feel free to customize the website according to your preferences. You can change the background, font styles, or even modify the layout. Additionally, you can replace the default alarm sound (ringtone.mp3) with your preferred audio file.
+
+Contributing-
+If you find any issues or have suggestions for improvements, please open an issue or submit a pull request. Contributions are welcome!
diff --git a/Alarm-clock/index.html b/Alarm-clock/index.html
@@ -0,0 +1,34 @@
+<!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="wrapper">
+        <img src="./Files/clock.png" alt="Error" width="150px">
+        <h1>00:00:00 PM</h1>
+        <div class="content">
+            <div class="column">
+                <select>
+                    <option value="Hour" selected hidden>Hour</option>
+                </select>
+            </div>
+            <div class="column">
+                <select>
+                    <option value="Minutes" selected hidden>Minutes</option>
+                </select>
+            </div>
+            <div class="column">
+                <select>
+                    <option value="AM/PM" selected hidden>AM/PM</option>
+                </select>
+            </div>
+        </div>
+        <button>Set alarm</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Alarm-clock/script.js b/Alarm-clock/script.js
@@ -0,0 +1,72 @@
+const currentTime = document.querySelector("h1"),
+content = document.querySelector(".content"),
+selectMenu = document.querySelectorAll("select"),
+setAlarmbtn = document.querySelector("button");
+
+let alarmTime, isAlarmSet = false;
+ringtone = new Audio('./Files/ringtone.mp3')
+
+for(let i = 12; i > 0; i--){
+    i = i < 10 ? "0" + i : i;
+    let option = `<option value="${i}">${i}</option>`;
+    selectMenu[0].firstElementChild.insertAdjacentHTML("afterend", option);
+}
+
+for(let i = 59; i >= 0; i--){
+    i = i < 10 ? "0" + i : i;
+    let option = `<option value="${i}">${i}</option>`;
+    selectMenu[1].firstElementChild.insertAdjacentHTML("afterend", option);
+}
+
+for(let i = 2; i > 0; i--){
+    let ampm = i == 1 ? "AM" : "PM"
+    let option = `<option value="${ampm}">${ampm}</option>`;
+    selectMenu[2].firstElementChild.insertAdjacentHTML("afterend", option);
+}
+
+setInterval(() => {
+    let date = new Date(),
+    h = date.getHours(),
+    m = date.getMinutes(),
+    s = date.getSeconds(),
+    ampm = 'AM';
+
+    if(h >= 12){
+        h = h - 12;
+        ampm = "PM";
+    }
+
+    h = h == 0 ? h = 12 : h;
+
+    h = h < 10 ? "0" + h : h;
+    m = m < 10 ? "0" + m : m;
+    s = s < 10 ? "0" + s : s;
+
+    currentTime.innerText = `${h}:${m}:${s} ${ampm}`
+
+    if( alarmTime == `${h}:${m} ${ampm}`){
+        ringtone.play();
+        ringtone.loop = true;
+    }
+}, 1000);
+
+function setAlarm(){
+    if(isAlarmSet){
+        alarmTime = "";
+        ringtone.pause();
+        content.classList.remove("disable");
+        setAlarmbtn.innerText = "Set alarm";
+        return isAlarmSet = false;
+    }
+
+    let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`
+    if(time.includes("Hour") || time.includes("Minutes") || time.includes("AM/PM")){
+        return alert("Please select a valid time to set the alarm!")
+    }
+    alarmTime = time;
+    isAlarmSet = true;
+    content.classList.add("disable");
+    setAlarmbtn.innerText = "Clear alarm";
+}
+
+setAlarmbtn.addEventListener("click", setAlarm);
diff --git a/Alarm-clock/style.css b/Alarm-clock/style.css
@@ -0,0 +1,72 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body, .wrapper, .content{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+body{
+    background: linear-gradient(90deg, #FCEDDA, #EE4E34);
+    min-height: 100vh;
+}
+
+.wrapper{
+    width: 440px;
+    background: #fff;
+    border-radius: 10px;
+    flex-direction: column;
+    padding: 30px 30px 40px;
+}
+
+.wrapper img{
+    max-width: 100px;
+}
+
+.wrapper h1{
+    font-size: 38px;
+    font-weight: 500;
+    margin: 30px 0;
+}
+
+.wrapper .content{
+    width: 100%;
+    justify-content: space-between;
+}
+
+.wrapper .content.disable{
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.content .column{
+    border-radius: 2px;
+    border: 1px solid #999;
+    width: calc(100% / 3 - 5px);
+}
+
+.column select{
+    outline: none;
+    border: none;
+    height: 53px;
+    width: 100%;
+    font-size: 20px;
+}
+
+.wrapper button{
+    width: 100%;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    color: black;
+    margin-top: 20px;
+    font-size: 20px;
+    padding: 17px 0;
+    border-radius: 5px;
+    background: linear-gradient(90deg, #EE4E34, #f0cea1);
+}
diff --git a/script.js b/script.js
@@ -307,6 +307,12 @@ const projects = [
     link: "Color-flipper/hex.html",
     image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd4egYjl9JWA--VrLpIi0IBH9-6upHLczwwfMjnlhgA3B9W4tAeF5qHJW84d3svyNgJ1a7RO2kt3PwdR6zqPLp9elWfO_1a8OMPbq4hBm4SJA1UQaEMDlwHTRv8kB_S2LL9MtPuup_WK4d8Dm8y5iGuBhCzIf9dwZ4iQMFimpo3ESSlSKPBiL6eK1Fg/s1280/Copy%20of%20Copy%20of%20SVG%20in%20HTML%20(2).png"
   },
+  {
+    title: "Alarm Clock",
+    discription: "This simple web application allows you to set alarms and be notified with a pleasant ringtone when the specified time arrives.",
+    link: "Alarm-clock/index.html",
+    image: "https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/158/posts/38726/final_image/DigitalClockTextEffect0.jpg"
+  },
 ];
 
 const cards = document.getElementsByClassName("cards");