Compter la monnaie

vendredi 8 novembre 2013
par  Alain BUSSER , Florian TOBÉ

Ici, l’ensemble dans lequel sont stockés les objets (des pièces de monnaie) est une tirelire, et ce n’est pas par catégorie que sont classées les pièces, mais avec pour but de totaliser une somme donnée.

Voici le fichier source, en html (cliquer droit sur la pièce) :

passez monnaie !
le fichier en html, à ouvrir dans un autre onglet du navigateur

D’ordinaire, pour payer 13 centimes, on donne une pièce de 10 centimes, une pièce de 2 centimes et une pièce de 1 centimes. Mais que faire lorsqu’on n’a qu’une pièce de 5 centimes et pas de pièce de 10 centimes ? Plus généralement, on peut se demander de combien de manières différentes on peut former 13 centimes...

Le principe est le même que dans cet article, mais au lieu de disques en CSS, la propriété « background-image » de CSS a été utilisée pour mettre des photos de vraies pièces, et augmenter ainsi le réalisme [1]. La tirelire est un ensemble (c’est-à-dire un objet dont la classe CSS est « ensemble ») appelé « coffre ». Alors on peut boucler sur les pièces qui sont dans cet ensemble et selon leur classe CSS, ajouter leur valeur à une variable richesse, qui, à la fin de la boucle, contient donc la somme stockée dans la tirelire :

  1. richesse = 0
  2. $("#coffre li").each (x) ->
  3.         if $(this).hasClass "p1" then richesse++
  4.         if $(this).hasClass "p2" then richesse+=2
  5.         if $(this).hasClass "p5" then richesse+=5
  6. $(".economies").text richesse

Télécharger

Après ça, la variable richesse est affichée dans tous les éléments dont la classe CSS est « economies » (ici, il n’y en a qu’un, en bas de page).


Voici la version en ligne de l’application :

Par ici la monnaie !

Mettre centimes dans la tirelire

image/svg+xml centimes ? 16

      tirelire

    La tirelire contient 0 centimes.


    [1Pour insérer une photo dans du html, utiliser ce serveur.


    Commentaires