Université Sultan Moulay Slimane
Ecole Supérieure de Technologie
Fkih Ben Salah
TP 4
Exercice 1 : Formulaire de Contact Dynamique
1. Objectif : Créer un formulaire interactif avec affichage des données saisies.
2. Travail à réaliser :
• Créez une page HTML contenant un formulaire avec les champs :
▪ Nom, Email, Sujet (texte), Message (zone de texte).
▪ Un bouton "Envoyer" pour soumettre le formulaire.
• Appliquez du style avec CSS :
▪ Bordures, espacement (padding), et couleur au survol du bouton avec
:hover.
• Ajoutez un script JavaScript pour :
▪ Empêcher le rechargement de la page à la soumission.
▪ Afficher les informations saisies dans une boîte d'alerte.
Exercice 2 : Galerie d’Images Interactive
1. Objectif : Créer une galerie d'images dynamique avec interaction utilisateur.
2. Travail à réaliser :
• Structurez une page HTML contenant :
▪ 4 miniatures d'images (ex : 100x100 pixels).
▪ Une grande image principale affichée par défaut.
• Appliquez du style avec CSS :
▪ Bordures pour les miniatures, effet au survol (:hover), et alignement des
images.
• Ajoutez un script JavaScript pour :
▪ Au clic sur une miniature, remplacer l’image principale par celle
sélectionnée.
1
Pr. I. KHOULQI A.U 2024-2025
Université Sultan Moulay Slimane
Ecole Supérieure de Technologie
Fkih Ben Salah
Exercice 3 : Calculatrice Fonctionnelle
1. Objectif : Créer une calculatrice simple qui réalise des opérations mathématiques.
2. Travail à réaliser :
• Créez une page HTML avec :
▪ Deux champs input pour saisir les nombres.
▪ Une liste déroulante <select> pour choisir l’opération (+, -, *, /).
▪ Un bouton "Calculer" pour lancer le calcul.
▪ Une zone où le résultat sera affiché.
• Appliquez du style avec CSS :
▪ Alignez les éléments et ajoutez des bordures/espacements pour une
interface propre.
• Ajoutez un script JavaScript pour :
▪ Récupérer les saisies utilisateurs.
▪ Effectuer l’opération sélectionnée et afficher le résultat
dynamiquement.
Exercice 4 : Minuteur Décompte Dynamique
1. Objectif : Créer un minuteur qui réalise un compte à rebours.
2. Travail à réaliser :
• Créez une page HTML contenant :
▪ Un champ input pour entrer un temps en secondes.
▪ Un bouton "Démarrer" pour lancer le décompte.
▪ Une zone où le temps restant s’affiche.
• Appliquez du style avec CSS :
▪ Centrez le contenu et utilisez des couleurs pour rendre l’interface
agréable.
• Ajoutez un script JavaScript pour :
▪ Décrémenter le temps chaque seconde avec setInterval.
▪ Afficher "Temps écoulé" lorsque le décompte atteint 0.
2
Pr. I. KHOULQI A.U 2024-2025
