Add files via upload

Mxltiply · Dec 19, 2022 · e124b24 · e124b24
1 parent 2478393
commit e124b24
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,39 @@
+const memeImageText = document.getElementById("memeImage")
+const timeLeftText = document.getElementById("timeLeft")
+const subredditText = document.getElementById("subredditText")
+const linkText = document.getElementById("linkText");
+createNewMeme();
+
+function createNewMeme() {
+    fetch("https://meme-api.com/gimme")
+    .then((res) => res.json())
+    .then((data) => {
+        var url = data["url"];
+        var subreddit = data["subreddit"];
+        var link = data["postLink"];
+        memeImageText.src = url;
+        subredditText.textContent = subreddit;
+        linkText.textContent = link;
+    })
+}
+
+
+function startTimer() {
+    var timeLeft = 5;
+    var timerId = setInterval(countdown, 1000);
+    function countdown() {
+        if (timeLeft <= -1) {
+            clearTimeout(timerId);
+            startTimer();
+            createNewMeme();
+        } else {
+        timeLeftText.textContent = timeLeft;
+        timeLeft--;
+        }
+    }
+}
+
+startTimer();
+
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Memeinator</title>
+    <link rel="stylesheet" href="./style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <main>
+        <h2 class="timerText">Next meme in <span id="timeLeft">5</span> seconds</h2>
+        <div class="memeContainer">
+            <image id= "memeImage" src="" height="450" width="450"></image>
+        </div>
+        <h3 class="subredditContainer">Subreddit: <span id="subredditText"></span></h3>
+        <h3 class="linkContainer">Link: <span id="linkText"></span></h2></h3>
+
+    </main>
+	<script src="app.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,41 @@
+body {
+    padding: 0px;
+    margin: 0px;
+}
+
+.memeContainer {
+    text-align: center; /* aligns the inner elements horizontally */
+    /*border: 5px solid green;*/
+    top: -30px;
+    position: relative;
+}
+
+.memeContainer img {
+    border-collapse: collapse;
+    margin-bottom: 10px;
+    border: 10px solid black;
+    border-radius: 5px;
+}
+
+.timerText {
+    text-align: center;
+    font-family: 'Roboto', sans-serif;
+    font-size: 45px;
+}
+
+.subredditContainer {
+    text-align: center;
+    top: -60px;
+    right: 15px;
+    position: relative;
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+}
+.linkContainer {
+    text-align: center;
+    top: -70px;
+    position: relative;
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+}
+