egillespie/app.css

## app.css
h1 {
  text-align: center;
}

#joke-box {
  padding: 20px;
  background-color: #f9f7f5;
}

#joke-box p:last-child {
  margin-bottom: 0;
}

## app.js
// ----
// DATA
// ----

// A couple jokes to start with
const 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
const noJokesMessage = 'I... I don\'t know any jokes. 😢'

// -------------
// PAGE UPDATERS
// -------------

// Update the listed jokes, based on the jokes object
const jokesMenuList = document.getElementById('jokes-menu')
const 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.
  const jokeKeys = Object.keys(jokes)
  const jokeKeyListItems = jokeKeys.join('</li><li>') || noJokesMessage
  jokesMenuList.innerHTML = '<li>' + jokeKeyListItems + '</li>'
}

// Update the displayed joke, based on the requested joke
const requestedJokeInput = document.getElementById('requested-joke')
const jokeBox = document.getElementById('joke-box')
const updateDisplayedJoke = function () {
  const 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
const 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)

## index.html
<!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>
	h1 {
	text-align: center;
	}

	#joke-box {
	padding: 20px;
	background-color: #f9f7f5;
	}

	#joke-box p:last-child {
	margin-bottom: 0;
	}
	// ----
	// DATA
	// ----

	// A couple jokes to start with
	const 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
	const noJokesMessage = 'I... I don\'t know any jokes. 😢'

	// -------------
	// PAGE UPDATERS
	// -------------

	// Update the listed jokes, based on the jokes object
	const jokesMenuList = document.getElementById('jokes-menu')
	const 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.
	const jokeKeys = Object.keys(jokes)
	const jokeKeyListItems = jokeKeys.join('</li><li>') \|\| noJokesMessage
	jokesMenuList.innerHTML = '<li>' + jokeKeyListItems + '</li>'
	}

	// Update the displayed joke, based on the requested joke
	const requestedJokeInput = document.getElementById('requested-joke')
	const jokeBox = document.getElementById('joke-box')
	const updateDisplayedJoke = function () {
	const 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
	const 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)
	<!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>