Skip to content

Commit afb0c58

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#232 from AmolShelke2/main
meme_generator added.
2 parents 9a20419 + 6277022 commit afb0c58

File tree

5 files changed

+143
-0
lines changed

5 files changed

+143
-0
lines changed

‎Meme_generator/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Meme_generator.
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
5+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
6+
7+
# Preview
8+
9+
<img src="/Meme_generator/preview.png" alt="Preview image" />

‎Meme_generator/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Indian Memes</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<script src="script.js" defer></script>
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div class="text">
14+
<h1>Feeling Bored?</h1>
15+
<p>Let's see some Indian memes</p>
16+
<button id="btn">Get Memes</button>
17+
</div>
18+
<div class="img-container">
19+
<!-- the img will src will come from js dynamically -->
20+
<img src="" alt="" class="meme" />
21+
</div>
22+
</div>
23+
</body>
24+
</html>

‎Meme_generator/preview.png

1.22 MB
Loading

‎Meme_generator/script.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const memesSrc = [
2+
"https://resize.indiatvnews.com/en/resize/newbucket/715_-/2017/09/main-qimg-171482e27ebfc7e262bfbabeb07b9ece-1504253531.jpg",
3+
"https://static.langimg.com/thumb/msid-67268236,width-680,resizemode-3/navbharat-times.jpg",
4+
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHNpAwPPPim-RN4_DjSYt9ZIzFfjhDdA1tvttXLiouFJ-B0dIGSwAITtyT8LMogSoNu4Y&usqp=CAU",
5+
"https://tweakindia.com/wp-content/uploads/2020/07/2.png",
6+
"https://qph.fs.quoracdn.net/main-qimg-d3e293e694b270bcd9ff499f0deede15-lq",
7+
"https://i.pinimg.com/originals/30/ef/07/30ef075b1a6a289b5dac4d031832eb72.jpg",
8+
"https://getsethappy.com/wp-content/uploads/2019/01/gully-boys-memes-1080x600.jpg",
9+
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSs0TmftlNOhn2jN9D95IRBmVv9UhbrvNKiIQ&usqp=CAU",
10+
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRm3w9On31QwjIbk_GPmVPMPTJIrjm6dr46-A&usqp=CAU",
11+
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_-BveXtt73oa2x0hUtj5h2yK7xEB3gAxwGpF-lwgmTo6cddUDtI8RZT7PuvlGX6hRZYM&usqp=CAU",
12+
"https://1.bp.blogspot.com/-UlFIpSZcNS0/YJIgP1BEzmI/AAAAAAAAETE/zWEtrl3PqmgjSwJx9ccIlqM3yW_toEZOgCLcBGAsYHQ/s2048/very-funny-indian-memes.jpg",
13+
"https://1.bp.blogspot.com/-gwaDLFVz8Uc/YNtP0yBouaI/AAAAAAAAB5w/10SEpkv0LIAlvUAv_kCKN58u6wa_auURQCNcBGAsYHQ/s1079/Indian%2Bmemes%2Bin%2Bhindi%2Btrending%2BIndian%2Bmemes18-min.webp",
14+
"https://images.news18.com/ibnlive/uploads/2021/09/cheese-butter.png",
15+
"https://images.news18.com/ibnlive/uploads/2014/07/engineeringmemes1.jpg?impolicy=website&width=510&height=356",
16+
"https://www.ohyaaro.com/wp-content/uploads/2021/05/funny-memes00.jpg",
17+
"https://memezila.com/wp-content/When-its-raining-but-the-electricity-doesnt-go-Miracle-miracle-meme-2239.png",
18+
];
19+
20+
const memeImg = document.querySelector(".meme");
21+
const getBtn = document.getElementById("btn");
22+
const container = document.querySelector(".img-container");
23+
24+
container.style.display = "none";
25+
26+
getBtn.addEventListener("click", function () {
27+
const randomMeme = Math.floor(Math.random() * memesSrc.length);
28+
memeImg.src = memesSrc[randomMeme];
29+
container.style.display = "block";
30+
});

‎Meme_generator/style.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;1,300;1,400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
html {
10+
font-size: 62.5%;
11+
}
12+
13+
body {
14+
background-image: url("https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000");
15+
background-repeat: no-repeat;
16+
background-position: center;
17+
background-size: cover;
18+
font-family: "Rubik", sans-serif;
19+
display: flex;
20+
height: 100vh;
21+
align-items: center;
22+
justify-content: center;
23+
flex-direction: column;
24+
overflow: hidden;
25+
}
26+
27+
.container {
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: center;
31+
align-items: center;
32+
}
33+
34+
.text {
35+
text-align: center;
36+
}
37+
38+
h1 {
39+
font-size: 4rem;
40+
margin-bottom: 2rem;
41+
font-weight: 300;
42+
}
43+
44+
p {
45+
font-size: 3rem;
46+
font-weight: 200;
47+
margin-bottom: 2rem;
48+
text-transform: capitalize;
49+
}
50+
51+
#btn {
52+
background-color: #000;
53+
color: #fff;
54+
padding: 1rem 2rem;
55+
margin-bottom: 4rem;
56+
cursor: pointer;
57+
border-radius: 7px;
58+
font-size: 2rem;
59+
}
60+
61+
img {
62+
width: 450px;
63+
height: 450px;
64+
}
65+
66+
.img-container {
67+
padding: 1rem 2rem;
68+
border: 2px solid #fff;
69+
border-radius: 3px;
70+
}
71+
72+
@media (max-width: 700px) {
73+
body {
74+
overflow: scroll;
75+
}
76+
77+
img {
78+
width: 200px;
79+
}
80+
}

0 commit comments

Comments
 (0)