Université Cadi Ayad- Marrakech

Faculté des Sciences – Semlalia

Département Informatique

Licence Professionnelle Technologies de Web

Tp 1 : Angular

Exercice 1 :
Vous allez construire une application simple appelé « Todo List ! ». L'objectif de l’application
est de créer la liste des taches à faire. Appliquer le même style en utilisant le CSS3. Créer un
champ de texte pour saisir la tache à faire et un bouton « Add » pour l’ajouter. Créer un
Tableau se constitue de 4 cellules :
- « Label » : la tâche à réaliser
- « Priority » : désigne le niveau d’importance de la tâche.
- « Done » : s’elle est faite ou pas encore.
- « Actions » : pour supprimer la tache
Voici à quoi ressemble l’application :
Exercice 2 :
Vous allez construire un jeu très simple appelé « Devinez le nombre ! ». L'objectif du jeu est
de deviner un nombre généré par ordinateur au hasard avec minimum de tentatives que
possible. Voici à quoi ressemble le jeu :

Pour déterminer ce qui doit entrer dans le composant, nous commencerons par détailler les
caractéristiques que nous voulons que l'application prenne en charge (les variables à utiliser)
:

• Génération de nombres aléatoires (original)

• Fournir une entrée à un utilisateur pour deviner la valeur (guess)

• Suivi du nombre de suppositions déjà faites (noOfTries)

• Donner des conseils à l'utilisateur pour améliorer sa supposition en fonction de son

entrée (deviation)

• Donner un message de réussite si l'utilisateur devine le numéro correctement

(deviation)
NB : utiliser Bootstrap dans l’application
Exemple d’exécution :
Exécutez l'application et faites quelques suppositions ; la valeur noOfTries change après
chaque supposition, tout comme le contenu de la vue :