-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
52 lines (47 loc) · 2.1 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Memes & Quotes</title>
<link rel="stylesheet" href="./css/styles.css"/>
<script text="text/javascript">
function toggleDarkMode() {
// change to dark theme if not so already
document.body.classList.toggle("dark_theme")
}
function randomiseImage(id, id2){
var imagesArray = ["else.png", "oldRogers.jpg", "simpsons.png", "spiderman.png", "why.png", "pepe.jpg", "smart.jpg"]
var randomIndex = Math.floor(Math.random() * 7)
var randomIndex2 = Math.floor(Math.random() * 7)
var image1 = document.getElementById(id)
var image2 = document.getElementById(id2)
image1.src = "./assets/images/" + imagesArray[randomIndex]
image2.src = "./assets/images/" + imagesArray[randomIndex2]
}
</script>
</head>
<body>
<header>
<nav class="navbar">
<a class="nav_link" href="index.html">Memes</a>
<h1 class="center_text">MemesMetro</h1>
<a class="nav_link" href="quotes.html">Quotes</a>
</nav>
<p class="center_text"><button onclick="toggleDarkMode()">toggle theme</button></p>
</header>
<h1 class="center_text">Memes</h2>
<h2 class="center_text">What is a meme?</h3>
<p class="center_text meme_desription">A meme is an idea, behavior, or style that spreads by means of
imitation from person to person within a culture and often carries
symbolic meaning representing a particular phenomenon or theme.</p>
<section class="memes_collection">
<figure>
<img class="meme" id="image1" src="./assets/images/pepe.jpg" alt="FeelsBadMan Meme"/>
</figure>
<figure>
<img class="meme" id="image2" src="./assets/images/smart.jpg" alt="Smart thinking meme"/>
</figure>
</section>
<p class="center_text"><button onclick="randomiseImage('image1', 'image2')">Randomise</button></p>
</body>
</html>