Skip to content

Instantly share code, notes, and snippets.

@laruiss

laruiss/Énoncé devoir ESCEN.md

Created January 1, 2019 20:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save laruiss/483df78cfa1285c1a123953d99ca7dca to your computer and use it in GitHub Desktop.
Save laruiss/483df78cfa1285c1a123953d99ca7dca to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Énoncé devoir ESCEN.md

Devoir à rendre

L'énoncé peut paraître long, mais rassurez-vous, ce sera en fait assez court (pour ceux qui m'ont écouté, en tout cas). Lisez l'énoncé entièrement, ne vous arrêtez pas à "Bonus", il y a des rappels importants à la toute fin.

Créer une page de formulaire pour qu'un utilisateur puisse laisser un message directement depuis la page

Note préalable

L'utilisation de jQuery est totalement facultative.

Pour faire un appel AJAX sans jQuery, je vous conseille d'utiliser la librairie axios https://github.com/axios/axios (lire la documentation). Utiliser la version disponible sur un CDN, comme vu par exemple en cours avec jQuery :

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Effectuer un appel AJAX en post

axios.post('/message', {
  email: 'stan@examble.com',
  message: 'Blablabli et blablabla'
})

La page à créer

1) Contenu

Deux champs de saisie obligatoires :

  • un champ pour que l'utilisateur renseigne son adresse email ;
  • un champ pour qu'il laisse un message de plusieurs lignes.

Pour chacun des champs :

  • afficher un label ;
  • et un exemple (placeholder) ;
  • Un bouton de soumission du formulaire, avec un titre, une bordure, une couleur de fond et une couleur de texte contrastante.

Conseils :

  • Faire attention à toutes les balises et tous les attributs vus en cours.

2) Comportement

  • Pour le champ "email", autoriser uniquement des adresses emails valides. Il faut donc empêcher la soumission du formulaire si le champs email ne contient pas une adresse email valide ;
  • Le bouton de soumission doit envoyer le contenu du formulaire (email et message) en AJAX (ou XHR) en méthode post (comme pour le projet réalisé en cours) ;
  • Limiter le nombre de caractères pour le message à 200 (prévenir l'utilisateur par un message sur l'interface) ;
  • Montrer à l'utilisateur que la limite du nombre de caractères est dépassée (encadré rouge, par exemple, ou message en dessous du champ).

3) Apparence

  • Aligner d'une façon ou d'une autre les labels et les champs de saisie ;
  • Utiliser une ou 2 polices plus originales que les polices par défaut ;
  • Afficher le formulaire au centre (horizontal et vertical) de la page.

Conseils :

Bonus

  • Créer un en-tête avec une icône à gauche et un titre au centre ;
  • Créer un pied de page avec au moins une date (2019, par exemple) au centre ou à droite ;
  • Lors de l'écriture par l'utilisateur du message, afficher le nombre de caractères restants au fur et à mesure de la frappe de l'utilisateur, si possible en bas à droite du champs de saisie du message ;
  • Empêcher la soumissionk

Conseils :

  • Pour l'en-tête et le pied de page, regarder les propriétés CSS flex-direction (notamment la valeur column), flex (notamment les valeurs 1 1 auto) et/ou flex-grow (et la valeur 1). Voir les sites suivants pour plus de détails sur flex https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • Pour l'affichage du nombre de caractères, utiliser la propriété .value de l'élément textarea (récupéré avec event.target) pour avoir le contenu, et la méthode .length dessus : event.target.value.length dans une fonction de rappel d'un écouteur d'événement sur l'élément textarea du formulaire renverra ce que l'utilisateur y aura saisi, par exemple). Si cette dernière phrase est trop compliquée, ne paniquez pas, lisez la suite, ça devrait être plus clair avec un exemple.

Fournir vos fichiers sources

Quelques rappels :

Avec cet exemple de code HTML :

<textarea id="the-input-id" name="message" class="input  input-message">
</textarea>

Voici comment faire en JavaScript :

// D'abord récupérer le champs de saisie, et le stocker dans une variable
var theTextarea = document.getElementById('the-input-id')
// ou
// (Noter le # au début : il s'agit ici d'un sélecteur CSS, oui les mêmes qu'on utilise en CSS)
var theSameTextarea = document.querySelector('#the-input-id')
// ou encore
// (Noter le . au début désignant un sélecteur de classe : cela récupérera
// le premier élement qui aura dans ses classes la classe input-message)
var stillTheSameTextarea = document.querySelector('.input-message')

// Ensuite, écouter l'événement, et créer une fonction de rappel qui aura toujours comme premier paramètre l'objet évenement
theTextarea.addEventListener(
  'input', // Écouter tout changement de la saisie (la fonction de rappel est exécuté à chaque changement du message)
  function (event) {// Exécuter cette fonction de rappel à chaque changement,
                    // la fonction de rappel aura toujours en premier paramètre un objet de type Event
    var textareaElement = event.target // Récupérer l'élément textarea qui est dans la propriété target de l'objet event
    var message = textareaElement.value // Récupérer le contenu du champ de saisie
    if (message.length > 200) {
      // Code qui sera exécuté si le contenu de la variable 'message'
      // (c'est-à-dire la valeur du champs de saisie fait plus de 200 caractères)
    }
  }
)

Rappel concernant les objets en JavaScript : ce sont des dictionnaires de paires clé - valeur, la valeur pouvant elle-même être un objet complexe :

// Création d'un objet et stockage dans la variable nommée 'foo'
var foo = {
  bar: 'baz' // clé 'bar' avec une valeur simple
  fizz: { // clé 'fizz' avec une valeur complexe
    buzz: 'fizz-buzz'
    baz: true
  }
}

// Utilisation de la variable foo
foo.bar // Retourne 'baz'
foo.fizz.buzz // Retourne 'fizz-buzz'

foo.bar.length // Retourne 3 car 'baz' est composé de 3 caractères
foo.fizz.buzz.length // Retourne... je vous laisse deviner ou essayer 
// (vous pouvez coller ce code dans les outils de développement de votre navigateur - non, pas Safari, j'ai dit un navigateur...)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment