JavaScript - Manipuler le style et les images (exercices 🦾)

Voici 10 consignes centrées sur la manipulation de style HTML via JS — contexte pro, uniquement document.getElementById, element.style.propriété, conditions if simples, prompt et variables.

Exercice 01 — Le badge de statut Une startup affiche le statut de son serveur. Récupère l'élément #status. Si une variable serveurEnLigne vaut true, mets son fond en vert et son texte en blanc. Sinon, mets le fond en rouge.

Exercice 02 — Le prix en promotion Un e-commerce applique une remise. Récupère #prix. Si une variable enPromo vaut true, affiche le prix en rouge et en gras. Sinon, affiche-le en noir, style normal.

Exercice 03 — Le niveau de stock Un entrepôt affiche la quantité restante d'un produit. Récupère #stock. Si une variable quantite est inférieure à 10, mets le texte en orange. Si elle vaut 0, mets le fond en rouge.

Exercice 04 — La carte de membre Une salle de sport affiche les infos d'un membre. Récupère #carte. Si une variable membreVIP vaut true, applique une bordure dorée (gold) de 3px et une couleur de fond #fff8e1.

Exercice 05 — Le bouton de validation Un formulaire de commande a un bouton #btnValider. Si une variable panierVide vaut true, rends le bouton gris et opaque à 50%. Sinon, mets-le en vert.

Exercice 06 — L'alerte RGPD Un bandeau cookies #bandeau doit s'afficher ou non. Demande à l'utilisateur s'il a déjà accepté les cookies (prompt). Si la réponse est "oui", cache le bandeau (display: none). Sinon, rends-le visible.

Exercice 07 — Le tableau de bord financier Un dashboard affiche un chiffre d'affaires #ca. Demande un montant via prompt. Si le montant est supérieur à 10 000, affiche-le en vert et en grand (font-size: 2em). Sinon, affiche-le en rouge.

Exercice 08 — La date limite Un projet a une deadline. Récupère #deadline. Si une variable joursRestants est inférieure à 3, mets le texte en rouge et en gras. Si elle est inférieure à 7, mets-le en orange. Sinon, laisse-le en noir.

Exercice 09 — Le profil utilisateur Une app RH affiche un profil #profil. Demande le rôle de l'utilisateur via prompt ("admin" ou autre). Si c'est "admin", applique un fond bleu marine et du texte blanc. Sinon, garde un fond gris clair.

Exercice 10 — Le rapport de performance Un outil analytics affiche un KPI #kpi. Récupère via prompt un taux de conversion (nombre entre 0 et 100). Si le taux est supérieur à 80, fond vert. Entre 50 et 80, fond orange. En dessous de 50, fond rouge.