Editeur Front End version Alpha 0.0.

0
Vous allez prototyper une version alpha d'un éditeur de code Front-End (plagiat CodePen
😊)

• HTML5
• Algorithmique
• JavaScript

Ressource(s)
écouteur d'event
Référence des événements
Maquette de présentation
Prendre en main Github
Contexte du projet

Le numéro mystère 🎲 , un générateur de mot passe ultra sécurisé 🔐,

eh bien rien ne vous arrête, vous allez vite devenir des 🥷🥷du code.
Ça tombe bien j'ai encore une idée de projet pour vous. Grâce à vos
supers pouvoirs vous allez créer un éditeur Front End avec JavaScript.

J'ai besoin d'un prototype assez rapidement et donc pour cette version
pré alpha, j'attends juste une zone ou je pourrais entrer du code HTML &
CSS qui sera interprété en live afin de voir le résultat instantanément.
Je souhaite avoir un indicateur visuel (décompte) sur le nombre de
caractères utilisés et la possibilité de modifier facilement cette
contrainte (de base : 200 caractères maximum hors balise HTML & CSS)

Je souhaite avoir une progress bar (indicateur visuel) qui m'indique la

progression de mon code. Cette progress bar sera verte au départ pour
passer en orange une fois les 50% de caractères écrit et enfin à 80%
celle-ci passera en rouge.

Je souhaite également avoir un indicateur lorsque le curseur se trouve

dans les champs d'édition (style Messenger FB => ... en animation ou
autre).
J'aimerai également avoir quelques boutons qui me permettront
d'ajouter des balises plus rapidement (
Bonus :

• une liste me permettant de choisir une couleur et l'ajouter dans

mon code en CSS
• avoir 2 fenêtres distincte HTML & CSS
• avoir une fenêtre JS

Concentrez-vous sur les fonctionnalités et non sur le visuel dans un

premier temps.

Modalités pédagogiques

En mode collaboratif avec DEADLINE pour au plus vite hier.

Critères de performance

Le prototype doit répondre à toutes les exigences de la consigne de

base & éventuellement avec les Bonus (Client satisfait 😁)

Modalités d'évaluation
Démo en ligne sur un Github Page

Livrables
le dépôt Github et un Github Page pour tester en live.

Compétences visées
Développer une interface utilisateur web dynamique