logo

Crowdly

Browser

Додати до 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://crowdly.sh/uk/question/8451e0bd906ce4548f2e48f3eb663056807f3512442304d96393ca168639d772/"}]}]}

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

✅ Перевірена відповідь на це питання доступна нижче. Наші рішення, перевірені спільнотою, допомагають краще зрозуміти матеріал.

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

Більше питань подібних до цього

Хочете миттєвий доступ до всіх перевірених відповідей на ena.etsmtl.ca?

Отримайте необмежений доступ до відповідей на екзаменаційні питання - встановіть розширення Crowdly зараз!

Browser

Додати до Chrome

TelegramInstagramTikTokQuestion Bank
Умови використанняЗв'яжіться з нами