dishamodi0910 · dishamodi0910 · Jul 20, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024
diff --git a/Existing_API_Collection/Meme_Generator_API/README.md 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)
diff --git a/Existing_API_Collection/Meme_Generator_API/image.png b/Existing_API_Collection/Meme_Generator_API/image.png
diff --git a/Existing_API_Collection/Meme_Generator_API/index.html b/Existing_API_Collection/Meme_Generator_API/index.html
@@ -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>
diff --git a/Existing_API_Collection/Meme_Generator_API/logo.jpg b/Existing_API_Collection/Meme_Generator_API/logo.jpg
diff --git a/Existing_API_Collection/Meme_Generator_API/script.js 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
@@ -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;
+ }
+}