Notes

• Utilisez un seul ensemble de fichiers HTML, CSS et JavaScript qui isole chaque exercice dans un div.
  • Mettez en place la structure en HTML et manipulez les éléments dynamiques avec JavaScript
• Créez tous les événements DOM de la page en utilisant les propriétés JavaScript
• Exploitez les mécanismes pour être informé lorsque la page est prête et que le DOM peut être manipulé
  • DOMContentLoaded
  • onload
  • defer

Pair/impair

• Indiquer le nom de l'exercice dans un titre
• Utiliser un input de type texte pour saisir une valeur
• Pour chaque saisie, un paragraphe est mis à jour:
  • Avec une instruction si la saisie est vide
  • Avec une erreur si la saisie n'est pas un entier
  • Que ce passe-t-il avec les trèèèès gros nombre?
  • Avec une indication en bleu si le nombre est impair
  • Avec une indication en vert si le nombre est pair

Exemple:

Quel état?

• Indiquer le nom de l'exercice dans un titre
• Utiliser une combinaison de plusieurs input(number, range, select) pour saisir une valeur entre -50 et 150
  • La valeur saisie doit être synchronisée en temps réel avec les autres inputs
• La valeur correspond à la température et est ensuite utilisée pour afficher dans un paragraphe l'état(solide, liquide, gazeux) accompagné d'une image
  • solide
  • liquide
  • gazeux
• L'état est obtenu selon les conditions suivantes
  • Solide < 0
  • Liquide >= 0 ET < 100
  • Gazeux >= 100
• Le input number permet une plus grande liberté de saisie par l'utilisateur, il faut donc encadrer les valeurs possibles
  • Si l'utilisateur vide le champs, il est réinitialisé à 0
  • Si la saisie dépasse les valeurs limites(-50, 150), le champs est réinitialisé à la limite correspondante
• Une case à cocher permet d'alterner l'affichage de l'image accompagnant le paragraphe

🎥 Réalisation

Exemple:

Un petit plus

• Indiquer le nom de l'exercice dans un titre
• Récupérer la valeur saisie dans un input et la stocker dans un tableau
  • Confirmer la saisie sur le clic du bouton + et l'appui de la touche enter
• Lorsqu'une valeur est ajoutée au tableau, si ce n'est pas un nombre le texte doit être barré
  • Chaque cellule ajoutée au tableau contient également un bouton pour la retirer du tableau
• Lorsque le tableau est modifié(ajout, suppression), un paragraphe affichant la somme des nombres est mise à jour
  • Si aucun nombre n'est contenu dans le tableau, un message d'erreur est affiché en rouge
  • Si le tableau est vide, une instruction est affichée
• 🎥 Réalisation

Exemple:

Extras 🚀

https://www.jisan.io/dom-projects/