<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="style.css">
  <script src="index.js"></script>

  <style>
    body {
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <!-- Clock Face -->
  <h1 style="text-align:center;">Alarm Clock and Timer</h1>

  <div id="clockContainer">
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
  </div>

  <br><br>
  <hr>

  <!-- Day date Alarm Setting html -->

  <input id="alarmTime" type="datetime-local">
  <button id="alarmButton" onclick="setAlarm(this);">Set Alarm</button>

  <div id="alarmOptions" style="display: none;">
    <button onclick="snooze();">Snooze 5 minutes</button>
    <button onclick="stopAlarm();">Stop Alarm</button>
  </div>
  
<!-- Day date Alarm Setting js-->
  <script type="text/javascript">
    var alarmSound = new Audio();
    alarmSound.src = 'https://assets.codepen.io/78749/fantasy_alarm_clock.mp3';
    
    var alarmTimer;
    function setAlarm(button) {
      var ms = document.getElementById('alarmTime').valueAsNumber;
      if (isNaN(ms)) {
        alert('Invalid Date');
        return;
      }
      var alarm = new Date(ms);
      var alarmTime = new Date(alarm.getUTCFullYear(), alarm.getUTCMonth(), alarm.getUTCDate(), alarm.getUTCHours(), alarm.getUTCMinutes(), alarm.getUTCSeconds());
      var differenceInMs = alarmTime.getTime() - (new Date()).getTime();
      if (differenceInMs < 0) {
        alert('Specified time is already passed');
        return;
      }
      alarmTimer = setTimeout(initAlarm, differenceInMs);
      button.innerText = 'Cancel Alarm';
      button.setAttribute('onclick', 'cancelAlarm(this);');
    };

    function cancelAlarm(button) {
      clearTimeout(alarmTimer);
      button.innerText = 'Set Alarm';
      button.setAttribute('onclick', 'setAlarm(this);')
    };

    function initAlarm() {
      alarmSound.play();
      document.getElementById('alarmOptions').style.display = '';
    };

    function stopAlarm() {
      alarmSound.pause();
      alarmSound.currentTime = 0;
      document.getElementById('alarmOptions').style.display = 'none';
      cancelAlarm(document.getElementById('alarmButton'));
    };

    function snooze() {
      stopAlarm();
      alarmTimer = setTimeout(initAlarm, 300000); // 5 * 60 * 1000 = 5 Minutes
    };
  </script>
body {
  background-color: #c9c9c9;
}

#clockContainer {
  position: relative;
  margin: auto;
  height: 40vw;
  /*to make the height and width responsive*/
  width: 40vw;
  background: url(https://assets.codepen.io/78749/clock-face.png) no-repeat;
  /*setting our background image*/
  background-size: 100%;
}

#hour,
#minute,
#second {
  position: absolute;
  background: black;
  border-radius: 10px;
  transform-origin: bottom;
}

#hour {
  width: 1.8%;
  height: 25%;
  top: 25%;
  left: 48.85%;
  opacity: 0.8;
}

#minute {
  width: 1.6%;
  height: 30%;
  top: 19%;
  left: 48.9%;
  opacity: 0.8;
}

#second {
  width: 1%;
  height: 40%;
  top: 9%;
  left: 49.25%;
  opacity: 0.8;
}

.audio {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 40vw;
  /*to make the height and width responsive*/
  width: 40vw;
}

/* This is a single-line comment */

.center {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  border: 3px solid #3b21ad;
  padding: 10px;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

label {
  font-size: 28px;
}

#party {
  font-size: 28px;
  color: #0320fc;
}

form {
  margin: 0 auto;
  width: 800px;
}

#alarmTime {
  font-size: 28px;
}

#alarmButton {
  font-size: 28px;
}

setInterval(() => {
  d = new Date(); //object of date()
  hr = d.getHours();
  min = d.getMinutes();
  sec = d.getSeconds();
  hr_rotation = 30 * hr + min / 2; //converting current time
  min_rotation = 6 * min;
  sec_rotation = 6 * sec;

  hour.style.transform = `rotate(${hr_rotation}deg)`;
  minute.style.transform = `rotate(${min_rotation}deg)`;
  second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.