-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTrue.html
69 lines (56 loc) · 2.14 KB
/
True.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>projet</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/nemoy" type="text/css"/><body>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/android-7" type="text/css"/>
<div class="background">
</div>
<nav>
<a href="fun.html"><img src="amitie.png" width="145"></a>
<a href="Wisdom.html"><img src="saggese.png" width="145"></a>
<a href="Quotes.html"><img src="populaire.png" width="145"></a>
<a href="True.html"><img src="inspiration.png" width="145"></a>
<div class="underline"></div>
</nav>
<button id="fa" class="fa" onclick="getJoke()">Generate Quotes</button>
<div class="animation" id="joke"></div>
<div id="canvas-container"></div>
<button class="fun" id="fun" onclick="window.location.href='hell.html';" >
DON'T CLICK
</button>
<script>
function getJoke() {
document.getElementById("joke").innerHTML = "";
const jokeElement = document.getElementById("joke");
jokeElement.classList.remove("animation");
void jokeElement.offsetWidth; // Trigger reflow
jokeElement.classList.add("animation");
// Make API request
const randomNumber = Math.floor(Math.random() * 5) + 1;
fetch("https://api.quotable.io/quotes/random?maxLength=40&tags=Inspirational")
.then(response => response.json())
.then(data => {
const quote = data[0];
console.log(quote.q);
// Insert joke setup into DOM
document.getElementById("joke").innerHTML = `<p>${quote.content}</p>`;
});
}
// Get all the image elements
const images = document.querySelectorAll("nav a img");
// Add event listeners to each image
images.forEach((image) => {
image.addEventListener("mouseover", () => {
image.style.transform = "scale(2.2)";
});
image.addEventListener("mouseout", () => {
image.style.transform = "scale(1)";
});
});
</script>
</body>
</html>