Niveau débutants

Exercice 1

Créé un texte qui s'agrandit au clic. Si on reclique dessus, il reprend sa taille d'origine. Pour pouvoir faire cela, il va falloir que tu mette la taille de police initiale dans une variable.


Télécharger la correction

Exercice 2

Créé 5 boutons et un rectangle. Chaque bouton provoque une action sur le rectangle.

Télécharger la correction

Exercice 3

  1. Créé un lien et une liste (ul) que tu cache en CSS et met plusieurs élements (li) dedans. Au clic sur le lien, fais apparaître la liste.
  2. Si tu as réussi, tu as fait ton premier menu déroulant. Maintenant, on va le rendre un peu plus complexe.
<ul id="menu">
  <li>
    <a href="#">Menu 1</a>
    <ul style="display:none;">
      <li>Sous-menu 1</li>
      <li>Sous-menu 2</li>
      <li>Sous-menu 3</li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 2</a>
    <ul style="display:none;">
      <li>Sous-menu 1</li>
      <li>Sous-menu 2</li>
      <li>Sous-menu 3</li>
    </ul>
  </li>
</ul>

Il faut faire en sorte qu'avec ce code, tu puisses déplier le menu 1 et le menu 2. Et quand tu recliques, il se referme. Petite astuce, en faisant $('a'), tu applique du code à tous les liens de la page. Tu auras aussi besoin de la fonction next() pour sélectionner l'élement suivant le lien (la liste).


Puissance max : essaye de faire en sorte que quand tu cliques sur un menu, cela replie les autres menu qui sont déjà dépliés


Télécharger la correction


Niveau Ninja

Exercice 4

Voici un fichier source avec un menu qui a un élément qui est sélectionné. Il faut faire en sorte que quand on clique sur un autre élément, il devienne actif, en gros que le <li> ait la classe "active" et que le <span class="corner"> soit affiché. Bien évidemment, il faut que l'élément qui était actif se désactive.

  1. Ces fonctions suivantes peuvent t'aider : next(), parent() & find().
  2. En gros, il faut faire en sorte que quand on clique sur un <a>, on mette une classe "active" sur le <li>. Pour ajouter une classe, tu peux utiliser addClass(), pour en retirer une, removeClass(), et vérifier si une classe est affectée à un élément avec hasClass()
Télécharger la correction

Exercice 5

Si tu as réussi l'exercice précédent, cela veut dire que tu es vraiment devenu puissant (à part si tu as recopié sur ton voisin). Maintenant, on va rajouter des <div> (contenant du texte) dans les <li> qui se déplient lorsqu'on clique sur le menu correspondant. Tu as compris, tu vas programmer ton premier slider. Voici le fichier de base.


Télécharger la correction

Exercice 6

Regarde Subtle Pattern. Ca te plaît ? On va faire pareil.

  1. On a une grille de texture, lorsqu'on clique sur la texture, elle s'applique au fond de la page. Il faut récupérer le background-image de l'élément et le mettre dans le <body>
  2. Lorsqu'on passe la souris sur le logo, il se déplace vers le bas. Pour que ce soit animé, il faut utiliser la fonction animate(). Tu as le droit de te faire plaisir et faire une autre animation.
  3. Le fichier modèle est ici.
Télécharger la correction

Exercice 7

Regarde le site French Design Index, et l'effet de survol sur les images. On va essayer de le reproduire en partant de cette page


Télécharger la correction

Exercice 8

Tu es aujourd'hui assez puissant pour créer ton propre slider. Bravo ! Il va falloir que tu partes de cette page.

  1. Pour commencer, fais en sorte que lorsque tu clique sur le bouton "suivant", la <div class="move"> se déplace de 400px vers la gauche (en utilisant la propriété "left")
  2. Puis fais en sorte que quand il arrive à la dernière image, il revienne au début.
  3. Fais la même chose pour le bouton "précédent"
  4. C'est fini ? Whouah. Tu peux maintenant essayer de faire un seul code pour l'action du bouton "précédent" et "suivant" en utilisant des conditions.
  5. Plus dur : essaye de faire en sorte que le code marche qu'importe le nombre d'articles
  6. Bonus : télécharge jQuery UI et choisi un effet stylé que tu peux appliquer au slider. Pour cela, il faudra utiliser la fonction effect().
Télécharger la correction

Exercice 9

  1. Crée un champ de texte dans un formulaire avec une valeur "Rechercher" et une classe "placeholder" qui met le texte en gris.
  2. Crée une fonction qui permet au clic d'enlever le texte
  3. Si on clique en dehors de la zone de texte et que le champ est toujours vide, on remet le texte "Rechercher" avec la classe "placeholder"
  4. Tu auras besoin des fonctions attr(), hasClass(), addClass() & removeClass()
  5. Si tu veux voir un exemple, regarde le fonctionnement du champ rechercher de Facebook.

Exercice 10

Crée un carré sexy et un champ de saisie de texte dans un formulaire sur lequel tu devras mettre ton curseur. Puis...

  1. Lorsque tu appuies sur une touche, déplace le bloc de 10px vers le bas
  2. Maintenant, il faut que cela marche que si tu appuies sur la touche du bas
  3. Plus puissant, il faut que ça marche si tu appuies plusieurs fois
  4. Puis, il faut pouvoir le remonter avec la touche du haut (toujours de 10px)
  5. Pour avoir la grande classe, quand le bloc atteint le bas de la page, il doit réaparaître en haut

Aide, c'est cadeau :

// permet de lancer une action lorsqu'on appuie sur une touche et qu'on est sur l'élement #champ
$('#champ').keydown(function(evenement) {
  // permet de récupérer le code de la touche
  alert(evenement.keyCode);

  // Si le code de la touche est égale au code de la touche du bas,
  // on fait descendre vers le bas
});


Niveau Super star

Exercice 11

Tu es une super star ? Prouve-le moi en faisant un menu déroulant à 2 niveaux.


  1. Commence par faire un marcher un menu déroulant à 1 niveau qui s'ouvre au survol
  2. Maintenant, passe au 2è niveau, bon courage !