html
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
<!-- Created by Chitranshi Gupta and Hritik Gautam-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Meme Viewer</title>
</head>
<body>
<h1>Laugh with Random Memes!</h1>
<p>Click the button to brighten your day with some funny memes.</p>
<div id="randomMeme">
<img id="memeImage" src="https://static.vecteezy.com/system/resources/previews/008/296/267/non_2x/colorful-swirl-logo-design-concept-illustration-vector.jpg?hl=en-US" alt="Random Meme" loading="lazy"/>
</div>
<button id="generateMemeBtn">Show Me a Meme</button>
<footer>Made with ♥ by <a href="https://www.sololearn.com/profile/31989540/?ref=app">Chitranshi Gupta</a> & <a href="https://www.sololearn.com/profile/32122886/?ref=app">Hritik Gautam</a></footer>
<script>
// script.js
const generateMemeBtn = document.getElementById('generateMemeBtn');
const memeImage = document.getElementById('memeImage');
// Fetch and display a random meme
generateMemeBtn.addEventListener('click', async function() {
// Show a placeholder while fetching
memeImage.src = "https://img.freepik.com/premium-vector/loading-icon-vector-editable-element-design-template-file-format-eps_609989-2243.jpg?hl=en-US";
try {
Enter to Rename, Shift+Enter to Preview
css
css
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
/* Created by Chitranshi Gupta and Hritik Gautam*/
*{
margin: 0;
padding: 0;
box-sizing:border-box ;
overflow:hidden;
}
/* Body and Background */
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
text-align: center;
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
background-size: 300% 300%;
animation: bgAnimation 6s infinite;
padding:20px;
color: #333;
display: grid;
place-items: center;
height: 100vh;
width:100%;
}
img {
width: clamp(300px, 80vw, 100%);
height:100%;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
// Created by Chitranshi Gupta and Hritik Gautam
alert("Made with ♥️ by Chitranshi Gupta and Hritik Gautam");
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Запуск