Permalink
Showing
with
69 additions
and 0 deletions.
- +1 −0 mocking-sponge/.gitignore
- +2 −0 mocking-sponge/README.md
- BIN mocking-sponge/img/spongebob.jpg
- +32 −0 mocking-sponge/index.html
- +28 −0 mocking-sponge/js/main.js
- +4 −0 week-3/index.html
- +2 −0 week-3/js/main.js
@@ -0,0 +1 @@ | ||
|
@@ -0,0 +1,2 @@ | ||
# Mocking-SpongeBob | ||
Mocking SpongeBob Meme Creator |
Binary file not shown.
@@ -0,0 +1,32 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> | ||
<style> | ||
main{ | ||
display: flex; | ||
height: 100vh; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
</style> | ||
<title>Mocking SpongeBob</title> | ||
</head> | ||
<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> | ||
</main> | ||
<script src="js/main.js"></script> | ||
</body> | ||
</html> |
@@ -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; | ||
} |
@@ -1,12 +1,16 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>Week 3</title> | ||
</head> | ||
|
||
<body> | ||
<h1>Week 3</h1> | ||
<script src="js/main.js"></script> | ||
</body> | ||
|
||
</html> |
@@ -0,0 +1,2 @@ | ||
var variableName = "Test" | ||
console.log(variableName); |