Clock With Tick Sound
<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">
<title>Clock With Tick Sound</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: monospace;
min-height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
.clock__container {
background-color: brown;
margin: 0 auto;
display: flex;
font-size: 88px;
padding: 15px;
border-radius: 10px;
color: #fff;
}
#sound-on {
border: 1px solid #fff;
border-radius: 10px;
background-color: transparent;
color: #fff;
margin-left: 10px;
font-weight: bold;
}
#sound-on:hover,
#sound-on.active {
background-color: #fff;
color: brown;
font-weight: bold;
}
</style>
</head>
<body>
<div class="clock__container">
<div class="clock__hour-digits">00</div>
<div class="clock__digit-seperater">:</div>
<div class="clock__min-digits">00</div>
<div class="clock__digit-seperater">:</div>
<div class="clock__sec-digits">00</div>
<button id="sound-on">Sound</button>
</div>
<script>
"use strict";
let hourDigit = document.querySelector(".clock__hour-digits");
let minDigit = document.querySelector(".clock__min-digits");
let secDigit = document.querySelector(".clock__sec-digits");
let tickPlay = false;
let tickSound = new Audio('http://soundbible.com/grab.php?id=2044&type=mp3')
function updateClock() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
if (hour < 10) {
hourDigit.innerHTML = "0" + hour;
} else {
hourDigit.innerHTML = hour;
}
if (min < 10) {
minDigit.innerHTML = "0" + min;
} else {
minDigit.innerHTML = min;
}
if (sec < 10) {
secDigit.innerHTML = "0" + sec;
} else {
secDigit.innerHTML = sec;
}
tickPlay ? tickSound.play() : tickSound.pause();
}
document.querySelector("#sound-on").addEventListener("click", function() {
this.classList.toggle('active');
tickPlay = tickPlay ? false : true;
})
setInterval(updateClock, 1000);
</script>
</body>
</html>
See the Pen Untitled by Muhammad Habib (@mhabib555) on CodePen.
Comments
Post a Comment