Javascript Project to Build Alarm Clock to Set Alarm of Time With Sound in Browser Using HTML5 & CSS3 Full Project For Beginners

 

 

 

 

index.html

 

 

 

<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

<div class="table">
  <div class="cell">
    <h1 id="clock" class="clock"></h1>
    
    <select id="hours"></select>
    <select id="minutes"></select>
    <select id="seconds"></select>
    <select id="ampm">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
    
    <p>
      <button id="snooze" class="hide">Snooze</button>
      <button id="startstop">Set Alarm</button>
    </p>
  </div>
</div>

 

 

style.css

 

 

html, body {
  height: 100%;
}

/* background */
body {
  background: #333;
  text-align: center;
}

/* header */
h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 4em;
  color: #fff;
}

/* buttons */
button {
  cursor: pointer;
  margin: 0 5px;
  padding: 10px 30px;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: 0;
  color: #fff;
  transition: all ease 300ms;
}
button:hover {
  color: #333;
  background: #fff;
}

/* center content vertically and horizontally */
.table {
  display: table;
  width: 100%;
  height: 100%;
}
.cell {
  display: table-cell;
  vertical-align: middle;
  cursor: default;
}

/* variable misc classes */
.hide {
  display: none;
}

 

 

script.js

 

 

// set our variables
var time, alarm, currentH, currentM,
    activeAlarm = false,
    sound = new Audio("https://freesound.org/data/previews/316/316847_4939433-lq.mp3");

/*
  audio sound source: https://freesound.org/people/SieuAmThanh/sounds/397787/
*/

// loop alarm
sound.loop = true;

// define a function to display the current time
function displayTime() {
  var now = new Date();
  time = now.toLocaleTimeString();
  clock.textContent = time;
  // time = "1:00:00 AM";
  // watch for alarm
  if (time === alarm) {
    sound.play();
    
    // show snooze button
    snooze.className = "";
  }
  setTimeout(displayTime, 1000);
}
displayTime();

// add option values relative towards time
function addMinSecVals(id) {
  var select = id;
  var min = 59;
  
  for (i = 0; i <= min; i++) {
    // defined as new Option(text, value)
    select.options[select.options.length] = new Option(i < 10 ? "0" + i : i, i < 10 ? "0" + i : i);
  }
}
function addHours(id) {
  var select = id;
  var hour = 12;
  
  for (i = 1; i <= hour; i++) {
    // defined as new Option(text, value)
    select.options[select.options.length] = new Option(i < 10 ? "0" + i : i, i);
  }
}
addMinSecVals(minutes);
addMinSecVals(seconds);
addHours(hours);

// set and clear alarm
startstop.onclick = function() {
  // set the alarm
  if (activeAlarm === false) {
    hours.disabled = true;
    minutes.disabled = true;
    seconds.disabled = true;
    ampm.disabled = true;
    
    alarm = hours.value + ":" + minutes.value + ":" + seconds.value + " " + ampm.value;
    this.textContent = "Clear Alarm";
    activeAlarm = true;
  } else {
    // clear the alarm
    hours.disabled = false;
    minutes.disabled = false;
    seconds.disabled = false;
    ampm.disabled = false;
    
    sound.pause();
    alarm = "00:00:00 AM";
    this.textContent = "Set Alarm";
    
    // hide snooze button
    snooze.className = "hide";
    activeAlarm = false;
  }
};

// snooze for 5 minutes
snooze.onclick = function() {
  if (activeAlarm === true) {
    // grab the current hour and minute
    currentH = time.substr(0, time.length - 9);
    currentM = time.substr(currentH.length + 1, time.length - 8);
    
    if (currentM >= "55") {
      minutes.value = "00";
      hours.value = parseInt(currentH) + 1;
    } else {
      if (parseInt(currentM) + 5 <= 9) {
        minutes.value = "0" + parseInt(currentM + 5);
      } else {
        minutes.value = parseInt(currentM) + 5;
      }
    }
    
    // hide snooze button
    snooze.className = "hide";
    
    // now reset alarm
    startstop.click();
    startstop.click();
  } else {
    return false;
  }
};

Leave a Reply