diff --git a/Existing_API_Collection/Meme_Generator_API/README.md b/Existing_API_Collection/Meme_Generator_API/README.md new file mode 100644 index 00000000..061ffacb --- /dev/null +++ b/Existing_API_Collection/Meme_Generator_API/README.md @@ -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 + +![Demo](image.png) \ No newline at end of file diff --git a/Existing_API_Collection/Meme_Generator_API/image.png b/Existing_API_Collection/Meme_Generator_API/image.png new file mode 100644 index 00000000..09b6af5c Binary files /dev/null and b/Existing_API_Collection/Meme_Generator_API/image.png differ diff --git a/Existing_API_Collection/Meme_Generator_API/index.html b/Existing_API_Collection/Meme_Generator_API/index.html new file mode 100644 index 00000000..321400af --- /dev/null +++ b/Existing_API_Collection/Meme_Generator_API/index.html @@ -0,0 +1,33 @@ + + + + + + Giggle Hub + + + + + +
+

WELCOME TO GIGGLE HUB

+

Let's have a look at the memes

+ +
+

Loading..

+
+ +
+

Made by :

+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/Existing_API_Collection/Meme_Generator_API/logo.jpg b/Existing_API_Collection/Meme_Generator_API/logo.jpg new file mode 100644 index 00000000..5dcff4b2 Binary files /dev/null and b/Existing_API_Collection/Meme_Generator_API/logo.jpg differ diff --git a/Existing_API_Collection/Meme_Generator_API/script.js b/Existing_API_Collection/Meme_Generator_API/script.js new file mode 100644 index 00000000..b3a3b79d --- /dev/null +++ b/Existing_API_Collection/Meme_Generator_API/script.js @@ -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); + + + diff --git a/Existing_API_Collection/Meme_Generator_API/style.css b/Existing_API_Collection/Meme_Generator_API/style.css new file mode 100644 index 00000000..7f1937ba --- /dev/null +++ b/Existing_API_Collection/Meme_Generator_API/style.css @@ -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; + } +} \ No newline at end of file