Added mocking spongebob

alm17008 · Feb 5, 2020 · 2ea41fe33bcb778e5599fba86be205d6bb2d862c · 2ea41fe
1 parent cd6edd8
commit 2ea41fe33bcb778e5599fba86be205d6bb2d862c
Unified Split

Showing with 69 additions and 0 deletions.

+1 −0 mocking-sponge/.gitignore

+2 −0 mocking-sponge/README.md

BIN mocking-sponge/img/spongebob.jpg

+32 −0 mocking-sponge/index.html

+28 −0 mocking-sponge/js/main.js

+4 −0 week-3/index.html

+2 −0 week-3/js/main.js
diff --git a/mocking-sponge/.gitignore b/mocking-sponge/.gitignore
@@ -0,0 +1 @@
+
diff --git a/mocking-sponge/README.md b/mocking-sponge/README.md
@@ -0,0 +1,2 @@
+# Mocking-SpongeBob
+Mocking SpongeBob Meme Creator
diff --git a/mocking-sponge/img/spongebob.jpg b/mocking-sponge/img/spongebob.jpg
diff --git a/mocking-sponge/index.html b/mocking-sponge/index.html
@@ -0,0 +1,32 @@
+<!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">
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        main{
+            display: flex;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
+    <title>Mocking SpongeBob</title>
+</head>
+<body>
+    <main>
+        <div class="max-w-sm rounded overflow-hidden shadow-lg">
+            <img class="w-full" src="img/spongebob.jpg" alt="SpongeBob">
+            <div class="px-6 py-4">
+              <div class="font-bold text-xl mb-2" contenteditable="true">jAvAsCrIpT Is a cOnSiStEnT LaNgUaGe</div>
+              <p class="text-gray-700 text-base">
+                The text above is <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content">editable</a> and reformats when you re-focus your cursor. Our developer messed up the code for this <a href="https://knowyourmeme.com/memes/mocking-spongebob#various-examples">SpongeBob Meme</a>. Instead of alternating caps, the title converts to uppercase. Fix this meme by editing the JavaScript function in this code.
+              </p>
+            </div>
+          </div>
+    </main>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/mocking-sponge/js/main.js b/mocking-sponge/js/main.js
@@ -0,0 +1,28 @@
+/**
+ * Get the editable instance.
+ */
+let editable = document.querySelector("[contenteditable=true]");
+
+/**
+ * When focus is removed, run the `formatText` function
+ */
+editable.addEventListener('blur', formatText);
+
+/**
+ * Format the innerText of the SpongeBob meme
+ */
+function formatText(event){
+
+    /* Format the text
+     * Split the text into an array, for each character in the array, if the index of the letter is odd,
+     * return the letter uppercase, otherwise return it lowercase
+     * then join the array with no delimiter returning it to a normal string
+     */
+    let memedText = this.innerText.split("")
+        .map(function (letter, i) {
+            return i % 2 ? letter.toUpperCase() : letter.toLowerCase()
+        }).join("")
+
+    // Replace the old text with new text
+    this.innerText = memedText;
+}
diff --git a/week-3/index.html b/week-3/index.html
@@ -1,12 +1,16 @@
 <!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>Week 3</title>
 </head>
+
 <body>
     <h1>Week 3</h1>
+    <script src="js/main.js"></script>
 </body>
+
 </html>
diff --git a/week-3/js/main.js b/week-3/js/main.js
@@ -0,0 +1,2 @@
+var variableName = "Test"
+console.log(variableName);