Projet | ​​​​​​Mini projet - Web |  CSS & JS - Potentiomètre rectiligne

Contexte

Nous construisons une page web. Elle représente un potentiomètre exposé ci-contre. Nous pourrons alors choisir une consigne et la transmettre à distance via le web.
​
Sa composition nécessite l'usage de script css pour son style et de javascript pour sa réactivité.

HTML & CSS - Déclaration et positionnement des éléments

On déclare et positionne le potentiomètre et son label. On pourra se prompter avec le site w3Schools.com.

  1. Ecrire une page html avec 2 éléments : <p> et  <input>
  2. Leur attribuer les propriétés id="info" et id="pot" respectivement.
  3. Orienter le potentiomètre avec la propriété transform: rotate(10deg); ​Cette propriété est conforme aux navigateurs Chrome et Firefox.
  4. Disposer les deux éléments à l'aide des propriétés : left, top et position dans un élément <style>.
  5. Styliser le paragraphe avec les propriétés : color, background-color.

JS - Ajustement du comportement des éléments

Nous ajoutons le script nécessaire à l'affichage de la position du curseur du potentiomètre dans le paragraphe
  1. Lire ce blog et importer le code javascript dans la page html.
  2. S'assurer que le paragraphe indique la valeur acquise avec le potentiomètre.

JS - Enregistrement de la position du potentiomètre

Finalement on enregistre la position du potentiomètre dans ​cette page-texte située sur un serveur web. Pour cela, nous ajoutons une instruction en bonne place entre les balises <script> et </script>. Cette instruction est semblable à celle de la ligne 2 du code javascript mais invoquera sa fonction send2php().​
  1. S'assurer que l'enregistrement a bien eu lieu en consultant la page-texte. Penser à rafraichir la page.
Ajouter une instruction afin que la fonction send2php() s'exécute au relâchement du curseur du potentiomètre. Voir le site w3schools.com

Rendu sur la page web

Deux éléments sur la page web : le potentiomètre et son label.