Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 4

Vous n'avez pas le droit de modifier le code HTML

Partie 1 : CSS 28 pts

#1. La balise html doit avoir un arrière-plan lightgreen. 1 pt

#2. Le corps de la page (body) doit :

▪ Occuper 35% en largueur.
▪ Être centré horizontalement. 4 pts
▪ Avoir un padding de 5px.
▪ Avoir un arrière-plan blanc.

#3. Chaque division quote doit avoir :

▪ Un margin supérieure, inférieure et à gauche de 30px.
La dernière quote ne doit pas avoir un margin inférieure.
▪ Des bordures de couleur lightsalmon.
7 pts
L’épaisseur des bordures est 2px, sauf pour la bordure gauche :
10px.
Le type des bordures est solid, sauf pour la bordure gauche :
double.
▪ Des coins arrondis de 10px.

#4. Le numéro du quote doit :

▪ Avoir un width et un height de 50px.
▪ Être gras. 9 pts
▪ Avoir un contenu centré horizontalement et verticalement.
▪ Avoir un arrière-plan greenyellow.

Page 1 sur 4
 Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 4

▪ Avoir des bordures de 3px et de couleur lightsalmon.

▪ Avoir des coins arrondis de 20px comme indiqué.
▪ Être positionné comme indiqué :

#5. Le texte du quote doit :

▪ Être justifié.
▪ Être gras.
5 pts
▪ Avoir une taille de texte de 20px.
▪ Avoir une couleur lightgreen.
▪ Avoir un margin inférieure de 30px.

#6. L'auteur du quote doit :

▪ Être gras. 2 pts
▪ Avoir une bordure inférieure de 2px et de couleur lightgreen.

Page 2 sur 4
 Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 4

Partie 2 : Javascript 25 pts

#7. Le corps de la page doit :

▪ Avoir des bordures à droite et à gauche dotted de 2px et de 3 pts
couleur lightgreen.
▪ Avoir un box-shadow de 200px et de couleur lightsalmon.

#8. Le titre principal doit :

▪ Avoir une couleur salmon.
▪ Être aligné à gauche.
▪ Avoir un padding de 20px.
▪ Avoir un margin inférieur de 30px. 6 pts
▪ Avoir une bordure à droite et à gauche de 2px d’une couleur
greenyellow.
▪ Avoir une bordure supérieure et inférieure de 10px d’une
couleur greenyellow.
▪ Des coins arrondis de 15px.

#9. Ajouter le lien Add quote qui doit :

▪ Référencer la même page.
7 pts
▪ Être centré.
▪ Afficher le message d’alerte « Added successfully » à la suite
du click.

#10. Il faut calculer et Afficher le nombre de quotes de chaque auteur.

6 pts

Ce nombre doit :

Page 3 sur 4
 Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 4

▪ Être aligné à droite.

▪ Avoir une couleur salmon.
▪ Être gras.

#11. Masquer les spans rating-value.

Afficher au centre le rating de chaque quote :
3 pts

Page 4 sur 4