initial commit

Js/dur.js

@@ -0,0 +1,105 @@
+// Element du DOM
+
+const divVies = document.querySelector('.vies');
+const message = document.getElementById("message");
+const formulaire = document.getElementById('inputBox');
+const input = document.getElementById('number');
+const essayerbtn = document.getElementById('essayerBtn');
+const rejouebtn = document.getElementById('rejouer');
+const body = document.getElementsByTagName('body')[0];
+
+// Modèle des coeurs
+
+const coeurvide = '<ion-icon name="heart-outline"></ion-icon>';
+const coeurplein = '<ion-icon name="heart"></ion-icon>';
+
+// Fond
+
+const froid = 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)';
+const tiede = 'linear-gradient(to top, #fddb92 0%, #d1fdff 100%)';
+const chaud = 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)';
+const treschaud = 'linear-gradient(to top, #ff0844 0%, #ffb199 100%)';
+
+const win = ' linear-gradient(to right, #f83600 0%, #f9d423 100%)';
+const loose = ' linear-gradient(to top, #e6b980 0%, #eacda3 100%)';
+
+// Play
+
+const play = () => {
+    const randomNumber = Math.floor(Math.random() * 501);
+    const totalVies = 11;
+    let vies = totalVies;
+
+    // Ajout de l'affichage initial des essais restants
+    const essaisRestantsSpan = document.getElementById("essaisRestants");
+    essaisRestantsSpan.textContent = vies;
+
+    console.log(randomNumber);
+
+    // Actualisation à chaque essaie
+    formulaire.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const valeurInput = parseInt(input.value);
+
+        if (valeurInput < 0 || valeurInput > 501) return;
+
+        if (valeurInput === randomNumber) {
+            body.style.backgroundImage = win;
+            message.textContent = `Bravo! Le nombre était bien ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+            essayerbtn.setAttribute("disabled", "");
+        } else {
+            if (randomNumber < valeurInput + 3 && randomNumber > valeurInput - 3) {
+                body.style.backgroundImage = treschaud;
+                message.textContent = "C'est brulant!!!🔥🔥🔥";
+            } else if (randomNumber < valeurInput + 6 && randomNumber > valeurInput - 6) {
+                body.style.backgroundImage = chaud;
+                message.textContent = "C'est Chaud!🔥";
+            } else if (randomNumber < valeurInput + 11 && randomNumber > valeurInput - 11) {
+                body.style.backgroundImage = tiede;
+                message.textContent = "C'est tiède😑";
+            } else {
+                body.style.backgroundImage = froid;
+                message.textContent = "C'est froid🥶";
+            }
+            vies--;
+            verifyLoose();
+        }
+
+        actualiseCoeurs(vies);
+    });
+
+    const verifyLoose = () => {
+        essaisRestantsSpan.textContent = vies;
+
+        if (vies === 0) {
+            body.style.backgroundImage = loose;
+            body.style.color = '#990000';
+            essayerbtn.setAttribute("disabled", "");
+            message.textContent = `Vous avez perdu, le nombre était ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+        }
+    };
+
+    const actualiseCoeurs = (vies) => {
+        divVies.innerHTML = "";
+        let tableauVies = [];
+        for (let i = 0; i < vies; i++) {
+            tableauVies.push(coeurplein);
+        }
+        for (let i = 0; i < totalVies - vies; i++) {
+            tableauVies.push(coeurvide);
+        }
+        tableauVies.forEach(coeur => {
+            divVies.innerHTML += coeur;
+        });
+    };
+    actualiseCoeurs(vies);
+
+    rejouebtn.addEventListener('click', () => {
+        message.style.display = "block";
+        document.location.reload(true);
+    });
+};
+
+play();