diff --git a/mocking-sponge/.gitignore b/mocking-sponge/.gitignore new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/mocking-sponge/.gitignore @@ -0,0 +1 @@ + diff --git a/mocking-sponge/README.md b/mocking-sponge/README.md new file mode 100644 index 0000000..00220f7 --- /dev/null +++ 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 new file mode 100644 index 0000000..73a683c Binary files /dev/null and b/mocking-sponge/img/spongebob.jpg differ diff --git a/mocking-sponge/index.html b/mocking-sponge/index.html new file mode 100644 index 0000000..de6c7c9 --- /dev/null +++ b/mocking-sponge/index.html @@ -0,0 +1,32 @@ + + + + + + + + + Mocking SpongeBob + + +
+
+ SpongeBob +
+
jAvAsCrIpT Is a cOnSiStEnT LaNgUaGe
+

+ The text above is editable and reformats when you re-focus your cursor. Our developer messed up the code for this SpongeBob Meme. Instead of alternating caps, the title converts to uppercase. Fix this meme by editing the JavaScript function in this code. +

+
+
+
+ + + \ No newline at end of file diff --git a/mocking-sponge/js/main.js b/mocking-sponge/js/main.js new file mode 100644 index 0000000..e9fc219 --- /dev/null +++ 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 index a8eaea0..b6be794 100644 --- a/week-3/index.html +++ b/week-3/index.html @@ -1,12 +1,16 @@ + Week 3 +

Week 3

+ + \ No newline at end of file diff --git a/week-3/js/main.js b/week-3/js/main.js new file mode 100644 index 0000000..7d79c4c --- /dev/null +++ b/week-3/js/main.js @@ -0,0 +1,2 @@ +var variableName = "Test" +console.log(variableName); \ No newline at end of file