Crowdly
Add to Chrome
GTI525-01 Technologies de développement Internet (H2025)
Looking for GTI525-01 Technologies de développement Internet (H2025) test answers and solutions? Browse our comprehensive collection of verified answers for GTI525-01 Technologies de développement Internet (H2025) at ena.etsmtl.ca.
Get instant access to accurate answers and detailed explanations for your course questions. Our community-driven platform helps students succeed!
Random fox et corporate bullshit
L'API Random Fox fournit des photos aléatoires de renards. Pour y accéder vous pouvez utiliser le point de terminaison : https://randomfox.ca/floof/Le JSON ci-dessous fournit un exemple de réponse fournie par l’API:
{
"image": "https:\/\/randomfox.ca\/images\/30.jpg"
,
"link": "https:\/\/randomfox.ca\/?i=30"
}
L'API Corporate Bullshit fournit des mots à la mode (buzzwords) aléatoires du monde corporatif. Le point de terminaison de cette API est: https://corporatebs-generator.sameerkumar.website/ Voici ci-dessous un exemple de réponse de cette API:
{
"phrase": "Energistically Target Sticky Metrics"
}
À implémenter:
- Vous devez créer une page HTML qui contiendra au moins: Un élément <div>, une image et un élément textuel (paragraphe, span, titre, etc).
- Après le chargement complet de la page, la page doit envoyer une requête à chaque API pour récupérer des mots à la mode et l’adresse d’une photo de renard.
- Vous devez créer/changer le texte de l'élément textuel pour afficher les mots à la mode récupérés de l'API.
- L'élément image doit contenir la photo du renard.
Voici ci-dessous un exemple de présentation pour vous guider:
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 :