Skip to content
Permalink
Browse files

Added fizzbuzz

  • Loading branch information
Alex Mueller
Alex Mueller committed Feb 12, 2020
1 parent 2ea41fe commit dca3f995fdb054f9d6702b317def6880c7fa0f2b
Showing with 71 additions and 22 deletions.
  1. +7 −7 mocking-sponge/index.html
  2. +13 −15 mocking-sponge/js/main.js
  3. +18 −0 week-4/css/style.css
  4. +18 −0 week-4/index.html
  5. +15 −0 week-4/js/main.js
@@ -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>
@@ -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('');
}
@@ -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;
}
}
@@ -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>
@@ -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>';
}

0 comments on commit dca3f99

Please sign in to comment.
You can’t perform that action at this time.