diff --git a/mocking-sponge/index.html b/mocking-sponge/index.html index de6c7c9..8690ca6 100644 --- a/mocking-sponge/index.html +++ b/mocking-sponge/index.html @@ -18,13 +18,13 @@
- 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. -

-
+
+
jAvAsCrIpT Is a cOnSiStEnT LaNgUaGe
+ +
+ SpongeBob
diff --git a/mocking-sponge/js/main.js b/mocking-sponge/js/main.js index e9fc219..0f1f297 100644 --- a/mocking-sponge/js/main.js +++ b/mocking-sponge/js/main.js @@ -1,7 +1,7 @@ /** * Get the editable instance. */ -let editable = document.querySelector("[contenteditable=true]"); +let editable = document.querySelector('[contenteditable=true]'); /** * When focus is removed, run the `formatText` function @@ -11,18 +11,16 @@ 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; +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 + */ + this.innerText = this.innerText + .split('') + .map(function(letter, i) { + return i % 2 ? letter.toUpperCase() : letter.toLowerCase(); + }) + .join(''); } diff --git a/week-4/css/style.css b/week-4/css/style.css new file mode 100644 index 0000000..540803c --- /dev/null +++ b/week-4/css/style.css @@ -0,0 +1,18 @@ +body { + font-family: monospace; + max-width: 768px; + margin: 0 auto; +} +#dark { + display: none; +} + +@media (prefers-color-scheme: dark) { + body { + background-color: #000; + color: #0f0; + } + #dark { + display: initial; + } +} diff --git a/week-4/index.html b/week-4/index.html new file mode 100644 index 0000000..2d61699 --- /dev/null +++ b/week-4/index.html @@ -0,0 +1,18 @@ + + + + + + + FizzBuzz + + +

Solving FizzBuzz

+

Welcome to the dark side.

+

+ Output: +
+

+ + + \ No newline at end of file diff --git a/week-4/js/main.js b/week-4/js/main.js new file mode 100644 index 0000000..51191ad --- /dev/null +++ b/week-4/js/main.js @@ -0,0 +1,15 @@ +for (let i = 1; i < 101; i++) { + let normal = true; + let rules = []; + if (i % 3 === 0) { + rules.push('Fizz'); + normal = false; + } + if (i % 5 === 0) { + rules.push('Buzz'); + normal = false; + } + console.log(normal ? i : rules.join('')); + document.getElementById('output').innerHTML += + (normal ? i : rules.join('')) + '
'; +}