Programmation événementielle: Theme builder

Opened: Monday, 17 August 2020, 12:00 AM

Dans cet exercice, on va mélanger les notions vu sur le chargement du DOM, les notions d'événements sur les formulaires, et la manipulation du DOM.

Pour contextualiser dans un exercice concret, je vous demande de réaliser le code d'une petite interface qui permet de changer le style d'une page web. On parlera alors souvent de "thème" (cqfd : thème graphique).

Téléchargez le fichier en pièce jointe, c'est important. Basez-vous là-dessus pour réaliser votre travail. C'est important car vous n'aurez pas toujours la main sur le code HTML quand vous travaillez en JavaScript, il faut donc savoir s'adapter avec "les moyens du bord".

Important : pour ceux qui ont fini l'exercice, voici quelques idées que vous pouvez rajouter dans le theme builder :

pouvoir changer l'image de fond de la page. Proposer 3 ou 4 images dans le theme builder, quand l'utilisateur cliquera dessus, ça définira l'image comme étant l'image de fond de la page web
pouvoir changer les polices de caractères : télécharger 2/3 polices gratuites sur Internet, et proposez de pouvoir modifier la police par défaut au travers d'un élément de formulaire dans le theme builder

Exemple pour gérer l'image de fond :

Vidéo :

index.html
17 August 2020, 8:16 PM