Color genrator js function & wheel event

TidyCoder — Sat, 29 Jun 2024 18:28:21 +0000

Check out this Pen I made!

Game title in html css only

TidyCoder — Fri, 28 Jun 2024 15:53:32 +0000

Check out this Pen I made!

Faire une horloge digitale en HTML/CSS/JS

TidyCoder — Fri, 28 Jun 2024 15:01:13 +0000

Nous savons que le javascript est un langage riche, qui peut même enregistrer l'heure dans une variable, nous savons aussi que le CSS est un langage riche aussi, pour le style, on peut même faire des nombres sans font en CSS? Le saviez-vous? Alors, dans cette article nous allons faire une horloge en html/css/js sans problème.

Faire le HTML d'une horloge digitale :

Dans cette partie, nous alloons imaginer la structure graphique d'une horloge, imaginez-vous qu'une horloge digital est composé de huit éléments, comme ceci:

Le premier nombre des heures.
Le deuxième nombre des heures.
Les deux petits points qui séparent les heures des minutes.
Le premier nombre des minutes.
Le deuxième nombre des minutes.
Le deux petits points qui séparent les minutes des secondes.
Le premier nombre des secondes.
Et enfin, le deuxième nombre des secondes.

Donc, chaque éléments dans cette liste sont des balises div HTML.

Faire le JS d'un horloge digitale :

En CSS, c'est du gâteau de faire les deux petits points, et aussi de faire les nombres, mais ce n'est pas avec le CSS qu'on va pouvoir faire animer les nombres de l'horloge.

L'idée ici, c'est d'ajouter une class via le JS à chacune des div, correspondant à leurs nombres, Exemple: si le premier nombre des heures est 5, alors une class sera ajouter à la première div des heures dont son nom sera par exemple clockNum5. si c'est 6, la class sera clockNum6, etc... Vous avez compris le principe.

Alors, commençons le difficile dès maintenant, en js, il y a la fonction getHours, getMinutes, et getSeconds, nous allons les utiliser pour avoir l'heure, les minutes, et les secondes. Le seul problème de ces fonctions est qu'il peuvent retourner un nombre à un chiffre et non deux, mais dans notre horloge digitale, 1 heure 5 minutes 3 secondes ne sera pas 1:5:3 mais, s'écrira 01:05:03, c'est pour cela que notre cerveau est là pour inventer un super nouveau algorithme.

Techniquement, notre problème survient lorsque la fonction renvois un nombre à un chiffre, mais qu'on ne veut pas un nombre un chiffre mais plutôt à deux, mais on veut à la fois que le nombre à deux chiffre ne soit pas différent au nombre à un chiffre, alors on va inventer un algorithme qui va vérifier si le nombre contient deux chiffre et si ce n'est pas le cas, il rajoute un zéro derrière celui si pour le transformer en un nombre à deux chiffres et ne pas modifier le résultat voulu.

Maintenant, pour finir le travail il faudrait faire une fonction qui se répète toutes les secondes pour réactualiser notre horloge et la mettre à l'heure.

Dans le code final nous illustrerons tout cela sans aucun problème.

Faire le CSS d'un horloge digitale :

Imaginez que chaque nombre d'une horloge digitale soient deux carrés aligné dont l'un est en haut et l'autre en bas, et que vous mettez des bordures à ces carrés pour fabriquer des nombres, c'est la même chose en HTML CSS! Voici un exemple pour bien comprendre :

Le code complet d'une horloge digitale en html/css/js :

Animated squares composed clock by tidycoder

TidyCoder — Fri, 28 Jun 2024 11:29:27 +0000

Check out this Pen I made!

TidyCoder day night loading only css/HTML, and single div

TidyCoder — Thu, 27 Jun 2024 19:40:30 +0000

Check out this Pen I made!

Tidycoder animation text

TidyCoder — Wed, 26 Jun 2024 15:03:54 +0000

Check out this Pen I made!

Loading animation with a ball

TidyCoder — Wed, 26 Jun 2024 14:35:11 +0000

Check out this Pen I made!

HTML and CSS and JS icons (css pure)

TidyCoder — Sat, 22 Jun 2024 14:08:17 +0000

Check out this Pen I made!

Google Youtube Codepen icons+search inputs (only CSS)

TidyCoder — Thu, 20 Jun 2024 12:31:25 +0000

Check out this Pen I made!

Social media icons

TidyCoder — Wed, 19 Jun 2024 18:50:08 +0000

Check out this Pen I made!

Blogger icon a little modified no svg no img no js CSS+HTML only

TidyCoder — Wed, 19 Jun 2024 12:18:35 +0000

Check out this Pen I made!

Body loader in CSS/HTML only (no js)

TidyCoder — Wed, 19 Jun 2024 11:46:12 +0000

Check out this Pen I made!

Forem: TidyCoder

Color genrator js function & wheel event

Game title in html css only

Faire une horloge digitale en HTML/CSS/JS

Faire le HTML d'une horloge digitale :

Faire le JS d'un horloge digitale :

Faire le CSS d'un horloge digitale :

Le code complet d'une horloge digitale en html/css/js :

Animated squares composed clock by tidycoder

TidyCoder day night loading only css/HTML, and single div

Tidycoder animation text

Loading animation with a ball

HTML and CSS and JS icons (css pure)

Google Youtube Codepen icons+search inputs (only CSS)

Social media icons

Blogger icon a little modified no svg no img no js CSS+HTML only

Body loader in CSS/HTML only (no js)