Activités JavaScript

Lampe Simple

On veut concevoir une lampe qui s'allume ou s'éteint lorsqu'on clique sur le bouton TOGGLE.

Code HTML

<div class="container">
  <div id="lampe"></div>
  <div>
    <button id="toggle">TOGGLE</button>
  </div>
</div>

Code CSS

.container {
  width: 100px;
  margin: auto;
}

.container > div {
  margin: 10px 0;
}

#lampe {
  width: 100px;
  height: 100px;
  border: #777 solid 5px;
  border-radius: 50%;
}

#lampe.on {
  background-color: yellow;
}

button {
  display: block;
  width: 110px;
  border: none;
  padding: 10px 0;
}

#toggle.on {
  background-color: green;
  color: white;
}

#toggle {
  background-color: maroon;
  color: white;
}

Travail demandé

1. Créer les fichiers lampe.html et lampe.css contenant le code précédent.
2. Créer un fichier lampe.js :
   • Le premier clic sur le bouton TOGGLE allume la lampe,
   • Le second clic sue ce même bouton éteint la lampe,
   • Les touches a et z du clavier allume et éteint la lampe respectivement. La touche e inverse l'état de la lampe.

Double lampes animés

On veut améliorer la première version de notre lampe en ajoutant une seconde lampe. Les deux lampes peuvent être déplacés à l'aides des touches fléchées. La première lampe peut-être allumée/éteinte à l'aide de la touche a. La deuxième lampe est commandée à l'aide de la touche z.

Piano

On veut créer le piano suivant :

Travail Demandé

1. Télécharger les fichiers ressources contenant l'interface du Piano : Ressources
2. Compléter le code JavaScript pour rendre le Piano fonctionnel à l'aide de la Souris ou du clavier. La fonction qui joue la musique a été fournie playSound(numTouche) et elle accepte le numéro de la touche du piano à jouer.