// Elements 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 rejouerBtn = document.getElementById("rejouer");
const body = document.getElementsByTagName("body")[0];
// Modèle de coeurs
const coeurVide = '<ion-icon name="heart-outline"></ion-icon>';
const coeurPlein = '<ion-icon name="heart"></ion-icon>';
// Fond
const bgFroid = "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)";
const bgTiede = "linear-gradient(120deg, #f6d365 0%, #fda085 100%)";
const bgChaud = "linear-gradient(-60deg, #ff5858 0%, #f09819 100%)";
const bgBrulant = "linear-gradient(to top, #ff0844 0%, #ffb199 100%)";
const bgWin =
"linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%)";
const bgLoose = "linear-gradient(60deg, #29323c 0%, #485563 100%)";
// PLAY :
const play = () => {
// nombre aléatoire
const randomNumber = Math.floor(Math.random() * 101); // 3
const totalVies = 6;
let vies = totalVies;
console.log(randomNumber);
// Actualisation à chaque essai - TOUTE LA LOGIQUE
formulaire.addEventListener("submit", (e) => {
e.preventDefault();
const valeurInput = parseInt(input.value);
if (valeurInput < 0 || valeurInput > 100) return;
if (valeurInput === randomNumber) {
body.style.backgroundImage = bgWin;
message.textContent = `BRAVO !!! Le nombre était bien ${randomNumber}`;
rejouerBtn.style.display = "block";
essayerBtn.setAttribute("disabled", "");
}
if (valeurInput !== randomNumber) {
if (randomNumber < valeurInput + 3 && randomNumber > valeurInput - 3) {
body.style.backgroundImage = bgBrulant;
message.textContent = "C'est Brûlant !!!
";
} else if (
randomNumber < valeurInput + 6 &&
randomNumber > valeurInput - 6
) {
body.style.backgroundImage = bgChaud;
message.textContent = "C'est Chaud !
";
} else if (
randomNumber < valeurInput + 11 &&
randomNumber > valeurInput - 11
) {
body.style.backgroundImage = bgTiede;
message.textContent = "C'est Tiède
";
} else {
body.style.backgroundImage = bgFroid;
message.textContent = "C'est Froid
";
}
vies--;
verifyLoose();
}
actualiseCoeurs(vies);
});
const verifyLoose = () => {
if (vies === 0) {
body.style.backgroundImage = bgLoose;
body.style.color = "#990000";
essayerBtn.setAttribute("disabled", "");
message.textContent = `Vous avez perdu. La réponse était ${randomNumber}`;
rejouerBtn.style.display = "block";
}
};
const actualiseCoeurs = (vies) => {
// total : 6; vies : 4
divVies.innerHTML = "";
let tableauDeVies = [];
for (let i = 0; i < vies; i++) {
tableauDeVies.push(coeurPlein);
}
for (let i = 0; i < totalVies - vies; i++) {
tableauDeVies.push(coeurVide);
}
tableauDeVies.forEach((coeur) => {
divVies.innerHTML += coeur;
});
};
actualiseCoeurs(vies);
rejouerBtn.addEventListener("click", () => {
message.style.display = "none";
document.location.reload(true);
});
};
-------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
</style>
<title>Trouve le bon </title>
</head>
<body>
<div class="container">
<h1>Trouve le bon nombre !</h1>
<p>Trouve le bon nombre entre 0 et 100 ! Tu as 5 essais ! </p>
<div class="vie">
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart"></ion-icon>
</div>
<form id="inputBox">
<label for="number">Entrez un nombre :</label>
<input type="number" id="number" min="0" max="100" required>
<button type="submit" id="essayerBtn">Essayer</button>
<p id="message">Lorem ipsum dolor sit amet.
</p>
<button id="rejouer">Rejouer</button>
<p id="details">* Brulant = ± 2; Chaud = ± 5 ; Tiède = ± 10 ; Brulant = ± + de 10 ;</p>
</form>
</div>
<script src="./app.js"></script>
<script type="module" src="
https://unpkg.com/ionicons@5.5.2/dist/i ... "></script>
<script nomodule src="
https://unpkg.com/ionicons@5.5.2/dist/i ... "></script>
</body>
</html>
------------------------------------------------------------------------------------------
@import url('
https://fonts.googleapis.com/css2?famil ... splay=swap');
:root{
--title: #f8c27a;
--textShadow: 0 2px 2px rgba(0,0,0,.7);
--boxShadow: 0 0px 10px rgba(0,0,0,.2);
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-size: 14px;
width: 100vw;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.container{
background-color: rgba(255,255,255,.2);
padding: 20px;
border-radius: 5px;
text-align: center;
box-shadow: var(--boxShadow);
}
h1{
font-family: 'Luckiest Guy', cursive;
margin-bottom: 15px;
color: #ffc31d;
text-shadow: var(--textShadow);
display: inline-block ;
}
-vies{
margin: 10px;
}
ion-icon{
font-size: 50px;
fill: rgb(255, 0, 0);
}
#inputBox{
background-color: green;
padding: 15px;
border-radius: 5px;
}
#inputBox > label{
display: block;
margin-bottom: 8px;
}
input,
button{
outline: none;
border: none;
padding: 3px 20px;
border-radius: 5px;
}
button{
background-color: teal;
color: #ffffff;
cursor: pointer;
transition: all 0.2s;
}
button:hover{
transform: translate(-2px);
background-color: rgb(0, 184,184);
}
p#message{
margin: 20px auto 0 auto;
}
#rejouer{
display: none;
margin: 5px auto 0 auto;
}
#details{
font-weight: bold;
font-size: 6px;
margin-top: 5px;
}
";
";