Add files via upload

2023-04-04 01:20:16 +03:00 · 2023-04-04 01:20:16 +03:00 · ede8a86576
commit ede8a86576
parent 15fee33355
5 changed files with 210 additions and 0 deletions
--- a/100_projects/42-alarm-clock/alarm-clock.png
+++ b/100_projects/42-alarm-clock/alarm-clock.png
--- a/100_projects/42-alarm-clock/css/style.css
+++ b/100_projects/42-alarm-clock/css/style.css
@ -0,0 +1,103 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body, .alram, .content{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #FFF;
+}
+body{
+  background: #E86357;
+}
+.alram{
+  position: relative;
+  width: 350px;
+  min-height: 400px;
+  background: rgba(255, 255, 255, .1);
+  box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
+  border: 1px solid rgba(255, 255, 255, .5);
+  padding: 50px;
+  border-radius: 15px;
+  flex-direction: column;
+  margin-top: 80px;
+}
+.alram::after{
+  content: '';
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 20%;
+  background:linear-gradient(315deg,#ffbc00,#ff0058);
+  filter: blur(30px);
+  z-index: -1;
+}
+.alram::before{
+  content: '';
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  position: absolute;
+  bottom: -70%;
+  right: 20%;
+  background:linear-gradient(315deg,#ffbc00,#B6D6C8);
+  filter: blur(20px);
+  z-index: -1;
+}
+.alram img{
+  max-width:103px;
+  border-bottom: 2px solid #fff
+}
+.alram h1{
+  font-size: 35px;
+  font-weight: 600;
+  margin: 30px 0;
+}
+.alram .content{
+  width: 100%;
+  justify-content: space-between;
+  gap: 3px;
+}
+.alram .content.disable{
+  opacity: .6;
+  pointer-events: none;
+}
+.content .count{
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, .5);
+}
+.count select{
+  outline: none;
+  border: none;
+  background: rgba(255, 255, 255, .1);
+  box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
+  color: #fff;
+  padding: 10px 15px;
+  width: 100%;
+  font-size: 14px;
+  transition: ease-in .1s;
+  text-align: center;
+}
+.count select:hover{
+  background: rgba(255, 255, 255, .5);
+}
+.alram button{
+  margin-top: 20px;
+  font-size: 14px;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, .1);
+  box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
+  border: 1px solid rgba(255, 255, 255, .5);
+  color: #fff;
+  cursor: pointer;
+  transition: .1s;
+}
+.alram button:hover{
+  background: rgba(255, 255, 255, .5);
+}
--- a/100_projects/42-alarm-clock/files/ringtone.mp3
+++ b/100_projects/42-alarm-clock/files/ringtone.mp3
--- a/100_projects/42-alarm-clock/index.html
+++ b/100_projects/42-alarm-clock/index.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/all.css">
+  <link rel="stylesheet" href="css/style.css">
+  <title>Document</title>
+</head>
+  <body>
+    <div class="alram">
+      <img src="alarm-clock.png" alt="clock">
+      <h1>00:00:00 PM</h1>
+      <div class="content">
+        <div class="count">
+          <select>
+            <option value="Hour" selected hidden>Hour</option>
+          </select>
+        </div>
+        <div class="count">
+          <select>
+            <option value="Minute" selected hidden>Minute</option>
+          </select>
+        </div>
+        <div class="count">
+          <select>
+            <option value="AM/PM" selected hidden>AM/PM</option>
+          </select>
+        </div>
+      </div>
+      <button>Set Alarm</button>
+    </div>
+    <script src="js/main.js"></script>
+  </body>
+</html>
--- a/100_projects/42-alarm-clock/js/main.js
+++ b/100_projects/42-alarm-clock/js/main.js
@ -0,0 +1,71 @@
+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(() => {
+  // Getting hour, mins secs
+  let date = new Date(),
+  h = date.getHours(),
+  m = date.getMinutes(),
+  s = date.getSeconds(),
+  amPm= "AM"
+
+  if (h >= 12) {
+    h = h - 12;
+    amPm = "PM";
+  }
+  // If hour value is 0, set this value to 12
+  h = h == 0 ? h = 12 : h;
+  // adding 0 before hr, min, sec if this value if less then 10
+  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.innerHTML = "Set Alarm";
+    return isAlarmSet = false // return isAlarmSet value to false
+  }
+
+  // getting hour, minute, ampm select tag value
+  let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;
+
+  if(time.includes("Hour") || time.includes("Mintue") || time.includes("AM/PM")){
+    return alert("Please, select a valid time to set Alarm !");
+  }
+  isAlarmSet = true;
+  alarmTime = time;
+  content.classList.add('disable');
+  setAlarmBtn.innerHTML = "Reset";
+}
+setAlarmBtn.addEventListener("click", setAlarm);