GravenilvecTV/index.html

## index.html
<!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>

## index.js

// 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']);
}
	<!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']);
	}