rgaz1962/index.html

## index.html
<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 -->

  <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>

  <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>

## jt-alarm-clock.markdown

      
    Raw
  

              jt-alarm-clock.markdown
            
          
    JT Alarm Clock

A Pen by Robert Gorman on CodePen.
License.

  
## script.js
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);

## style.css
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;
}
	<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 -->

	<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>

	<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>
	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);
	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;
	}