-
-
Save chrisvfritz/3bd1b8d8e5b0d1ea2278ffbc561de047 to your computer and use it in GitHub Desktop.
Joke-a-tron 9000
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1 { | |
text-align: center; | |
} | |
#joke-box { | |
padding: 20px; | |
background-color: #f9f7f5; | |
} | |
#joke-box p:last-child { | |
margin-bottom: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// DATA | |
// ---- | |
// A couple jokes to start with | |
var jokes = { | |
'the horse': { | |
setup: 'A horse walks into the bar. The bartender asks...', | |
punchline: 'Why the long face?' | |
}, | |
'Orion\'s pants': { | |
setup: 'How does Orion keep his pants up?', | |
punchline: 'With an asteroid belt.' | |
} | |
} | |
// The message to display if the jokes object is empty | |
var noJokesMessage = 'I... I don\'t know any jokes. 😢' | |
// ------------- | |
// PAGE UPDATERS | |
// ------------- | |
// Update the listed jokes, based on the jokes object | |
var jokesMenuList = document.getElementById('jokes-menu') | |
var updateJokesMenu = function () { | |
// Don't worry too much about this code for now. | |
// You'll learn how to do advanced stuff like | |
// this in a later lesson. | |
var jokeKeys = Object.keys(jokes) | |
var jokeKeyListItems = jokeKeys.join('</li><li>') || noJokesMessage | |
jokesMenuList.innerHTML = '<li>' + jokeKeyListItems + '</li>' | |
} | |
// Update the displayed joke, based on the requested joke | |
var requestedJokeInput = document.getElementById('requested-joke') | |
var jokeBox = document.getElementById('joke-box') | |
var updateDisplayedJoke = function () { | |
var requestedJokeKey = requestedJokeInput.value | |
jokeBox.textContent = requestedJokeKey | |
} | |
// Function to keep track of all other | |
// page update functions, so that we | |
// can call them all at once | |
var updatePage = function () { | |
updateJokesMenu() | |
updateDisplayedJoke() | |
} | |
// ------- | |
// STARTUP | |
// ------- | |
// Update the page immediately on startup | |
updatePage() | |
// --------------- | |
// EVENT LISTENERS | |
// --------------- | |
// Keep the requested joke up-to-date | |
requestedJokeInput.addEventListener('input', updateDisplayedJoke) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Joke-a-tron 9000</title> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"> | |
<link href="app.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="container"> | |
<h1>🤖 Joke-a-tron 9000 🤖</h1> | |
<div class="row"> | |
<div class="six columns"> | |
<p>Psst. I know a joke about...</p> | |
<ul id="jokes-menu"></ul> | |
</div> | |
<div class="six columns"> | |
<label>Tell me the joke about:</label> | |
<input id="requested-joke" type="text" class="u-full-width"> | |
<div id="joke-box"></div> | |
</div> | |
</div> | |
<hr> | |
<div class="row"> | |
<div class="six columns"> | |
<h2>Teach me a new joke 🤓</h2> | |
<label>The joke is about:</label> | |
<input type="text" class="u-full-width"> | |
<label>The setup is:</label> | |
<textarea class="u-full-width"></textarea> | |
<label>The punchline is:</label> | |
<textarea class="u-full-width"></textarea> | |
<button class="u-full-width"> | |
Remember this joke! | |
</button> | |
</div> | |
<div class="six columns"> | |
<h2>Erase my memory 😢</h2> | |
<label>I don't like the joke about:</label> | |
<input type="text" class="u-full-width"> | |
<button class="u-full-width"> | |
Forget about it! | |
</button> | |
</div> | |
</div> | |
</div> | |
<script src="app.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment