logo

Crowdly

Browser

Add to Chrome

\n \n \n
\n

Liste d'animaux de compagnie

\n
\n
\n
\n
\n
\n
\n
\n
\n
    \n \n
\n
\n \n \n \n \n   \n Fichier JavaScript à compléter (animaux.js) : \n \n const petName = document .getElementById( 'name' );\n const petSpecies = document .getElementById( 'species' );\n const petAge = document .getElementById( 'age' );\n const addButton = document .getElementById( 'addButton' );\n const petList = document .getElementById( 'petList' );\n\n // Complétez le fichier JavaScript... \n \n \n   \n Exemple d'affichage : \n ","item":"https://www.crowdly.sh/en/question/8451e0bd906ce4548f2e48f3eb663056807f3512442304d96393ca168639d772/"}]}]}

Liste d'Animaux de Compagnie Pour cette question vous aurez à compléter le cod...

✅ The verified answer to this question is available below. Our community-reviewed solutions help you understand the material better.

Liste d'Animaux de Compagnie

Pour cette question vous aurez à compléter le code JavaScript pour créer une liste d'animaux de compagnie. L'objectif est de permettre à l'utilisateur d'ajouter des animaux de compagnie à une liste et d'afficher quelques détails à leur sujet.

Une page HTML de base, déjà implémentée, permet à l'utilisateur de saisir le nom, l'espèce et l'âge d'un animal de compagnie. Vous devez compléter le code JavaScript pour récupérer les informations de ces champs et ajouter l'animal à une liste lorsque l'utilisateur clique sur le bouton Ajouter. 

Vous devez donc utiliser JavaScript pour ajouter les fonctionnalités suivantes :

  • Gérer l'ajout d'un nouveau animal de compagnie lorsque l'utilisateur appuie sur le bouton Ajouter.

  • Afficher les animaux de compagnie dans une liste avec leurs noms, espèces et âges.

  • Effacer le champ de saisie après l'ajout d'un animal.

  • Ajouter des boutons de suppression à côté de chaque animal pour permettre à l'utilisateur de les supprimer de la liste.

Fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    
<meta charset="UTF-8">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
<title>Liste d'Animaux de Compagnie</title>
    
<style>
        
li
 {
            
display:
 flex;
            
justify-content: space-
between;
            align
-items: center
;
            
margin: 5px 0
;
            
padding: 5px
;
            
font-size: 16px
;
        }
    
</style>
    
<script defer src="animaux.js"></script>
</head>
<body>
<div class="container">
    
<h2>Liste d'animaux de compagnie</h2>
    
<div class="row">
        
<div class="col s12 m12 l12"><input type="text" id="name" placeholder="Nom de l'animal"></div>
        
<div class="col s12 m9 l9"><input type="text" id="species" placeholder="Espèce"></div>
        
<div class="col s12 m3 l3"><input type="number" id="age" placeholder="Âge"></div>
        
<div class="col s12"><button class="btn" id="addButton">Ajouter</button></div>
    
</div>
</div>
<div class="container">
    
<ul class="collection" id="petList">
        
<!--
        Les animaux de compagnie seront ajoutés ici.
        Exemple d'un item ajouté :
            <li class="collection-item">Nom (espèce, age ans) <button class="btn-small">Supprimer</button></li>
        -->
    
</ul>
</div>
</body>
</html>

 

Fichier JavaScript à compléter (animaux.js) :

const petName = document.getElementById('name'
);
const petSpecies = document.getElementById('species'
);
const petAge = document.getElementById('age'
);
const addButton = document.getElementById('addButton'
);
const petList = document.getElementById('petList'
);
// Complétez le fichier JavaScript...

 

Exemple d'affichage :

pets

More questions like this

Want instant access to all verified answers on ena.etsmtl.ca?

Get Unlimited Answers To Exam Questions - Install Crowdly Extension Now!

Browser

Add to Chrome

TelegramInstagramTikTokQuestion Bank
Terms of UseContact Us