|
|
@@ -7,14 +7,82 @@
|
|
|
<meta name="description" content="">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<link rel="stylesheet" href="css/empty.css">
|
|
|
+ <style>
|
|
|
+ .ok-vegane { color: green; }
|
|
|
+ .pas-vegane { color: red; font-weight: bold; }
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ .btn { padding: 10px; border-radius: 3px; }
|
|
|
+ .btn-primary { background: #aaf; border: 1px solid #aaf; }
|
|
|
+ .btn-secondary { background: #aff; border: 1px solid #aff; }
|
|
|
+ .active { font-weight: bold; }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
- <!-- CONTENU -->
|
|
|
|
|
|
+ <h4>Inscrire une personne</h4>
|
|
|
+ <div id="message-erreur"></div>
|
|
|
+ <form id="nouvel-abonne">
|
|
|
+ <input type="text" name="nom" placeholder="Nom" /><br>
|
|
|
+ <input id="annee" type="text" name="annee" placeholder="Année de naissance" /><br>
|
|
|
+ <button id="bouton-submit" type="submit">Soumettre</button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <ol id="liste-abonnes"></ol>
|
|
|
+ <script>
|
|
|
+ // Variables
|
|
|
+ var formulaire = document.getElementById('nouvel-abonne');
|
|
|
+ var inputAnnee = document.getElementById('annee');
|
|
|
+ var messageErreur = document.getElementById('message-erreur');
|
|
|
+ var boutonSubmit = document.getElementById('bouton-submit');
|
|
|
+ var listeAbonnes = document.getElementById('liste-abonnes');
|
|
|
+
|
|
|
+ // Handlers
|
|
|
+ function inscritAbonne(evt) {
|
|
|
+ // TRES important : empêche l'évènement de se poursuivre
|
|
|
+ evt.preventDefault();
|
|
|
+ // Récupère le formulaire (on aurait pu utiliser formulaire)
|
|
|
+ var form = evt.target;
|
|
|
+ // Récupère les champs de saisie de CE formulaire
|
|
|
+ var inputs = form.getElementsByTagName('input');
|
|
|
+ // Crée un objet vide pour stocker les valeurs saisies
|
|
|
+ var valeurs = {};
|
|
|
+ for(var i = 0 ; i < inputs.length ; i++) {
|
|
|
+ var input = inputs[i];
|
|
|
+ // Associe la valeur saisie à la clé (nom du champ)
|
|
|
+ valeurs[input.name] = input.value;
|
|
|
+ // Efface la valeur du champ !
|
|
|
+ input.value = '';
|
|
|
+ }
|
|
|
+ console.log(valeurs);
|
|
|
+ // Crée un nouvel item à insérer dans la liste
|
|
|
+ var item = document.createElement('li');
|
|
|
+ item.innerHTML = valeurs.nom + ", né en " + valeurs.annee;
|
|
|
+
|
|
|
+ // Insère l'item
|
|
|
+ listeAbonnes.appendChild(item);
|
|
|
+ }
|
|
|
|
|
|
- <!-- SCRIPTS -->
|
|
|
+ function verifieAnnee(evt) {
|
|
|
+ var input = evt.target;
|
|
|
+ var valeurTexte = input.value;
|
|
|
+ // Convertit une chaîne en entier... si possible !
|
|
|
+ var valeurEntiere = parseInt(valeurTexte);
|
|
|
+ if(valeurTexte.length > 0 && Number.isNaN(valeurEntiere)) {
|
|
|
+ messageErreur.innerHTML = "La valeur '" + valeurTexte + "' n'est pas valide !";
|
|
|
+ boutonSubmit.disabled = true;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ messageErreur.innerHTML = '';
|
|
|
+ boutonSubmit.disabled = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ formulaire.addEventListener('submit', inscritAbonne);
|
|
|
+ inputAnnee.addEventListener('keyup', verifieAnnee);
|
|
|
+ </script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
