JavaScript et JQuery

Partie 1

  • Réaliser un fichier bonjour.js qui affiche bonjour. Inclure ce fichier dans index.php.
  • Afficher Hello en console également.
console.log("Hello");
  • Réaliser un fichier function.js et l’inclure dans index.php. Permettre grâce à une fonction nomCouleur de saisir le nom et la couleur de la carte et d’afficher une phrase en console contenant ces deux éléments .
<script src="function.js"></script>
<script>nomCouleur();</script>

Partie 2

  • Permettre grâce à une fonction score de saisir de la vie et l’attaque d’une carte et afficher la somme en console.
  • Dans une fonction meilleurScore, indiquer parmi deux cartes celle qui a la somme la plus haute en utilisant la fonction précédente.
  • Réaliser une fonction sommeScore qui permette d’indiquer la somme de 4 cartes.
  • Permettre à l’utilisateur de choisir le nombre de cartes à additionner dans cette fonction sommeScore.
  • Réaliser une fonction attaque qui soustrait un montant passé en argument de la vie d’une carte.
  • Permettre à l’utilisateur de saisir cet argument.
  • Permettre d’enregistrer chaque score dans un tableau grâce à la fonction mesCartes.

Partie 3

  • Vérifier avec JavaScript les input de formCarte.html grâce veriForm. La fonction renverra un booléen.
    • l’attaque est comprise entre 0 et 20
    • la santé est comprise entre 1 et 40
    • le cout est compris entre 0 et 12
    • le nom ne commence pas par un chiffre
    • le nom de l’artiste comprend au moins 4 caractères
$( "#monformulaire" ).submit(function( event ) {
  
 //bloque l'envoie
  event.preventDefault();
});

 

  • Changer la couleur du bouton de validation du formulaire formCarte.html au passage de la souris grâce à changeCouleur.
  • Réaliser un menu menu qui permette de choisir parmi vos fonctions.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

 

Partie 4

  • Dans function.js, réaliser une fonction changeCouleurJQ avec jQuery qui modifie la couleur du bouton de validation du formulaire formCarte.html.
$("#monBouton").css("background-color","pink");
  • Enlever le bouton de validation de formCarte.html s’il ne respecte pas veriForm grâce à veriFormJQ.
  • Mettre l’entourage des inputs qui ne respectent pas les conditions de veriForm toujours dans veriFormJQ. On pourra utiliser les classes de Bootstrap.
  • Entrer par défaut votre nom dans l’input Artiste grâce à moiJQ. (val)
  • Masque l’image de la carte de index.php pendant 2 secondes grâce à ninjaJQ. (delay – fadein fadeout)
  • Afficher le dos de la carte lorsque l’on tape la lettre d grâce à backJQ.
  • Déplacer l’image de la carte avec le clavier grâce à moveJQ. La faire disparaitre au bout de 10 déplacement.
  • Déplacer l’image de la carte avec la souris grâce à moveSJQ  https://jqueryui.com/draggable/.

Partie 5

  • Enregistrer les fichiers sur Gitlab dans un répertoire hearthstone4 et partager avec cherryclass.
  •  Déployer votre application en ligne (hors localhost).