<div class="container">
  <h1>Generate A Random Silly Hyperbole</h1>
  <div id="random-name"></div>
  <button class="btn btn-primary" id="generate">Generate Another</button>
  <h6>Thanks to <a href="https://codepen.io/codebubb/pen/xBKOpb"> James</a> for the starter JS</h6>
  <script src="script2.js"></script>
  <link rel="stylesheet" href="style.css" />
#random-name {
  margin-left: 15%;
  padding: 1rem;
  font-family: Arial;
  font-size: 21px;
  font-weight: 700;
  color: blue;

h1 {
  font-family: "Garamond", sans-serif;
  padding-left: 15% ;
  padding-top: 15px;

p {
  font-family: "Arial",

h6 {
  padding-left: 1rem;
  padding-top: 3rem;

#generate {
  min-height: 35px;
  color: white;
  font-size: 14px;
  font-weight: 900;
  margin: 5rem;
  padding: 12px;
  background: blue;
  width: 25%;

.btn-primary {
  width: 150px;
  padding: 15px;
const whoIs = [
  "It was",
  "She was",
  "He was",
  "I was",

const tense = [

const connector = [

const adjective = [
  "more weird",
  "more hairy",
  "more bull-headed",

const noun = [
  "a french fry",
  "a hot dog",
  "sour watermelon",
  "sticky cotton candy",
  "crooked toes",
  "a three-legged dog",
  "a rollie pollie",
  "a gypsie",
  "a badger",
  "a sweet pea",
  "a chicken nugget",
  "a frog hair",
  "a crunchy pickle",
  "a buttered biscuit",
  "a herd of turtles",
  "a southbound goat",
  "an ice cream cone",
  "a long-tailed cat",
  "a polar bear"

/*action or location*/
const actionLocation = [
  "on a hot day at the fair",
  "in Alaska",
  "at the farm",
  "in the woods",
  "a mile away",
  "in the hills",
  "on the freeway",
  "at the barn",
  "in the neighborhood",
  "in July",
  "riding a dinosaur",
  "split 4 ways",
  "doing somersaults",
  "running a long mile",
  "in a pepper patch",
  "trying to saddle a junebug",
  "in a room full of rockers"

const getRandomNumber = max => Math.floor(Math.random() * max);

const getRandomHyperbole = () =>
  `${whoIs[getRandomNumber(whoIs.length)]} ${
      adjective[getRandomNumber(adjective.length)]} ${
      connector[getRandomNumber(connector.length)]} ${
      noun[getRandomNumber(noun.length)]} ${

const setRandomHyperbole = () => {
  document.getElementById("random-name").innerText = getRandomHyperbole();

document.getElementById("generate").addEventListener("click", setRandomHyperbole);


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.