Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added mocking spongebob
  • Loading branch information
Alex Mueller committed Feb 5, 2020
1 parent cd6edd8 commit 2ea41fe
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 0 deletions.
1 change: 1 addition & 0 deletions mocking-sponge/.gitignore
@@ -0,0 +1 @@

2 changes: 2 additions & 0 deletions mocking-sponge/README.md
@@ -0,0 +1,2 @@
# Mocking-SpongeBob
Mocking SpongeBob Meme Creator
Binary file added mocking-sponge/img/spongebob.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions mocking-sponge/index.html
@@ -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>
28 changes: 28 additions & 0 deletions mocking-sponge/js/main.js
@@ -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;
}
4 changes: 4 additions & 0 deletions week-3/index.html
@@ -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>
2 changes: 2 additions & 0 deletions week-3/js/main.js
@@ -0,0 +1,2 @@
var variableName = "Test"
console.log(variableName);

0 comments on commit 2ea41fe

Please sign in to comment.