Madlib de Noël

Instructions

Voici ton objectif Madlib de Margo

Crée ta folle histoire

Pour cette étape, utilise une feuille de papier et un crayon !

Le mieux, c'est de créer avec ton partenaire ta propre histoire et ensuite de la "trouer". Le joueur devra remplir les "trous" avec les mots de son choix.

Pour plus de plaisir, faire des "trous" variés avec des:

Voici l'histoire que j'utilise dans mon exemple:

Dans quelques pays (Belgique, Luxembourg, Pays-Bas), le père Noël n'a jamais réussi à détrôner Saint Nicolas. C'est donc le 6 décembre, que les enfants reçoivent la plupart de leurs cadeaux, dans les souliers, disposés près de la cheminée. Les enfants laissent aussi des carottes pour l'âne de Saint Nicolas. Ils reçoivent beaucoup de friandises et de cadeaux. Mais Noël se fête de plus en plus souvent. Les cadeaux sont alors distribués le soir du 24 décembre, au réveillon.

Prépare ton code

Crée un dossier dans lequel tu sauvegardera les fichiers HTML, CSS, etc. Ensuite seulement, ouvre le dossier dans Sublime Text.

Crée ton fichier index.html et ajoute les bâlises habituelles:

À toi de remplacer les "???" de la ligne

Code le formulaire

Lorsque le joueur attérit sur ton site, il doit remplir le formulaire pour compléter les "trous". Pour créer un formulaire en HTML, il faut utiliser la balise <form>. À l'intérier de la balise <form>, les deux pricipales balises sont <input> et <label>. "Input", ça veut dire saisie. "Label", ça veut dire étiquette.

Pour que le joueur saisisse un pays et un personnage célèbre, je peux coder ceci:

Et le résultat aura l'air de ceci:

Note que pour lier l'étiquette (label) à la bonne saisie (input), il faut que l'attribut for de label ait la même valeur que l'attribut id de input. Ici, par exemple, c'est "country":

J'ai choisi "country" mais j'aurais pu choisir n'importe quel autre mot. "Land", par exemple.

Tu noteras que "country" et "land" sont des mots en anglais mais que sur le formulaire que remplit le joueur, l'étiquette est en français ("Pays"). C'est normal! Les développeurs pros essaient toujours de garder le code en anglais et le contenu dans la langue du joueur.

Si tu ne connais pas la traduction d'un mot en anglais, tu peux utiliser Google Translate ou demander à un(e) prof. Au pire, tu utilises un mot en français! Ça fonctionnera quand même

Tu peux bien entendu ajouter autant de saisies (input) que tu veux. Par contre, il ne faut pas que ton formulaire soit trop long, sinon les joueurs vont perdre patience...

Embellis ta page et ton formulaire

Qui dit page stylée, dit CSS! Crée ton fichier style.css et relie le à ton fichier HTML. Indice: ça se passe dans le head de ton code HTML...

Tu peux trouver une belle couleur d'arrière-plan sur le site coolors.co et l'ajouter dans le CSS:

body {
  background-color: #b2b09b;
}

Tu peux importer des polices sympa sur Google Fonts et les rajouter dans le <head> de ton code HTML:

Tu peux ajouter des marges sur les côtés de ta page en créant une balise div dans ton fichier HTML qui contient le titre et le formulaire. Cette div a une classe container. Ça sera utile pour ton fichier CSS!

Dans ton fichier style.css, voici le code qui crée les marges (margin):

.container {
  width: 500px;
  margin: 90px auto;
}

Styliser un formulaire, c'est très dur! Mais en ajoutant une div autour de chaque paire de label + input, tu peux déjà faire respirer un peu ton formulaire.

Et voici le résultat:

Finalement, tu peux utiliser un texte de substitution avec l'attribut placeholder.

Ajoute un gros bouton à ton formulaire

Sans bouton... pas de jeu! C'est en cliquant le bouton que le joueur va déclancher notre code Javascript qui crée la folle histoire. Voici le code qu'il faut ajouter à notre formulaire pour créer un bouton:

Note: il est super important que l'attribut type ait la valeur "button".

Si on ajoute cette ligne à notre formulaire, ça donne ceci:

Rien ne se passe si tu cliques le bouton maintenant. Pour qu'une action se déclenche, il nous faut un peu de code Javascript. Mais avant ça, si tu trouves comme moi que le bouton est plutôt moche, tu peux le styliser. Encore une fois, il faut utiliser du code CSS. J'ai ajouté une classe red-button à mon input, comme ceci:

Et voici ce que j'ai mis dans mon code CSS:

.red-button {
  font-family: 'Poppins', sans-serif;
  color: #b2b09b;
  font-weight: bold;
  font-size: 26px;
  text-decoration: none;
  background-color: #ff3c38;
  padding: 24px;
  margin-top: 20px;
  border: none;
  border-radius: 3px;
}

.red-button:hover {
  background-color: #ff6f59;
}

Sympa, non? En passant, .red-button:hover, c'est pour que le bouton change de couleur quand on passe la souris par dessus le bouton. En langage bien technique, on dit que :hover est un pseudo-élément.

Javascript!

C'est l'heure de la magie ! Enfin, je veux dire que c'est l'heure de coder avec le langage Javascript!

Première étape créer une balise script juste avant ta balise fermante </body>, comme ceci:

C'est à l'intérieur de cette balise qu'on va mettre notre code Javascript.

Écouter le bouton

Eh oui, quand on clique notre bouton, il chante ! Bon, pas réellement... mais l'idée, c'est que quand un joueur clique le bouton, le bouton dit:

"Je viens d'être cliquéééééé"

Notre objectif, c'est d'écouter le bouton et lorsqu'un événement (un clic) se produit, on affiche notre folle histoire! Pour cela, on utilise en Javascript un Event Listener. Littéralement, un "écouteur d'événement".

Ajoute ce code dans la partie script de ton HTML:

Un peu d'explications.

À la ligne 2, on crée une variable qu'on appelle submitButton. Une variable, c'est une case dans la mémoire de l'ordinateur dans laquelle on stocke des informations.

À ton avis, quelle information stocke-t-on dans la variable submitButton?

La fonction getElementById() permet d'aller chercher l'élément HTML avec le bon id. Cet élément, c'est notre bouton!

À la ligne 3, on rajoute le fameux "écouteur d'événement" au bouton qu'on vient de chercher. Encore une fois, c'est une fonction. On spécifie que l'événement qu'on écoute est un click. Plein d'autres événements existent. Si le joueur ne fait que passer sa souris par-dessus notre bouton sans cliquer, c'est un événement! Cet événement s'appelle mouseover. Si on voulait écouter cet événement, notre code Javascript aurait l'air de ceci:

Les trois XXX à la ligne 3. Ce n'est pas du vrai code! Je les ai mis là en attendant de mettre le vrai code, c'est-à-dire le code pour créer notre histoire folle.

Par contre, comme le code de l'animation est assez long, on ne va pas le mettre directement là où se trouvent les trois XXX. On va créer une fonction. Une fonction, c'est plusieurs instructions qu'on veut que l'ordinateur mémorise. Un peu comme une variable. Une variable sert à mémoriser des données, tandis qu'une fonction sert à mémoriser des instructions (et parfois des données aussi!).

Certaines fonctions existent déjà, on n'a pas besoin de les inventer. C'est le cas, par exemple, des fonctions getElementById() et addEventListener()

D'autres fonctions ont besoin d'êtres codées par les développeurs... C'est ce que nous allons faire! On va appeler notre fonction createStory()

Note qu'à la ligne 6, j'ai remplacé les trois XXX par le nom de ma fonction createStory(). Fais gaffe, car à partir de maintenant, il faut être hyper attentif aux détails. S'il te manque un point-virgule ; tout peut casser!

Maintenant, on va remplir la fonction d'instructions. La première instruction qu'on va donner, c'est un console.log(). Cette instruction va nous permettre de vérifier si l'ordinateur écouter vraiment notre bouton.

Sauvegarde bien ton fichier, et si ce n'est pas déjà fait, ouvre ta page dans le navigateur. Ouvre ensuite l'inspecteur. Si tu utilises Chrome, il faut cliquer sur le bouton droit de la souris et sélectioner Inspect. Si tu utilises Firefox, sélectionne Inspect Element.

Chrome Inspect

Chrome

Firefox Inspect

Firefox

L'inspecteur a l'air de ceci:

Chrome Inspect

Chrome

Firefox Inspect

Firefox

Tu peux y voir le code HTML de ta page! Ce qui nous intéresse, cependant, c'est la console. C'est là où notre code Javascript console.log("Salut les amis"); va s'afficher. Pour accéder à la console, clique sur l'onglet... Console!

Chrome Inspect

Chrome

Firefox Inspect

Firefox

Rafraîchis ta page web en appuyant sur les touches Ctrl + Shift + R.

Cliques sur ton bouton et regarde ce qui se passe dans la console. Tu devrais voir le texte "Salut les amis!" s'afficher:

Félicitations, ton bouton est sur écoute!

Code l'histoire folle

On y est presque!

Pour notre fonction createStory(), on a besoin d'une variable contenant le texte de notre histoire.

Fais bien attention. Ici, je n'ai pas utilisé les guillemets "", mais des accents graves ``

J'ai aussi enlevé la ligne avec console.log("Salut les amis!") (ce n'était qu'un test) et remplacé les trous par des XXX, pour l'instant. L'objectif, c'est de remplacer les XXX par les informations entrées par le joueur.

Pour ce faire, il faut sélectioner chaque input grâce à son id.

N'oublie pas de créer une variable pour chaque input! Si tu as un input dont l'id est "color", par exemple, ta variable peut s'appeler "color", comme ceci:

const color = document.getElementById("color");

Maintenant, tu peux remplacer les XXX de ta variable story, par les valeurs de tes input comme ceci:

Ce code bizarre

${character.value}

c'est le code qui permet d'injecter dans notre histoire la valeur des différentes variables que nous avons créées. Il se compose du nom de la variable + un point + "value".

Si une de tes variables s'appelle month, le code que tu vas employer pour remplacer les XXX est le suivant:

${month.value}

Une fois que tu as remplacé tous les XXX de ton histoire, il est temps de tester notre travail. Pour tester, on va utiliser console.log() une fois de plus.

Dans ton navigateur, ouvre ta console, remplis le formulaire et appuie sur ton bouton. Ton histoire devrait s'afficher correctement dans la console!

Console story

Affiche ton histoire sur ta page web

La console c'est chouette pour tester, mais pas pour notre jeu final. On veut que l'histoire s'affiche sur notre page web. Pour cela, il nous faut encore un peu d'HTML et de Javascript.

Première chose, créer une div vide et lui donner une id. C'est dans cette div (sans contenu au départ) qu'on va "injecter" l'histoire. C'est ce que j'ai fait à la ligne 18:

Pour pouvoir injecter du contenu dans

il faut une fois de plus sélectioner la div. J'ajoute donc dans la partie script de mon code la nouvelle variable output (ligne 5) et à la place de console.log(story), j'ajoute output.innerHTML = story;

Et voilà, le tour est joué! Tu peux faire jouer tous tes amis.

Output

Pour les supras motivés

Le top, ça serait de faire "disparaître" le formulaire quand on appuie sur le bouton. Pas de problème... je te laisse t'inspirer de mon code

Joyeuses fêtes!

© Techies Lab ASBL 2019 - Designed and built in Belgium with