Add files via upload
This commit is contained in:
HarmandI
GitHub
commit
49f3bf0b8b
|
|
@ -0,0 +1,19 @@
|
|||
# C3_TRAINING_DOM
|
||||
## Contexte
|
||||
Dans ce projet, vous allez utiliser ce que vous avez appris et le mettre en pratique dans une démo, en utilisant JavaScript et CSS pour créer une `horloge analogique` fonctionnelle.
|
||||
|
||||
## Déroulement
|
||||
Pour commencer, vous avez un document HTML contenant une image SVG d'une horloge avec les aiguilles des heures, des minutes et des secondes. Par la suite, vous allez utiliser :
|
||||
|
||||
- Des `objets` et des méthodes pour obtenir l'heure actuelle
|
||||
|
||||
- Des `variables` pour stocker l'information
|
||||
|
||||
- Des `méthodes` pour décomposer cette heure en heures, minutes et secondes
|
||||
|
||||
- Des `opérateurs` pour traduire cette information en degrés sur un cercle
|
||||
|
||||
- Les `propriétés des éléments DOM` pour positionner correctement les aiguilles
|
||||
|
||||
Le résultat final sera une horloge analogique simple, mais précise, que vous pourrez placer sur n'importe quelle page web à l'avenir.
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/* Layout */
|
||||
.main {
|
||||
display: flex;
|
||||
padding: 2em;
|
||||
height: 90vh;
|
||||
justify-content: center;
|
||||
align-items: middle;
|
||||
}
|
||||
|
||||
.clockbox,
|
||||
#clock {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Clock styles */
|
||||
.circle {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 9;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.mid-circle {
|
||||
fill: #000;
|
||||
}
|
||||
.hour-marks {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 9;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.hour-arm {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 17;
|
||||
stroke-miterlimit: 10;
|
||||
|
||||
}
|
||||
|
||||
.minute-arm {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 11;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.second-arm {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 4;
|
||||
stroke-miterlimit: 10;
|
||||
|
||||
}
|
||||
|
||||
/* Transparent box ensuring arms center properly. */
|
||||
.sizing-box {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* Make all arms rotate around the same center point. */
|
||||
#hour,
|
||||
#minute,
|
||||
#second {
|
||||
transform-origin: 300px 300px;
|
||||
transition: transform .5s ease-in-out;
|
||||
animation: infinite linear;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>A Digital Analog Clock</title>
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
|
||||
<script src="js/script.js" defer>
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="main">
|
||||
<div class="clockbox">
|
||||
<svg id="clock" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
|
||||
<g id="face">
|
||||
<circle class="circle" cx="300" cy="300" r="253.9" />
|
||||
<path class="hour-marks"
|
||||
d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6" />
|
||||
<circle class="mid-circle" cx="300" cy="300" r="16.2" />
|
||||
</g>
|
||||
<g id="hour">
|
||||
<path class="hour-arm" d="M300.5 298V142" />
|
||||
<circle class="sizing-box" cx="300" cy="300" r="253.9" />
|
||||
</g>
|
||||
<g id="minute">
|
||||
<path class="minute-arm" d="M300.5 298V67" />
|
||||
<circle class="sizing-box" cx="300" cy="300" r="253.9" />
|
||||
</g>
|
||||
<g id="second">
|
||||
<path class="second-arm" d="M300.5 350V55" />
|
||||
<circle class="sizing-box" cx="300" cy="300" r="253.9" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
function demarrerLaMontre (i){
|
||||
|
||||
// Séléctionner les aiguilles de montre
|
||||
const AIGUILLEHR = document.querySelector("#hour");
|
||||
const AIGUILLEMIN = document.querySelector("#minute");
|
||||
const AIGUILLESEC = document.querySelector("#second");
|
||||
|
||||
//Extraire l'heure actuel à l'aide de l'objet Date()
|
||||
|
||||
let dAujourdhui=new Date();
|
||||
|
||||
//Stocker l'heure , minute , seconde dans des varaiables
|
||||
let heures = dAujourdhui.getHours();
|
||||
let minutes= dAujourdhui.getMinutes();
|
||||
let secondes = dAujourdhui.getSeconds();
|
||||
|
||||
// Calculer de degré de mouvement de l'aiguille heure, de l'aiguille minute, de l'aiguille seconde
|
||||
// Hint : Tous les aiguilles doivent se déplacer chaque second selon un degré
|
||||
let secondeDegre=secondes*360/60;
|
||||
let minuteDegre=minutes*(360/60)+secondeDegre/60;
|
||||
let heureDegre = heures*(360/12)+minuteDegre/60+secondeDegre/3600;
|
||||
|
||||
// Déplacer les aiguilles
|
||||
AIGUILLEHR.style.transform=`rotate(${heureDegre}deg)`;
|
||||
AIGUILLEMIN.style.transform=`rotate(${minuteDegre}deg)`;
|
||||
AIGUILLESEC.style.transform=`rotate(${secondeDegre}deg)`;
|
||||
|
||||
}
|
||||
// Exercuter la fonction chaque second
|
||||
|
||||
var interval = setInterval(demarrerLaMontre, 1000);
|
||||
|
||||
Loading…
Reference in New Issue