L'objectif de cette partie est de rendre fonctionnelle la configuration du site.

Le problème présentement est que celle-ci se trouve sur une page séparée: si on clique sur un bouton, même avec du javascript, si on revient sur la page de départ il n'y aura rien d'enregistrer. Pour cela, il y a plusieurs méthodes:

• utiliser des cookies pour sauvegarder un état commun entre les pages d'un même site
• passer par un serveur externe pour sauvegarder les données
• ne faire qu'une seule page, et cacher/montrer la configuration avec du CSS.

C'est cette dernière option que nous allons mettre en place.

1 - Migrer la configuration sur la page principale

• Sur la page principale du site, ajouter une boite dans laquelle vous mettrez le formulaire de configuration. Typiquement, vous pouvez mettre cette boite en dessous de la bannière de début. Mais c'est assez souple.
• Donnez un identifiant à cette boite pour pouvoir y accèder facilement
• dans le CSS, attribuez à cet identifiant un display de none:

• Changer le lien "configuration"
  • supprimez le href pour ne plus changer de page
  • attribuez comme action à l'évenement click de changer le display de l'élément à '' si il est none, et inversement
    • Pour cela, une manière de faire est de récupérer l'élément avec getElementById, et chercher l'attribut .style.display
• En principe, en cliquant sur le lien "configuration", on affiche/cache/affiche/cache/... la boite avec le formulaire.
• Vous pouvez ajuster le CSS de la boite pour que cela soit "joli".

2 - Rendre la configuration effective.

Maintenant, associez à chaque élément du formulaire (bouton radio, etc) une action à l'aide de javascript:

• Cela se fait typiquement en vérifiant l'état de document.getElementById('#identifiantduboutonradio').checked
• Modification de la variable config
• Exécution de la fonction d'affichage
• Note: dans ce modèle il n'y a pas besoin du bouton de soumission du formulaire !

3 - Conclusion

Vous devriez maintenant avoir une petit application météo autonome ! Il s'agit bien sûr de quelque chose de très simple, mais si vous la déposez sur un serveur, elle peut être accessible en ligne