-
Notifications
You must be signed in to change notification settings - Fork 92
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #315 from komal-agarwal5/komal
Meme Generator API
- Loading branch information
Showing
6 changed files
with
332 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # Meme Generator | ||
|
|
||
| This is a random meme generator web application built using HTML, CSS, and JavaScript. It allows users to generate random memes by using the technique of API Fetching. | ||
|
|
||
| ## Tech Stack | ||
|
|
||
| - HTML | ||
|
|
||
| - CSS | ||
|
|
||
| - JS | ||
|
|
||
| ## Extra feature | ||
|
|
||
| - If you like the meme you can also share it with others using the share button provided at the bottom | ||
|
|
||
| ## Usage | ||
|
|
||
| 1. Clone the repository: | ||
|
|
||
| 2. Open the `index.html` file in your web browser. | ||
|
|
||
| 3. Click on generate meme button and see the meme appear on your screen | ||
|
|
||
| 4. You can also share the meme in case you liked it. | ||
|
|
||
| 5. Click on share button and spread the laughter. | ||
|
|
||
| ## Deployed version | ||
|
|
||
| - https://giggle-hub.vercel.app/ | ||
|
|
||
| ## Screenshot | ||
|
|
||
|  |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Giggle Hub</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel="shortcut icon" href="logo.jpg" type="image/x-icon"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
| </head> | ||
| <body> | ||
| <div class="whole"> | ||
| <h1 class="wlcm">WELCOME TO GIGGLE HUB</h1> | ||
| <h3 class="look">Let's have a look at the memes</h3> | ||
| <button class="meme-gen"><b>Generate Meme</b></button> | ||
| <div class="cont"> | ||
| <p class="title">Loading..</p> | ||
| <div style="text-align: center;"> | ||
| <img src="" alt=""> | ||
| </div> | ||
| <p class="author">Made by : </p> | ||
| <!-- <button class="meme-share"><span><b>Share it!</b></span> <span><b>Liked it?</b></span></button> --> | ||
| </div> | ||
| <div style="text-align: center;"> | ||
| <button class="meme-share"><span><b>Share it!</b></span> <span><b>Liked it?</b></span></button> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <p>Made with <i class="fa fa-heart"></i> by <a href="https://www.linkedin.com/in/komal-agarwal-95a3a026a/" target="_blank">Komal Agarwal</a></p> | ||
| </footer> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| const btn=document.querySelector(".meme-gen"); | ||
| const meme=document.querySelector(".cont img"); | ||
| const mtitle=document.querySelector(".title"); | ||
| const mauthor=document.querySelector(".author"); | ||
| const sh=document.querySelector(".meme-share"); | ||
| let s_data=null; | ||
|
|
||
| const update=(url,title,author) => { | ||
| meme.setAttribute("src",url); | ||
| mtitle.innerHTML=title; | ||
| mauthor.innerHTML=`Meme by : ${author}`; | ||
| // s_data=url; | ||
| }; | ||
|
|
||
| const genmeme=() => { | ||
| fetch("https://meme-api.com/gimme/wholesomememes").then((response)=>response.json()).then((data)=>{ | ||
| update(data.url,data.title,data.author); | ||
| s_data=data.url; | ||
| }); | ||
| }; | ||
|
|
||
| genmeme(); | ||
|
|
||
| function sharem(){ | ||
| if(navigator.share!==undefined){ | ||
| navigator.share({ | ||
| title:"Meme generator", | ||
| text:"Meme", | ||
| url:s_data, | ||
| }) | ||
| .then(()=>console.log("Successful share")).catch((error)=>console.log("Error",error)) | ||
| } | ||
| } | ||
|
|
||
| btn.addEventListener("click",genmeme); | ||
| sh.addEventListener("click",sharem); | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,225 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| /* box-sizing: border-box; */ | ||
| } | ||
|
|
||
| body { | ||
| /* background-color: #D9AFD9; | ||
| background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%); */ | ||
| background-color: #8EC5FC; | ||
| background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); | ||
| min-height: 100vh; | ||
| font-family: 'PT Sans', sans-serif; | ||
| } | ||
|
|
||
| .whole { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .wlcm { | ||
| background-image: linear-gradient(to top, #0ca8a8 0%, #2d055f 100%); | ||
| background-image: linear-gradient(135deg, #374ab4 0%, #2fbdc2 100%); | ||
| -webkit-text-fill-color: transparent; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-stroke-width: 0.3px; | ||
| -webkit-text-stroke-color: black; | ||
| letter-spacing: 2px; | ||
| } | ||
|
|
||
| .look { | ||
| padding-top: 15px; | ||
| color: navy; | ||
| } | ||
|
|
||
| .cont img { | ||
| /* width: 300px; */ | ||
| height: 300px; | ||
| /* object-fit: cover; */ | ||
| } | ||
|
|
||
| .title, | ||
| .author { | ||
| margin: 10px; | ||
| text-align: center; | ||
| font-family: 'Poppins', sans-serif; | ||
| letter-spacing: 1px; | ||
| font-weight: 540; | ||
| } | ||
|
|
||
| button { | ||
| margin: 20px; | ||
| border: none; | ||
| color: white; | ||
| background: transparent; | ||
| cursor: pointer; | ||
| transition: all 0.3s ease; | ||
| position: relative; | ||
| border-radius: 7px; | ||
| } | ||
|
|
||
| .meme-gen { | ||
| overflow: hidden; | ||
| border-radius: 5px; | ||
| width: 160px; | ||
| height: 55px; | ||
| font-size: 1rem; | ||
| text-transform: uppercase; | ||
| padding: 10px 10px; | ||
| letter-spacing: 2px; | ||
| } | ||
|
|
||
| .meme-gen::after { | ||
| position: absolute; | ||
| content: ""; | ||
| z-index: -1; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: #1fd1f9; | ||
| background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%); | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .meme-gen:hover { | ||
| background: transparent; | ||
| box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5), | ||
| -4px -4px 6px 0 rgba(116, 125, 136, .2), | ||
| inset -4px -4px 6px 0 rgba(255, 255, 255, .5), | ||
| inset 4px 4px 6px 0 rgba(116, 125, 136, .3); | ||
| color: #fff; | ||
| } | ||
|
|
||
| .meme-gen:hover::after { | ||
| -webkit-transform: scale(2) rotate(180deg); | ||
| transform: scale(2) rotate(180deg); | ||
| box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5), | ||
| -4px -4px 6px 0 rgba(116, 125, 136, .2), | ||
| inset -4px -4px 6px 0 rgba(255, 255, 255, .5), | ||
| inset 4px 4px 6px 0 rgba(116, 125, 136, .3); | ||
| } | ||
|
|
||
| .meme-share { | ||
| /* left: 125px; */ | ||
| /* bottom: 35px; */ | ||
| margin-top: -25px; | ||
| box-shadow: none; | ||
| width: 100px; | ||
| height: 40px; | ||
| line-height: 42px; | ||
| -webkit-perspective: 230px; | ||
| perspective: 230px; | ||
| text-transform: uppercase; | ||
| font-size: 0.8rem; | ||
| letter-spacing: 1.5px; | ||
| } | ||
|
|
||
| .meme-share span { | ||
| background: rgb(0, 172, 238); | ||
| background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%); | ||
| display: block; | ||
| position: absolute; | ||
| width: 100px; | ||
| height: 40px; | ||
| box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), | ||
| 7px 7px 20px 0px rgba(0, 0, 0, .1), | ||
| 4px 4px 5px 0px rgba(0, 0, 0, .1); | ||
| margin: 0; | ||
| text-align: center; | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| -webkit-transition: all 0.3s; | ||
| transition: all 0.3s; | ||
| } | ||
|
|
||
| .meme-share span:nth-child(1) { | ||
| box-shadow: | ||
| -7px -7px 20px 0px #fff9, | ||
| -4px -4px 5px 0px #fff9, | ||
| 7px 7px 20px 0px #0002, | ||
| 4px 4px 5px 0px #0001; | ||
| -webkit-transform: rotateX(90deg); | ||
| -moz-transform: rotateX(90deg); | ||
| -webkit-transform-origin: 50% 50% 20px; | ||
| -moz-transform-origin: 50% 50% -20px; | ||
| transform-origin: 50% 50% -20px; | ||
| } | ||
|
|
||
| .meme-share span:nth-child(2) { | ||
| -webkit-transform: rotateX(0deg); | ||
| -moz-transform: rotateX(0deg); | ||
| transform: rotateX(0deg); | ||
| -webkit-transform-origin: 50% 50% -20px; | ||
| -moz-transform-origin: 50% 50% -20px; | ||
| transform-origin: 50% 50% -20px; | ||
| } | ||
|
|
||
| .meme-share:hover span:nth-child(1) { | ||
| box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), | ||
| 7px 7px 20px 0px rgba(0, 0, 0, .1), | ||
| 4px 4px 5px 0px rgba(0, 0, 0, .1); | ||
| -webkit-transform: rotateX(0deg); | ||
| -moz-transform: rotateX(0deg); | ||
| transform: rotateX(0deg); | ||
| } | ||
|
|
||
| .meme-share:hover span:nth-child(2) { | ||
| box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), | ||
| 7px 7px 20px 0px rgba(0, 0, 0, .1), | ||
| 4px 4px 5px 0px rgba(0, 0, 0, .1); | ||
| color: transparent; | ||
| -webkit-transform: rotateX(-90deg); | ||
| -moz-transform: rotateX(-90deg); | ||
| transform: rotateX(-90deg); | ||
| } | ||
|
|
||
| footer { | ||
| background-color: rgb(85, 84, 84); | ||
| height: 30px; | ||
| position: absolute; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| footer p, | ||
| a { | ||
| color: white; | ||
| text-decoration: none; | ||
| text-align: center; | ||
| font-size: 1.2rem; | ||
| padding-top: 5px; | ||
| } | ||
|
|
||
| @media (max-width:768px){ | ||
| .wlcm{ | ||
| font-size: 1rem; | ||
| text-align: center; | ||
| } | ||
| .look{ | ||
| font-size: 0.7rem; | ||
| text-align: center; | ||
| } | ||
| .title{ | ||
| font-size: 1rem; | ||
| text-align: center; | ||
| } | ||
| img{ | ||
| max-width:100%; | ||
| height: auto; | ||
| } | ||
| /* .meme-share{ | ||
| width: 60%; | ||
| } */ | ||
| footer{ | ||
| /* display: block; | ||
| width: 100%; */ | ||
| /* margin-bottom: 0px; */ | ||
| height: auto; | ||
| padding: 10px; | ||
| } | ||
| } |