---
title: Evaluation FrontEnd Gestion des évènements
tags: evaluation, frontend, event
robots: noindex, nofollow
author: Julien Noyer
---

# ECV Digital Aix-en-Provence <br> Partiel

**Matière** Développement Web
**Promotion** Bachelor 2

<br>


<br>

## Sujet : gestion des évènements

Dans le cadre de votre cursus de formation, vous avez étudié différentes notions en développement FrontEnd comme la mise en pages CSS, les balises sémantique HTML5 ou encore la gestion des événement en Javascript. L'évaluation que vous avez à réaliser va vous permettre de mettre en pratique ces différentes notions en réalisant un projet simple qui affiche la définition de 4 couleurs.

**Ressources du projet** https://bit.ly/3oF8gVW

<br>

### Rendu

Le dossier de rendu doit être transmis par message direct sur Teams à Morgane au format ZIP.

<br>

### Critères d’évaluation

- Structure HTML : 5 points
- Gestion CSS : 5 points
- Code Javascript : 5 points
- Bonnes pratiques : 5 points

<br>

---

<br><br><br>

# Instructions


Vous devez réaliser une page HTML qui contient les toutes les balises HTML nécessaires à l'affichage du contenu qui est défini dans le dossier des sources du projet. Il vous est conseillé de commencer par placer toutes les balises avant de commencer le design CSS et la programmation Javascript.

<br>

## Mise en page HTML et style CSS


<br>

L'image nommée `html.png` correspond à la mise en page que vous devez réaliser, vous devez créer une fichier `index.html` dans lequel vous devez créer la mise en pages ci-dessus en respectant les contraintes suivantes :

- La police de caractère des titres à utiliser est la Roboto Slab
- La police de caractère du texte à utiliser est la Roboto
- Les balises h1 font 46 pixels
- Les balises h1 font 36 pixels
- La largeur maximale du site est 900 pixels

> Il est conseiller de limiter le nombre de balises HTML.

<br>

## Interactivité Javascript


<br>

La page HTML qui vous devez offre à un internaute la possibilité de choisir parmi 4 couleurs différentes : vert, jaune, rouget et bleu. Vous devez ajouter le code Javascript qui capte le changement de la balise `select` pour changer la couleur de fond de la page (comme présenté sur l'image ci-dessus) et affiche la balise correspondant à la couleur. Il est important de bien faire en sorte de respecter la mise en page :

- La définition du **vert** est placé **en haut à gauche**
- La définition du **jaune** est placé **en haut à droite**
- La définition du **rouge** est placé **en bas à gauche**
- La définition du **bleu** est placé **en bas à droite**

<br>

Voici l'affichage attendu pour chaque couleurs :


> Il est conseillé de tester le CSS et la mise en pages avant de faire le Javascript.

<br>

Pour gérer la modification des couleurs et l'affichage de la définition, vous devez travailler sur l'ajout de `classe` CSS de tel sorte à pouvoir gérer une transition de transition pour faire apparaître progressivement la définition et la couleur de fond.

Les couleurs à utiliser sont les suivantes :

- **Vert** : green
- **Jaune** : B7B514
- **Rouge** : red
- **Bleu** : blue

<br>

---

<br><br><br>

# Ressources


Voici une liste dfe liens qui vous permettront de réaliser cette évaluation :

- **Support HTML** https://hackmd.io/TzbkU9WhSt2R5dVRdCxRXQ
- **Support CSS** https://hackmd.io/3oXfrnrVSga3fAjUNAKGwg
- **Support Javascript** https://hackmd.io/6ROZkiWETMG_n2mlMM4acQ
- **Capter un évènement en Javascript** https://mzl.la/37SqqwB
- **Manipuler les classes en Javascript** https://mzl.la/3gzYxNM