Bugfix/mathilde by Clouddy23 · Pull Request #24 · filkat34/GroupeG-S3-L311-2025

Clouddy23 · 2025-10-14T17:45:40Z

Cette pull request propose une correction générale des erreurs HTML, CSS et JS du Timer. Les corrections et les améliorations du code rendent le code fonctionnel et plus lisible.

index.html :

Indentation du code
Correction de l'extension du fichier index.php -> index.html
Correction de la balise <title> -> </title>
Correction du lien Google Fonts .comm -> .com
Correction de la balise <body>-> </body>
Suppression du doublon id="wrapper"
Déclaration de la langue -> Ajout de lang="fr"
Ajout de l'attribut defer pour chargement du JS après le HTML
Correction du chemin vers Google Fonts asset -> assets

style.css :

Correction fonctionnelle de la classe .inside
Correction de l'ID #wrappr -> #wrapper
Correction du background-color transpent -> transparent

script.js :

Correction de la valeur de let is_run = true en boléen
Correction des fautes de frappe dcument -> document et clic -> click
Remplacement de setTimeInterval par setInterval et fermeture de la fonction
Ajout de return dans la fonction adjustTimer
Ajout du paramètre secondes (z) dans la fonction randomHexColor
Ajout de points-virgule manquants

Commentaires :

Ajout d'un commentaire relatif au stockage du bouton dans une variable
Ajout d'un commentaire relatif au remplacement de innerHTML par textContent
Ajout d'un commentaire relatif à la conversion des chaînes de caractères
Ajout d'un commentaire relatif à l'arrêt de la fonction setInterval quand le Timer est sur pause
Ajout d'un commentaire relatif à l'évènement event

Tests réalisés :

Vérification de l’affichage de l’heure correcte
Pause et reprise du Timer fonctionnelles
Changement dynamique de couleur de fond
Vérification du rendu visuel correspondant au screenshot fourni

Objectifs réalisés :

Rendre le code fonctionnel
Améliorer la lisibilité et la structure du code
Assurer la cohérence visuelle et fonctionnelle
Émettre des recommandations d'optimisation du JavaScript

…de ressembler au Timer

…ssets"

…ion en setInterval()

…round-color

…point-virgule et indentation du code

…déjà présents dans le CSS

Copilot

Pull Request Overview

This PR implements comprehensive bug fixes for a Timer application, correcting critical HTML, CSS, and JavaScript errors to make the code functional and improve readability.

Fixed HTML structure and syntax errors including file extension, malformed tags, and duplicate IDs
Corrected CSS selector typos and property values that prevented proper styling
Resolved JavaScript functionality issues including incorrect API usage, missing parameters, and logical errors

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
index.php	Removed original malformed HTML file
index.html	Created properly structured HTML with corrected syntax and file paths
assets/js/script.js	Fixed JavaScript errors including API names, missing parameters, and logical issues
assets/css/style.css	Corrected CSS selectors, property values, and improved code formatting

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-15T07:01:20Z

@@ -1,32 +1,32 @@
-window.addEventListener("DOMContentLoaded", (event) => {
-    let is_run    = "true";
+window.addEventListener("DOMContentLoaded", (event) => { //event ?


Corrected spelling of 'évènement' to 'événement' in the French comment.

Copilot · 2025-10-15T07:01:21Z

+                document.querySelector('#hours').innerHTML = adjustTimer(oDate.getHours());
+                document.querySelector('#minutes').innerHTML = adjustTimer(oDate.getMinutes());
+                document.querySelector('#seconds').innerHTML = adjustTimer(oDate.getSeconds());


Using innerHTML for plain text content is unnecessary and potentially unsafe. Use textContent instead since no HTML markup is being inserted.

Suggested change

document.querySelector('#hours').innerHTML = adjustTimer(oDate.getHours());

document.querySelector('#minutes').innerHTML = adjustTimer(oDate.getMinutes());

document.querySelector('#seconds').innerHTML = adjustTimer(oDate.getSeconds());

document.querySelector('#hours').textContent = adjustTimer(oDate.getHours());

document.querySelector('#minutes').textContent = adjustTimer(oDate.getMinutes());

document.querySelector('#seconds').textContent = adjustTimer(oDate.getSeconds());

C'est juste. Cela permet les injections de code.

Copilot · 2025-10-15T07:01:21Z

-    function randomHexColor(x, y){
-        return "rgb(" + Math.floor(x/100 * 256) + "," + Math.floor(y/100 * 256) + "," + Math.floor(z/100 * 256) + ")";
+    function randomHexColor(x, y, z) {
+        return "rgb(" + Math.floor(x / 100 * 256) + "," + Math.floor(y / 100 * 256) + "," + Math.floor(z / 100 * 256) + ")"; // pourquoi ne pas convertir en nombre les chaines de caractères x, y et z ?


The parameters x, y, z are strings from innerHTML but are used in mathematical operations without conversion. Use parseInt() or Number() to convert them to numbers first.

Suggested change

return "rgb(" + Math.floor(x / 100 * 256) + "," + Math.floor(y / 100 * 256) + "," + Math.floor(z / 100 * 256) + ")"; // pourquoi ne pas convertir en nombre les chaines de caractères x, y et z ?

x = Number(x);

y = Number(y);

z = Number(z);

return "rgb(" + Math.floor(x / 100 * 256) + "," + Math.floor(y / 100 * 256) + "," + Math.floor(z / 100 * 256) + ")";

Il a raison aussi. Javascript type dynamiquement les variables mais on sait jamais... Il vaut mieux être certain de ce qu'on lui donne en paramètre

Copilot · 2025-10-15T07:01:21Z


    init();

-    function init(){
-       document.querySelector('.button').addEventListener('clic', (event) => 
-            is_run = !is_run
-            ((' ' + document.querySelector('.button').className + ' ').indexOf('pause') > -1) ? dcument.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class').replace(' pause', '')) : document.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class')+' pause');
-        })
+    function init() {
+        document.querySelector('.button').addEventListener('click', (event) => {
+            is_run = !is_run;
+            ((' ' + document.querySelector('.button').className + ' ').indexOf('pause') > -1) ? document.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class').replace(' pause', '')) : document.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class') + ' pause'); // pas mieux de stocker bouton dans une variable ?
+        });

-        setTimeInterval(function(){
-            if(is_run){
+        setInterval(function () {
+            if (is_run) {
                let oDate = new Date();
-                document.querySelector('#hours').innerHTML   =  adjustTimer(oDate.getHours());
-                document.querySelector('#minutes').innerHTML =  adjustTimer(oDate.getMinutes());
-                document.querySelector('#seconds').innerHTML =  adjustTimer( oDate.getSeconds());
+                document.querySelector('#hours').innerHTML = adjustTimer(oDate.getHours());
+                document.querySelector('#minutes').innerHTML = adjustTimer(oDate.getMinutes());
+                document.querySelector('#seconds').innerHTML = adjustTimer(oDate.getSeconds());

-                document.querySelector('body').style.background = randomHexColor(document.querySelector('#hours').innerHTML, document.querySelector('#minutes').innerHTML, document.querySelector('#seconds').innerHTML);
-                
-            }
-        }, 1000;
+                document.querySelector('body').style.background = randomHexColor(document.querySelector('#hours').innerHTML, document.querySelector('#minutes').innerHTML, document.querySelector('#seconds').innerHTML); // innerHTML ne devrait pas être remplacé par textContent vu que ce n'est pas du HTML ?
+
+            } // pourquoi ne pas arrêter la fonction setInterval quand sur pause ?


The setInterval continues running even when paused, performing unnecessary DOM queries and date operations. Consider clearing the interval when paused and restarting it when resumed.

Bon ça. Laisse tomber vu la légèreté du code, inutile de faire du zèle dans l'optimisation

Copilot · 2025-10-15T07:01:22Z

+        document.querySelector('.button').addEventListener('click', (event) => {
+            is_run = !is_run;
+            ((' ' + document.querySelector('.button').className + ' ').indexOf('pause') > -1) ? document.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class').replace(' pause', '')) : document.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class') + ' pause'); // pas mieux de stocker bouton dans une variable ?


Multiple calls to document.querySelector('.button') are inefficient. Store the button element in a variable to avoid repeated DOM queries.

Suggested change

document.querySelector('.button').addEventListener('click', (event) => {

is_run = !is_run;

((' ' + document.querySelector('.button').className + ' ').indexOf('pause') > -1) ? document.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class').replace(' pause', '')) : document.querySelector('.button').setAttribute('class', document.querySelector('.button').getAttribute('class') + ' pause'); // pas mieux de stocker bouton dans une variable ?

const button = document.querySelector('.button');

button.addEventListener('click', (event) => {

((' ' + button.className + ' ').indexOf('pause') > -1) ? button.setAttribute('class', button.getAttribute('class').replace(' pause', '')) : button.setAttribute('class', button.getAttribute('class') + ' pause'); // pas mieux de stocker bouton dans une variable ?

is_run = !is_run;

Clouddy23 added 30 commits October 14, 2025 15:05

Réorganiser le code HTML pour améliorer la lisibilité et la structure

e6d2bb9

changement de l'extension du fichier index.php en index.html

de03bba

Fermeture de la balise Title et indication du Title "Timer"

7a0938d

Lien Google Fonts mal écrit, correction du ".comm" en ".com"

9548bb0

Remplacement de la balise finale <body> en balise fermante </body>

7249c48

Supression du doublon id="wrapper"

8fab6df

Ajout de points de séparation entre heures : minutes : secondes afin …

4371a95

…de ressembler au Timer

Ajout du texte "Pause" au bouton

2499bbc

Ajout attribut "defer" pour chargement JS après HTML

b69a8bc

Correction du chemin vers le fichier CSS, correction de "asset" en "a…

f782037

…ssets"

Correction de la valeur true en boléen plutôt qu'en chaîne

bb2f351

Correction de la faute de frappe "dcument" en "document"

6530082

Correction de l'évènement, car en JS il s'écrit "click" et non "clic"

55ba30a

Fonction setTimeInterval() n'existe pas en JS, correction de la fonct…

3ccde4a

…ion en setInterval()

Fermeture de la fonction setInterval ()

57d0b8e

Ajout du point virgule

67485cb

ajout accolade ouverte

18ded9e

Fermeture de l'event listener

a479d22

Ajout return pour la fonction adjustTimer pour afficher les valeurs

fc1d6fd

Ajout du paramètre des secondes dans la fonction randomHexColor

c4c0016

Correction faute de frappe "transpent" en "transparent" pour le backg…

60df659

…round-color

Correction de l'ID #wrappr en #wrapped

7cbf15f

Correction de .inside : Ajout accolade ouvrante, suppression doublon …

0e67e32

…point-virgule et indentation du code

Texte" Pause" du bouton finlement effacé pour ressembler au screenshot

6595934

Suppression des points de séparation heures : minutes : secondes car …

b5d67cb

…déjà présents dans le CSS

Commentaire d'amélioration

33102c5

Commentaire d'amélioration fonction setInterval()

c05564c

Commentaire amélioration calcul de la couleur

5abbd06

Commentaire amélioration innerHTML

dcaedea

Message d'incompréhension : Évènement "event"

d6f0ab0

Ajout de la langue

d9f4e7a

Clouddy23 self-assigned this Oct 14, 2025

Clouddy23 added the bug Something isn't working label Oct 14, 2025

filkat34 requested a review from Copilot October 15, 2025 07:00

Copilot AI reviewed Oct 15, 2025

View reviewed changes

Navigation Menu

Bugfix/mathilde - #24

Bugfix/mathilde#24
Clouddy23 wants to merge 31 commits into
mainfrom
bugfix/mathilde

Clouddy23 commented Oct 14, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 15, 2025

Uh oh!

Copilot AI Oct 15, 2025

Uh oh!

filkat34 Oct 15, 2025

Uh oh!

Copilot AI Oct 15, 2025

Uh oh!

filkat34 Oct 15, 2025

Uh oh!

Copilot AI Oct 15, 2025

Uh oh!

filkat34 Oct 15, 2025

Uh oh!

Copilot AI Oct 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-        return "rgb(" + Math.floor(x / 100 * 256) + "," + Math.floor(y / 100 * 256) + "," + Math.floor(z / 100 * 256) + ")"; // pourquoi ne pas convertir en nombre les chaines de caractères x, y et z ?
+        x = Number(x);
+        y = Number(y);
+        z = Number(z);
+        return "rgb(" + Math.floor(x / 100 * 256) + "," + Math.floor(y / 100 * 256) + "," + Math.floor(z / 100 * 256) + ")";

Conversation

Clouddy23 commented Oct 14, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

filkat34 Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

filkat34 Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

filkat34 Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants