Added fizzbuzz

alm17008 · Feb 12, 2020 · dca3f995fdb054f9d6702b317def6880c7fa0f2b · dca3f99
1 parent 2ea41fe
commit dca3f995fdb054f9d6702b317def6880c7fa0f2b
Unified Split

Showing with 71 additions and 22 deletions.

+7 −7 mocking-sponge/index.html

+13 −15 mocking-sponge/js/main.js

+18 −0 week-4/css/style.css

+18 −0 week-4/index.html

+15 −0 week-4/js/main.js
diff --git a/mocking-sponge/index.html b/mocking-sponge/index.html
@@ -18,13 +18,13 @@
 <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 class="px-6">
+            <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>
+          <img class="w-full" src="img/spongebob.jpg" alt="SpongeBob">
           </div>
     </main>
     <script src="js/main.js"></script>

diff --git 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
@@ -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
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>FizzBuzz</title>
+</head>
+<body>
+    <h1>Solving FizzBuzz</h1>
+    <p id="dark">Welcome to the dark side.</p>
+    <p id="output">
+        Output:
+        <br>
+    </p>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/week-4/js/main.js 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('')) + '<br>';
+}