Add files via upload

developer-ab · Dec 11, 2023 · 3d0c8a8 · 3d0c8a8
1 parent 4fb1afc
commit 3d0c8a8
Show file tree

Hide file tree

Showing 7 changed files with 241 additions and 0 deletions.
diff --git a/404.jpg b/404.jpg
diff --git a/4042.jpg b/4042.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Meme Generator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="form">
+        <input class="input_box" id="inputBox" type="text" placeholder="Search The Sub-reddit"/> 
+        <input class="input_box" id="inputBoxCount" type="text" placeholder="Enter the no. of memes (<50)"/>
+        <button id="button">
+           Fetch
+        </button>
+    </div>
+    <div class="container">
+        <div class="main">
+            <p class="title_name" id="title"></p>
+            <a href="https://www.reddit.com" class="meme_space" id="memeSpace" target="_blank"><img src="/m2.png" alt="MEME"></a>
+            <p class="meme_creator" id="creatorName"></p>
+          </div>
+          <div class="main">
+            <p class="title_name" id="title"></p>
+            <a href="https://www.reddit.com" class="meme_space" id="memeSpace" target="_blank"><img src="/m1.jpeg" alt="MEME"></a>
+            <p class="meme_creator" id="creatorName"></p>
+          </div>
+    </div>
+  </body>
+  <script src="script.js"></script>
+</html>
diff --git a/m1.jpeg b/m1.jpeg
diff --git a/m2.png b/m2.png
diff --git a/script.js b/script.js
@@ -0,0 +1,113 @@
+// javascript code for meme_generator
+
+// selecting the required elements.
+const button = document.getElementById("button");
+const input = document.getElementById("inputBox");
+const count = document.getElementById("inputBoxCount");
+const mainDiv = document.querySelector(".container");
+
+// seting the eventlistner for the button.
+button.addEventListener('click', (e)=> {
+     generate_meme(); // fuction call
+}, false);
+
+// function definition in which we fetch the data and generate the HTML elements dynamically.
+async function generate_meme(){
+
+    if (count.value > 50){
+
+        mainDiv.innerHTML = "";
+        const error = document.createElement("img");
+        error.src = "/4042.jpg";
+        mainDiv.appendChild(error);
+        alert("You have to study too. Decrease the meme count");        
+        return;
+
+    }
+
+    const raw_data = await fetch(`https://meme-api.com/gimme/${input.value}/${count.value}`);
+    console.log(raw_data.status);
+    console.log(raw_data.ok);
+    if(raw_data.ok){
+        const data = await raw_data.json();
+
+        mainDiv.innerHTML = "";
+
+        for (let i = 0; i < count.value; i++) {
+
+            const kuch = document.createElement("div");
+            kuch.classList.add("main");
+
+            const title = document.createElement('p');
+            title.classList.add('title_name');
+            title.textContent = `Title - ${data.memes[i].title}`;
+
+            const image = document.createElement("a");
+            image.classList.add("meme_space");
+            image.href = data.memes[i].url;
+            image.target = "_blank";
+            image.innerHTML = `<img src="${data.memes[i].url}" alt="MEME" ></img>`;
+
+            const creator = document.createElement("p");
+            creator.classList.add("meme_creator");
+            creator.textContent = `(${i+1}) Created by - ${data.memes[i].author}`;
+
+            kuch.appendChild(title);
+            kuch.appendChild(image);
+            kuch.appendChild(creator);
+            mainDiv.appendChild(kuch);  
+        }
+
+    }else{
+
+        mainDiv.innerHTML = "";
+        const error = document.createElement("img");
+        error.src = "/404.jpg";
+        mainDiv.appendChild(error);
+    }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// React is an open-sourse front-end framework.
+// REact introduces JSX, or avascript XML 
+// JSX can be used to create React components
+
+// Reacrjs, a javascript library for creating user infaces makes development of ui components easy and modular.
+
+// Key features
+// 1 component based architecture
+// 2 virtual dom
+// 3 .unidirectional data flow
+// 4 JSX syntax
+// 5 SEO performance
+
+// React vs angular
+// React vs JsXml
+
+// Rect is asamll library, covers only the rendering and event handling part, presentation code in javascript powered by JSX, core size is smaller than the angular so fast, very flexible, greate performace since it uses Virtual DOM.
+// Angular is a framework, provides the complete solution for the frontend development, presentation code in HTML embaded with javascript expression, it being a framwork contain a lot of code rresulting in longer load time, less flexible, uses actula dom which affect the performance. 
+
+// rect components
+// what is jsx
+// mvc framework
diff --git a/style.css b/style.css
@@ -0,0 +1,97 @@
+body {
+    background: linear-gradient(to right, #ff8c00, #ff2d55);
+}
+
+.form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.container {
+    display: flex;
+    justify-content: space-evenly;
+    align-items:center;
+    flex-wrap: wrap;
+    margin-top: 50px;
+}
+
+.main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 50%;
+}
+
+.input_box {
+    border: none;
+    color: #333;
+    height: 40px;
+    width: 30%;
+    border-radius: 5px;
+    margin: 7px;
+    font-size: large;
+    font-family: cursive;
+    box-shadow: 100px  black;
+}
+
+button {
+    background:#f4d03f;
+    color:black;
+    font-family:cursive;
+    font-size: larger;
+    cursor: pointer;
+    border-radius: 10px;
+    height: 40px;
+}
+
+button:hover {
+
+    background: #f5b041;
+
+
+}
+
+.title_name {
+    margin-bottom: 10px;
+    color: black;
+    font-family: cursive;
+    font-size: x-large;
+}
+
+img{
+    border: 7px solid white;
+    border-radius: 5%;
+    height: 430px;
+    width: 380px;
+    padding: 5px;
+    background-color: white;
+}
+
+img:hover {
+    border: 7px solid black;
+}
+
+.meme_creator {
+    color:white;
+    font-family: cursive;
+}
+
+@media screen and (max-width: 480px) {
+    .form{
+        flex-direction: column;
+        justify-content: space-evenly;
+    }
+
+    .input_box {
+        width: 70%;
+    }
+}
+
+@media screen and (max-width : 800px){
+    .main {
+        width:100%;
+    }
+}