changes

met18001 · Feb 7, 2020 · c2eddb7 · c2eddb7
1 parent fb4d142
commit c2eddb7
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 0 deletions.
diff --git a/week-3/spongebob/.gitignore b/week-3/spongebob/.gitignore
@@ -0,0 +1 @@
+
diff --git a/week-3/spongebob/README.md b/week-3/spongebob/README.md
@@ -0,0 +1,2 @@
+# Mocking-SpongeBob
+Mocking SpongeBob Meme Creator
diff --git a/week-3/spongebob/img/spongebob.jpg b/week-3/spongebob/img/spongebob.jpg
diff --git a/week-3/spongebob/index.html b/week-3/spongebob/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">Mocking SpongBob</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/week-3/spongebob/js/main.js b/week-3/spongebob/js/main.js
@@ -0,0 +1,47 @@
+/**
+ * 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
+    let memedText = this.innerText.toLowerCase();
+
+    let characters = this.innerText.split("");
+    // defining characters as string 
+
+    let letters =[];
+    //creating an array
+
+    characters.forEach((character, index) => {
+
+       if (index % 2 ==1){
+           letters.push(character.toUpperCase()); 
+       } else{
+           letters.push(character.toLowerCase());
+       }
+    });   
+
+
+
+
+
+
+    //let nums=[0,1,2,3,4,5]
+  //nums.forEach(function(num, index){
+    //console.log(index % 2 );
+
+
+
+    // Replace the old text with new text
+    this.innerText = letters.join("");
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Mocking-SpongeBob
		Mocking SpongeBob Meme Creator