Inputs, valeurs & mini-jeu “devine le nombre”

1. Les champs de formulaire (input)

En HTML, tu peux créer des champs :

• type="text" : texte
• type="number" : nombre
• type="password" : mot de passe

<label for="pseudo">Ton pseudo :</label>
<input id="pseudo" type="text">
<button id="btn-pseudo">Dire bonjour</button>

En JS, on récupère la valeur avec la propriété .value.

const inputPseudo = document.querySelector("#pseudo");
const btnPseudo = document.querySelector("#btn-pseudo");

btnPseudo.addEventListener("click", () => {
  const valeur = inputPseudo.value;
  console.log("Utilisateur :", valeur);
});

2. Attention : value = chaîne (string)

Quand tu récupères input.value, tu obtiens une chaîne de caractères, même si l’utilisateur tape un nombre.

const champ = document.querySelector("#age");
const txt = champ.value;

console.log(typeof txt); // "string"

Pour faire un calcul, convertis en nombre :

const n = Number(txt);      // ou parseInt(txt), parseFloat(txt)

3. Mini calculatrice dans la page

On va faire un petit formulaire qui prend deux nombres et affiche la somme.

<input id="a" type="number" placeholder="Nombre A">
<input id="b" type="number" placeholder="Nombre B">
<button id="btn-calc">Calculer</button>
<p id="resultat">Résultat : ?</p>

const champA = document.querySelector("#a");
const champB = document.querySelector("#b");
const btnCalc = document.querySelector("#btn-calc");
const pRes = document.querySelector("#resultat");

btnCalc.addEventListener("click", () => {
  const a = Number(champA.value);
  const b = Number(champB.value);
  const somme = a + b;
  pRes.innerText = "Résultat : " + somme;
});

4. Mini-jeu : devine le nombre (dans la page)

On va coder une version du jeu que tu as déjà vu en Python, mais cette fois directement dans la page web.

// Idée de JS (tu peux le mettre dans un fichier js-3-game.js si tu veux)
let secret = Math.floor(Math.random() * 20) + 1;
let essais = 0;

function verifierProposition() {
  const val = Number(guessInput.value);
  essais++;

  if (val === secret) {
    // Bravo
  } else if (val < secret) {
    // C'est plus
  } else {
    // C'est moins
  }
}

5. Mini-projet : formulaire simple avec vérification

Crée une page formulaire-js.html + un fichier formulaire-js.js avec :

• un champ pseudo,
• un champ âge (type number),
• un bouton “Valider”.

En JS :

• récupère les valeurs avec .value,
• si l’âge est < 13, affiche un message “Tu es trop jeune pour ce site” en rouge,
• sinon affiche “Bienvenue PSEUDO !” en vert.

// Piste
const inputPseudo = document.querySelector("#pseudo");
const inputAge = document.querySelector("#age");
const btn = document.querySelector("#btn-valider");
const message = document.querySelector("#msg");

btn.addEventListener("click", () => {
  // TODO : convertir l'âge avec Number(...)
  // puis afficher le bon message dans #msg
});