Web Development

Question

Javascript, css, html all in one file in notepad, javascript not working

By spencer1621515293 ·
Hi, I have put javascript, html and css all on one page in notepad++. But the picture, which is a clock will display, but will not do anything, so I think the javascript is not working. Can anyone tell me where I have gone wrong here please and if all the code on one file is allowed. here is the full page code:

<!DOCTYPE html>
<html>
<head>
<meta charset="uif-8">
<title>clock!</title>
<style type="text/css">
html {
background: linear-gradient(to right, rgba(90, 93, 145, 1) 0%, rgba(173, 255, 99, 1) 100%);
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;
margin: 50px auto;
border-radius: 100%;
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);
}

.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: 0.3s all;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
</style>
}
<script type="text/javascript">
const hourHand = document.querySelector('.hand-hour');
const minuteHand = document.querySelector('.hand-minute');
const secondHand = document.querySelector('.hand-seconds');


function getTime() {
const now = new Date();

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


const minutes = now.getMinutes();
const minutesDegree = (((minutes / 60) * 360) + 90);
minuteHand.style.transform = `rotate(${minutesDegree}deg)`


const hours = now.getHours();
const hoursDegree = (((hours / 60) * 360) + 90);
hourHand.style.transform = `rotate(${hoursDegree}deg)`


}

setInterval(getTime, 1000);
</script>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hand-hou
Thread display: Collapse - | Expand +

All Answers

Collapse -

Does your code pass the usual tests?

by rproffitt Moderator In reply to Javascript, css, html all ...
Collapse -

Thanks, but, how do I pass the usual tests

by spencer1621515293 In reply to Does your code pass the u ...

Thanks, how do I do that. to pass the usual tests

Collapse -

Re: clock

by Kees_B Moderator In reply to Javascript, css, html all ...

Clearly, the code is cut off, maybe due to being larger than some maximum for this forum. Just have a look at the end of your post and see yourself.

In principle, when complete, it should work with everything in one source file. My advice:
First build an digital clock. Surely you'll be able to find working examples in Javascript. Don't mind about the looks until it functions correctly (showing each second). It's just your second prototype (the above is the first).
Then replace the digital part by the analog part above (clock, face and three hands).

Related Discussions

Related Forums