bh
/
react-web-tutorial


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!doctype html>
<html lang="">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <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>


		<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);
		}

		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>