Looking to create a local time clock using HTML, here is the code:
<body>
<div class="container text-center">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div id="seattle" class="clock rounded-circle">
<div class="hand second"></div>
<div class="hand hour"></div>
<div class="hand minute"></div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Javascript used:
var second = document.getElementsByClassName("second");
var minute = document.getElementsByClassName("minute");
var hour = document.getElementsByClassName("hour");
var curDate = new Date();
function updateDate() {
s = curDate.getSeconds();
m = curDate.getMinutes();
h = curDate.getHours();
var hourDeg = (h / 12) * 360 + ((m / 60) / 12) * 360 + (((s / 60) / 60) / 12) * 360;
var minuteDeg = (m / 60) * 360 + ((s / 60) / 60) * 360;
var secondDeg = (s / 60) * 360;
second.style.transform = `rotate(${ secondDeg }deg)`;
minute.style.transform = `rotate(${ minuteDeg }deg)`;
hour.style.transform = `rotate(${ hourDeg }deg)`;
}
//setInterval(updateDate, 1000);
updateDate();
Designed with CSS:
.minute {
width: 3px;
background-color: #333;
height: 90px;
transform: translateX(100px);
}
.hour {
width: 5px;
background-color: rgb(44, 11, 235);
height: 60px;
transform: translateX(100px);
}
.second {
width: 1px;
background-color: rgb(191, 22, 22);
height: 90px;
transform: translateX(100px);
}
Question arises - Why does it show "Uncaught TypeError: second.style is undefined"? The "second" element has been declared in the html and its style defined in the css. Any help would be appreciated.