Day 6: CSS & JS Clock

April 23-24, 2018

This was my final challenge, but it is only day 2 for the original plan. Then why did it take me two days to do it, you might be asking. At the end of the video he signs off with a bonus challenge to use an if statement to disable the transition of the clock, and I actually had a pretty hard time with this. I didn’t know how to disable a single class attribute, so I did a little bit of research for this.

Also in this video, he specifically told us to pause and try to do it ourselves from the get-go. This proved to be a little too advanced for me, and the fact that this is the second planned video, shows how ill-prepared I was for JavaScript30. But I got pretty close: Here was my original:

Clock JavaScript bad code

This is just the seconds part of the clock function, and it looks pretty good for a beginner like me. But you have to keep in mind that I didn’t start my own original code until the final line, and it was pretty basic math and I had forgotten to counter the 90 degree starting point.

After I looked at Wes’ code for the seconds, I was able to do the minute and hour hand very quickly. I would have never thought to do the debouncing at the end. Here’s the final code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JS + CSS Clock</title>
</head>
<body>

<div class=”clock”>
<div class=”clock-face”>
<div class=”hand hour-hand”></div>
<div class=”hand min-hand”></div>
<div class=”hand second-hand”></div>
</div>
</div>

<style>
html {
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
background-size:cover;
font-family:’helvetica neue’;
text-align: center;
font-size: 10px;
}

body {
margin: 0;
font-size: 2rem;
display:flex;
flex:1;
min-height: 100vh;
align-items: center;
}

.clock {
width: 30rem;
height: 30rem;
border:20px solid white;
border-radius:50%;
margin:50px auto;
position: relative;
padding:2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}

.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}

.hand {
width:50%;
height:6px;
background:black;
position: absolute;
top:50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
</style>

<script>
const secondHand = document.querySelector(‘.second-hand’);
const minsHand = document.querySelector(‘.min-hand’);
const hourHand = document.querySelector(‘.hour-hand’);

function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = (seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;

const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;

if(secondsDegrees === 90) {
secondHand.style.transition = ‘none’
} else {
secondHand.style.transition = ”
};
};

setInterval(setDate, 1000);

setDate();

</script>
</body>
</html>

Check this one out! I’m the most proud of this one