Skip to content
Browse files

Added mocking spongebob

  • Loading branch information
Alex Mueller
Alex Mueller committed Feb 5, 2020
1 parent cd6edd8 commit 2ea41fe33bcb778e5599fba86be205d6bb2d862c
@@ -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">
<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="^1.0/dist/tailwind.min.css" rel="stylesheet">
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
<title>Mocking SpongeBob</title>
<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="">editable</a> and reformats when you re-focus your cursor. Our developer messed up the code for this <a href="">SpongeBob Meme</a>. Instead of alternating caps, the title converts to uppercase. Fix this meme by editing the JavaScript function in this code.
<script src="js/main.js"></script>
@@ -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()

// Replace the old text with new text
this.innerText = memedText;
@@ -1,12 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Week 3</title> <title>Week 3</title>
</head> </head>

<body> <body>
<h1>Week 3</h1> <h1>Week 3</h1>
<script src="js/main.js"></script>
</body> </body>

</html> </html>
@@ -0,0 +1,2 @@
var variableName = "Test"

0 comments on commit 2ea41fe

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