Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added fizzbuzz
  • Loading branch information
Alex Mueller committed Feb 12, 2020
1 parent 2ea41fe commit dca3f99
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 22 deletions.
14 changes: 7 additions & 7 deletions mocking-sponge/index.html
Expand Up @@ -18,13 +18,13 @@
<body> <body>
<main> <main>
<div class="max-w-sm rounded overflow-hidden shadow-lg"> <div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="img/spongebob.jpg" alt="SpongeBob"> <div class="px-6">
<div class="px-6 py-4"> <div class="font-bold text-xl mb-2" contenteditable="true">jAvAsCrIpT Is a cOnSiStEnT LaNgUaGe</div>
<div class="font-bold text-xl mb-2" contenteditable="true">jAvAsCrIpT Is a cOnSiStEnT LaNgUaGe</div> <!-- <p class="text-gray-700 text-base">
<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.
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> -->
</p> </div>
</div> <img class="w-full" src="img/spongebob.jpg" alt="SpongeBob">
</div> </div>
</main> </main>
<script src="js/main.js"></script> <script src="js/main.js"></script>
Expand Down
28 changes: 13 additions & 15 deletions mocking-sponge/js/main.js
@@ -1,7 +1,7 @@
/** /**
* Get the editable instance. * Get the editable instance.
*/ */
let editable = document.querySelector("[contenteditable=true]"); let editable = document.querySelector('[contenteditable=true]');


/** /**
* When focus is removed, run the `formatText` function * When focus is removed, run the `formatText` function
Expand All @@ -11,18 +11,16 @@ editable.addEventListener('blur', formatText);
/** /**
* Format the innerText of the SpongeBob meme * Format the innerText of the SpongeBob meme
*/ */
function formatText(event){ function formatText(event) {

/* Format the text
/* Format the text * Split the text into an array, for each character in the array, if the index of the letter is odd,
* 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
* return the letter uppercase, otherwise return it lowercase * then join the array with no delimiter returning it to a normal string
* then join the array with no delimiter returning it to a normal string */
*/ this.innerText = this.innerText
let memedText = this.innerText.split("") .split('')
.map(function (letter, i) { .map(function(letter, i) {
return i % 2 ? letter.toUpperCase() : letter.toLowerCase() return i % 2 ? letter.toUpperCase() : letter.toLowerCase();
}).join("") })

.join('');
// Replace the old text with new text
this.innerText = memedText;
} }
18 changes: 18 additions & 0 deletions 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;
}
}
18 changes: 18 additions & 0 deletions 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>
15 changes: 15 additions & 0 deletions 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>';
}

0 comments on commit dca3f99

Please sign in to comment.