Silly story generator

by crcabrera

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />

    <title>Silly story generator</title>

    <style>
      body {
        font-family: helvetica, sans-serif;
        width: 350px;
      }

      label {
        font-weight: bold;
      }

      div {
        padding-bottom: 20px;
      }

      input[type="text"] {
        padding: 5px;
        width: 150px;
      }

      p {
        background: #ffc125;
        color: #5e2612;
        padding: 10px;
        visibility: hidden;
      }
    </style>
  </head>

  <body>
    <div>
      <label for="customname">Enter custom name:</label>
      <input id="customname" type="text" placeholder="" />
    </div>
    <div>
      <label for="us">US</label
      ><input id="us" type="radio" name="ukus" value="us" checked />
      <label for="uk">UK</label
      ><input id="uk" type="radio" name="ukus" value="uk" />
    </div>
    <div>
      <button class="randomize">Generate random story</button>
    </div>
    <!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
    <p class="story"></p>
  </body>
</html>

JavaScript

// 1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS

const customName = document.getElementById("customname");
const randomize = document.querySelector(".randomize");
const story = document.querySelector(".story");

function randomValueFromArray(array) {
  const random = Math.floor(Math.random() * array.length);
  return array[random];
}

//2. RAW TEXT STRINGS

const storyText =
  "It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.";
const insertX = ["Willy the Goblin", "Big Daddy", "Father Christmas"];
const insertY = ["the soup kitchen", "Disneyland", "the White House"];
const insertZ = [
  "spontaneously combusted",
  "melted into a puddle on the sidewalk",
  "turned into a slug and crawled away",
];

// 3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION

randomize.addEventListener("click", result);

function result() {
  let newStory = storyText;
  const xItem = randomValueFromArray(insertX);
  const yItem = randomValueFromArray(insertY);
  const zItem = randomValueFromArray(insertZ);

  newStory = newStory
    .replaceAll(":insertx:", `${xItem}`)
    .replaceAll(":inserty:", `${yItem}`)
    .replaceAll(":insertz:", `${zItem}`);

  if (customName.value !== "") {
    const name = customName.value;
    newStory = newStory.replaceAll("Bob", `${name}`);
  }

  if (document.getElementById("uk").checked) {
    const weight = `${Math.round(300 / 14)} stone`;
    const temperature = `${Math.round((94 - 32) * (5 / 9))} centigrade`;

    newStory = newStory
      .replace("94 fahrenheit", temperature)
      .replace("300 pounds", weight);
  }

  story.textContent = newStory;
  story.style.visibility = "visible";
}