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

💥🚀 TOP Best Façons d'utiliser ChatGPT en SEO (avec prompts)

Comment créer un tunnel de vente rentable ?

Meilleurs sites pour obtenir une IPTV gratuite et à vie avec mise à jour automatique quotidienne | Dz Techs

Chordbot

🚀 Débloquez TOUT votre potentiel musical avec notre LiSTE d' EMAiLs pros & perso des plus grands RAPPEURS ✨(Hip-hop Fr ➕ US) !

Promotion de la musique : comment promouvoir votre musique en 2022 | LANDR Blog

Tous les Nouveaux Sites De Streaming FR & FREE (pas d'inscription)

Les meilleurs cours de théâtre à Reims en 2024 — Imparato

Explication et listes de Google Dorks – Culte du code

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