Here is a coding project I wanted to do for fun, and I am kinda lost on how to make my clock show the right time and mak
Posted: Fri May 20, 2022 1:14 pm
Here is a coding project I wanted to do for fun, and I am kinda
lost on how to make my clock show the right time and make the
minute hands and hour hands move. The clock is a 24-hour clock.
Also, I would like to show a moon phase in the clock.
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>IFT1005 - Horloge SVG
24h</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<main>
<div
class="container">
<div
class="clock-w">
<h1>SVG 24h</h1>
<div class="clock">
<svg class="clockface" id="clock"
version="1.1" viewBox="-150 -150 400 400" width="600" height="600"
>
<circle class="ring--sec"
cx="0" cy="0" r="145" fill="transparent" stroke="#222"
stroke-width="5" pathlenght="60" stroke-dasharray="2 2"
stroke-dashoffset=".05"/>
<circle class="ring--hours"
cx="0" cy="0" r="145" fill="transparent" stroke="red"
stroke-width="10" stroke-dasharray="20 20" />
<line class="min" x1="0"
y1="2" x2="0" y2="-110"/>
<line class="hour" x1="0"
y1="2" x2="0" y2="-60"/>
<line class="sec" x1="0"
y1="2" x2="0" y2="-130"/>
<circle class="ring--center"
cx="0" cy="0" r="4"/>
<text x="50" y="-5"
class="date">4</text>
<text x="50" y="10"
class="am-pm">am</text>
</svg>
</div>
</div>
</div>
</main>
<script
src="app.js"></script>
</body>
</html>
Css:
*, *::after, *::before{
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bkg:#232946;
--dark: #121629;
--purple:#b8c1ec;
--pink: #eebbc3;
--white: #fffffe;
}
body {
background-color: var(--bkg);
display: grid;
place-items: center;
min-height: 100vh;
font-family: Ubuntu;
font-size: 2rem;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4rem;
margin: 1rem;
}
.clock-w {
font-size: 3rem;
display: grid;
place-items: center;
gap: 3rem;
color: var(--white);
}
h1 {
font-size: 3rem;
}
.clock {
filter: drop-shadow(2px 10px 10px var(--bkg));
}
.ring--sec {
fill: var(--dark);
stroke: var(--pink);
stroke-width: 5;
stroke-dasharray: 2 2;
stroke-dashoffset: .05;
}
.ring--hours {
fill: var(--dark);
stroke: var(--purple);
stroke-width: 5;
stroke-dasharray: 20 20;
stroke-dashoffset: .05;
}
.ring--center {
fill: var(--pink);
stroke: var(--white);
stroke-width: 2.5;
}
.min {
stroke: var(--white);
stroke-linecap: round;
transform: rotate(90deg);
stroke-width: 3;
}
.hour {
stroke: var(--pink);
stroke-linecap: round;
transform: rotate(45deg);
stroke: var(--purple);
stroke-width: 5;
}
.sec {
stroke: var(--pink);
stroke-linecap: round;
}
.date {
fill: var(--white);
font-size: 1.5rem;
}
.am-pm {
fill: var(--pink);
font-size: small;
text-transform: uppercase;
}
java:
const UI = {
date: document.querySelector('.date'),
am_pm: document.querySelector('.am-pm'),
second: document.querySelector('.sec'),
minute: document.querySelector('.min'),
hour: document.querySelector('.hour'),
}
function updateClock() {
//gettting time
const now = new Date();
const date = now.getDate();
const seconds = (now.getSeconds() +
now.getMilliseconds()/1000) / 60 * 360;
const minutes = (now.getMinutes() +
now.getSeconds()/ 60) / 60 *360;
const hours = (now.getHours() +
now.getMinutes()/60) / 12 * 360;
// UI update
UI.date.textContent = date;
UI.second.style.transform =
`rotate(${seconds}deg)`;
requestAnimationFrame(updateClock)
}
requestAnimationFrame(updateClock)
function txt(texte,rot) {
var e =
document.createElementNS("http://www.w3.org/2000/svg", 'text');
e.setAttribute("x",360);
e.setAttribute("y",200);
e.setAttribute("fill","red");
e.setAttribute("style",
"text-anchor:middle; font=family:Arial; font-weight: bold;
font-size:10;");
e.setAttribute("transform",
"rotate("+rot+" 200 200)");
var textNode =
document.createTextNode(texte);
e.appendChild(textNode);
svg.appendChild(e);
}
function ajuste() {
ai.setAttribute("transform","rotate("+h+" 200 200)");
h=h+10.0;
}
for(var i=0;i<360;i+=10)
tic(i);
for(var i=0; i<24;i++)
txt(""+i,i*360/24);
setInterval(ajuste, 1000);
lost on how to make my clock show the right time and make the
minute hands and hour hands move. The clock is a 24-hour clock.
Also, I would like to show a moon phase in the clock.
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>IFT1005 - Horloge SVG
24h</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<main>
<div
class="container">
<div
class="clock-w">
<h1>SVG 24h</h1>
<div class="clock">
<svg class="clockface" id="clock"
version="1.1" viewBox="-150 -150 400 400" width="600" height="600"
>
<circle class="ring--sec"
cx="0" cy="0" r="145" fill="transparent" stroke="#222"
stroke-width="5" pathlenght="60" stroke-dasharray="2 2"
stroke-dashoffset=".05"/>
<circle class="ring--hours"
cx="0" cy="0" r="145" fill="transparent" stroke="red"
stroke-width="10" stroke-dasharray="20 20" />
<line class="min" x1="0"
y1="2" x2="0" y2="-110"/>
<line class="hour" x1="0"
y1="2" x2="0" y2="-60"/>
<line class="sec" x1="0"
y1="2" x2="0" y2="-130"/>
<circle class="ring--center"
cx="0" cy="0" r="4"/>
<text x="50" y="-5"
class="date">4</text>
<text x="50" y="10"
class="am-pm">am</text>
</svg>
</div>
</div>
</div>
</main>
<script
src="app.js"></script>
</body>
</html>
Css:
*, *::after, *::before{
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bkg:#232946;
--dark: #121629;
--purple:#b8c1ec;
--pink: #eebbc3;
--white: #fffffe;
}
body {
background-color: var(--bkg);
display: grid;
place-items: center;
min-height: 100vh;
font-family: Ubuntu;
font-size: 2rem;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4rem;
margin: 1rem;
}
.clock-w {
font-size: 3rem;
display: grid;
place-items: center;
gap: 3rem;
color: var(--white);
}
h1 {
font-size: 3rem;
}
.clock {
filter: drop-shadow(2px 10px 10px var(--bkg));
}
.ring--sec {
fill: var(--dark);
stroke: var(--pink);
stroke-width: 5;
stroke-dasharray: 2 2;
stroke-dashoffset: .05;
}
.ring--hours {
fill: var(--dark);
stroke: var(--purple);
stroke-width: 5;
stroke-dasharray: 20 20;
stroke-dashoffset: .05;
}
.ring--center {
fill: var(--pink);
stroke: var(--white);
stroke-width: 2.5;
}
.min {
stroke: var(--white);
stroke-linecap: round;
transform: rotate(90deg);
stroke-width: 3;
}
.hour {
stroke: var(--pink);
stroke-linecap: round;
transform: rotate(45deg);
stroke: var(--purple);
stroke-width: 5;
}
.sec {
stroke: var(--pink);
stroke-linecap: round;
}
.date {
fill: var(--white);
font-size: 1.5rem;
}
.am-pm {
fill: var(--pink);
font-size: small;
text-transform: uppercase;
}
java:
const UI = {
date: document.querySelector('.date'),
am_pm: document.querySelector('.am-pm'),
second: document.querySelector('.sec'),
minute: document.querySelector('.min'),
hour: document.querySelector('.hour'),
}
function updateClock() {
//gettting time
const now = new Date();
const date = now.getDate();
const seconds = (now.getSeconds() +
now.getMilliseconds()/1000) / 60 * 360;
const minutes = (now.getMinutes() +
now.getSeconds()/ 60) / 60 *360;
const hours = (now.getHours() +
now.getMinutes()/60) / 12 * 360;
// UI update
UI.date.textContent = date;
UI.second.style.transform =
`rotate(${seconds}deg)`;
requestAnimationFrame(updateClock)
}
requestAnimationFrame(updateClock)
function txt(texte,rot) {
var e =
document.createElementNS("http://www.w3.org/2000/svg", 'text');
e.setAttribute("x",360);
e.setAttribute("y",200);
e.setAttribute("fill","red");
e.setAttribute("style",
"text-anchor:middle; font=family:Arial; font-weight: bold;
font-size:10;");
e.setAttribute("transform",
"rotate("+rot+" 200 200)");
var textNode =
document.createTextNode(texte);
e.appendChild(textNode);
svg.appendChild(e);
}
function ajuste() {
ai.setAttribute("transform","rotate("+h+" 200 200)");
h=h+10.0;
}
for(var i=0;i<360;i+=10)
tic(i);
for(var i=0; i<24;i++)
txt(""+i,i*360/24);
setInterval(ajuste, 1000);