Correction TP 7/30 - Générateur de citations

Correction TP 7/30 - Générateur de citations



@GravenilvecTV
Created 2 years ago • Report abuse
Correction TP 7/30 - Générateur de citations
<!DOCTYPE html>
<html>
<head>
<title>Générateur de citations</title>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="citation">Une variable c'est quelque chose qui peut varier</h1>
<img id="avatar" alt="Avatar de Graven" src="http://graven.yt/graven.jpg">
<h1 id="nom">Graven</h1>
<button id="btn">Générer</button>
<!-- charger le code javascript -->
<script src="index.js"></script>
</body>
</html>
// une variable pour récuperer depuis mon fichier html, le composant qui porte l'id 'nom'
const url = "http://graven.yt/citations.json";
let btn = document.getElementById('btn');
let avatar = document.getElementById('avatar');
let citation = document.getElementById('citation');
let text = document.getElementById('nom');
let citations = [];
// faire l'evenement lors d'un click bouton
btn.addEventListener('click', updatePage);
// recuperer toutes les citations depuis le lien graven.yt/citations.json
fetch(url).then((data) => {
data.json().then((data) => {
citations = data;
// affichage de citations
console.log(citations);
});
});
function updatePage() {
// choix au hasard d'une citation parmis la liste
let random = Math.floor(Math.random() * (citations.length - 0));
let randomCitation = citations[random];
// modification
text.innerText = randomCitation['nom'];
citation.innerText = randomCitation['citation'];
avatar.setAttribute('src', randomCitation['image']);
}
@thierrygramari
 
Add heading textAdd bold text, <Ctrl+b>Add italic text, <Ctrl+i>
Add a quote, <Ctrl+Shift+.>Add code, <Ctrl+e>Add a link, <Ctrl+k>
Add a bulleted list, <Ctrl+Shift+8>Add a numbered list, <Ctrl+Shift+7>Add a task list, <Ctrl+Shift+l>
Directly mention a user or teamReference an issue or pull request

Commentaires

Posts les plus consultés de ce blog

Glossaire du Marketing Digital

Comment trouver des produits tendance AliExpress pour votre magasin

Optimiser vos URLs : 11 bons conseils pour améliorer votre référencement

Marketing Digital : le guide complet pour un chef d'entreprise

🌟 Comment faire du dropshipping avec CHAT GPT *° |[ Full dossierv 2024 ] 💥

Recherche de mots-clés : TOP 10 des outils gratuits

Meilleurs outils de référencement 🛠 organisée par Saijo George

Mixed In Key 10 Crack + Code d'activation [Dernier] 2022 - VST Homes

Les 14 meilleurs liens du dark web en 2022 (+ Comment naviguer sur des sites en .onion)

Se fixer des objectifs : Pourquoi et comment réussir ?