JSFiddle - React, Tailwind, and code Playground

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>
    <link rel="stylesheet" href="styles.css">
    
  </head>

  <body>
    <main>
        <div>
          <label for="customname">Enter custom name:</label>
          <input id="customname" type="text" placeholder="start typing">
        </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>
    </main>

    <script src="script.js"></script>
  </body>
</html>

CSS

main 
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
    padding: 10;
}
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;
}
.story
{
    width: 400px;
    height: 120px;
    border-radius: 10px;
    text-align: center;
    padding: 5%;
    box-shadow: 10px 10px #888888;
}

JavaScript

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

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", "spontaneously combusted"]


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

randomize.addEventListener('click', result);

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

  newStory = newStory.replace(/:insertx:/g, xItem).replace(":inserty:", yItem).replace(":insertz:", zItem)

  function fToC(fahrenheit) {
    // function to convert fahrenheit to centigrade
  const fTemp = fahrenheit;
  const fToCel = (fTemp - 32) * 5 / 9;
    return fToCel;
  } 

  function pToS(stones) {
    // function to Convert pounds to stones 
    return stones * 0.071429
  }


  if(customName.value !== '') {
    // If user type a custom name in the input
    let name = customName.value;
    newStory = newStory.replace(/bob/gi, name)
  }

  if(document.getElementById("uk").checked) {
    // If uk is checked, convert measures from US to UK standards
    let weight = Math.round(pToS(300)) + " stone";
    let temperature =  Math.round(fToC(94)) + " centigrade";
    newStory = newStory.replace(/94 fahrenheit/g, temperature).replace(/300 pounds/g, weight)
  }

  story.textContent = newStory ;

  story.style.visibility = 'visible';
}
result();