Skip to content

Commit 47c663c

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1186 from vink08/Fetch-memes
 issue #837 fetching memes Reddit
2 parents 7c6dade + 54d067d commit 47c663c

6 files changed

Lines changed: 166 additions & 0 deletions

File tree

‎Projects/Fetch-Reddit-Memes/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Fetch_Memes_Reddit
2+
## 🛠️ Issue 837
3+
4+
# Description
5+
6+
This web fetching the memes from Reddit API in which I used HTML ,CSS , JAVASCRIPT And Reddit API.
7+
8+
# Features
9+
* Fetching Memes from Reddit API
10+
* All memes shown at single dashboard
11+
* On clicking Memes button then it fetch all Memes
12+
13+
# Technolgies Used
14+
<li> HTML <BR>
15+
<LI>CSS <BR>
16+
<LI>JAVASCRIPT<BR>
17+
18+
# ScreenShot
19+
![Screenshot](image.png)
20+
21+
## Getting Started
22+
23+
To run the Air-Quality application locally, follow these steps:
24+
25+
1. **Clone the repository**:
26+
27+
```bash
28+
git clone https://github.com/TusharKesarwani/Front-End-Projects.git
29+
```
30+
31+
2. **Navigate to the project directory**:
32+
33+
```bash
34+
cd Projects
35+
cd Fetch_Memes_Reddit
36+
```
37+
3. Open the **index.html** file in your preferred web browser or in VS Code click on **Go Live** to open with live server.
38+

‎Projects/Fetch-Reddit-Memes/image.png‎

2.35 MB
Loading

‎Projects/Fetch-Reddit-Memes/meme.jpg‎

725 KB
Loading

‎Projects/Fetch-Reddit-Memes/redditmemes.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
#memes{
2+
display:flex;
3+
flex-wrap: wrap;
4+
height: 80vh;
5+
width:80vw;
6+
margin : 150px auto;
7+
}
8+
#mm.holder{
9+
height:200px;
10+
width:200px;
11+
display:flex;
12+
flex-wrap:wrap;
13+
}
14+
#imageholder{
15+
height:300px;
16+
width:300px;
17+
margin:30px;
18+
}
19+
body{
20+
21+
background-image: url(meme.jpg);
22+
background-repeat: no-repeat;
23+
background-attachment: fixed;
24+
background-position: center;
25+
color: #000;
26+
font-family: 'Open Sans', sans-serif;
27+
font-size: 16px;
28+
line-height: 1.6em;
29+
margin: 0;
30+
padding: 0;
31+
-webkit-font-smoothing: antialiased;
32+
-moz-osx-font-smoothing: grayscale;
33+
34+
}
35+
36+
#btn {
37+
margin: 0;
38+
position: absolute;
39+
left: 45%;
40+
background: #34c6d9;
41+
background-image: -webkit-linear-gradient(top, #d95234, #2b71b8);
42+
background-image: -moz-linear-gradient(top, #34c6d9, #2b71b8);
43+
background-image: -ms-linear-gradient(top, #34c6d9, #2b71b8);
44+
background-image: -o-linear-gradient(top, #34c6d9, #2b71b8);
45+
background-image: linear-gradient(to bottom, #34c6d9, #2b71b8);
46+
-webkit-border-radius: 60;
47+
-moz-border-radius: 60;
48+
border-radius: 60px;
49+
font-family: Arial;
50+
color: #ffffff;
51+
font-size: 20px;
52+
padding: 10px 20px 10px 20px;
53+
text-decoration: none;
54+
}
55+
56+
#btn:hover {
57+
background: #3cb0fd;
58+
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
59+
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
60+
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
61+
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
62+
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
63+
text-decoration: none;
64+
}
65+
#header{
66+
border:2px solid black;
67+
background-color:lightskyblue;
68+
;
69+
}

‎Projects/Fetch-Reddit-Memes/redditmemes.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
6+
<title>Memes Mania</title>
7+
<meta name='viewport' content='width=device-width, initial-scale=1'>
8+
<link rel='stylesheet' href='redditmemes.css'>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
12+
13+
14+
</head>
15+
<body>
16+
<script src='redditmemes.js'></script>
17+
18+
<div align="center" id="header" ><h1>MEMES MANIA</h1></div>
19+
<h2 align="center">Click here for memes</h2>
20+
<button id="btn" onclick="fetchMemes()">Memes</button>
21+
22+
</body>
23+
</html>

‎Projects/Fetch-Reddit-Memes/redditmemes.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var after=''
2+
function fetchMemes(){
3+
4+
if(document.getElementById('memes')){
5+
document.getElementById('memes').remove()
6+
}
7+
let parentdiv = document.createElement('div');
8+
parentdiv.id='memes';
9+
fetch(`https://www.reddit.com/r/memes.json?after=${after}`)
10+
.then((apidata)=>{
11+
12+
return apidata.json();
13+
})
14+
.then(body=>{
15+
after=body.data.after;
16+
console.log(after);
17+
for(let i=0; i<body.data.children.length; i++){
18+
if(body.data.children[i].data.post_hint==='image'){
19+
let div=document.createElement('div')
20+
div.id="mmholder"
21+
let h3=document.createElement('h3');
22+
let image=document.createElement('img');
23+
image.id="imageholder"
24+
image.src=body.data.children[i].data.url_overridden_by_dest
25+
h3.textContent=body.data.children[i].title
26+
div.appendChild(h3);
27+
div.appendChild(image);
28+
parentdiv.appendChild(div);
29+
}
30+
}
31+
document.body.appendChild(parentdiv);
32+
})
33+
.catch((error)=>{
34+
console.log(`Error occured ${error}`);
35+
})
36+
}

0 commit comments

Comments
 (0)