Exercice complémentaire¶

Voici un seul exercice qui met en pratique :

l'utilisation de tableaux
l'utilisation de fonctions avec ou sans paramètre
L'utilisation de la librairie Math (Math.min et Math.max)

Le projet¶

Créer un petit projet web.

Code HTML

<!doctype html>
<html>
    <head>
        <link href="temp.ico" rel="icon">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <main>
            <h1>Statistiques sur les animaux domestiques</h1>

            <p>Chats : <span id="nbChat"></span></p>
            <p>Chiens : <span id="nbChien"></span></p>
            <p>Poissons : <span id="nbPoisson"></span></p>
            <p>Oiseaux : <span id="nbOiseau"></span></p>
            <p>Hamsters : <span id="nbHamster"></span></p>
            <p>Lapins : <span id="nbLapin"></span></p>
            <p>Serpents : <span id="nbSerpent"></span></p>
            <p>Furets : <span id="nbFuret"></span></p>
            <p>Perroquets : <span id="nbPerroquet"></span></p>
            <hr>
            <p>Nombre total de votes : <span id="nbVotes"></span></p>
            <p>Animal le plus populaire : <span id="plusPopulaire"></span></p>
            <p>Animal le moins populaire : <span id="moinsPopulaire"></span></p>
            <hr>

            <button type="button" onclick="lancerVotes()">Démarrer le vote</button>

            <button type="button" onclick="afficherPlusPopulaire()">Afficher le plus populaire</button>

            <button type="button" onclick="afficherMoinsPopulaire()">Afficher le moins populaire</button>

        </main>
        <script src="script/stats.js"></script>
    </body>
</html>

Code CSS

main{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(155, 196, 190);
    padding: 2rem;
}

button{
    padding: 1rem;
    border:0.1rem solid seagreen;
    background-color: rgb(8, 41, 22);
    border-radius: 0.5rem;
    margin: 1rem;
    color: white;
}

button:hover{
    background-color: rgb(21, 109, 58);
}

Énoncé¶

Statistiques de popularité des animaux domestiques

À partir de 2 tableaux initiaux déclarés globalement :

const animaux = ["chat", "chien", "poisson", "oiseau", "hamster", "lapin", "serpent", "furet", "perroquet"];
const votes = [];

Écrire une fonction qui demande d'entrer un nombre de votes indiquant le nombre de propriétaires de chaque type d'animal et conserver les votes dans le tableau des votes.

Cette fonction doit être appelée pas le bouton "Démarrer le vote".

Elle boucle sur le tableau des animaux pour entrer le vote dans le tableau des votes.
Écrire une fonction qui affiche à côté de chaque animal le nombre de votes pour cet animal.

Cette fonction sera appelée à chaque fois qu'un vote est entré pour un type d'animal.

Elle reçoit donc la valeur du vote et l'animal en paramètres.

Attention: les valeurs apparaîtront à la fin de la fonction des votes, il est probable que ça ne s'affiche pas au fur et à mesure.
Écrire une fonction qui calcule la somme totale du nombre de votes.

Cette fonction est appelée après avoir entré tous les votes pour chaque animal.

La somme totale représente le nombre total de propriétaires d'animaux.
Écrire une fonction qui affiche l'animal le plus populaire (celui qui a le plus de votes).

Cette fonction est appelée par le bouton "Afficher le plus populaire".
Écrire une fonction qui affiche l'animal le moins populaire (celui qui a le moins de votes).

Cette fonction est appelée par le bouton "Afficher le moins populaire".

Exemple final¶

Exercice