<body>
    <div>
      <label for="customname">Enter custom name:</label>
      <input id="customname" type="text" placeholder="Yomi is not an option">
    </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>
    <p class="story"></p>
body {
      font-family: helvetica, sans-serif;
      width: 350px;
    }

    label {
      font-weight: bold;  
    }

    div {
      padding-bottom: 30px;
    }

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

    p {
      background: #FFC125;
      color: #5E2612;
      padding: 10px;
      visibility: hidden;
    }
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];
}
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']
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);
newStory = newStory.replace(':inserty:', yItem);
newStory = newStory.replace(':insertz:', zItem);
  if(customName.value !== '') {
    const name = customName.value;
    newStory= newStory.replace("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);
      newStory=newStory.replace('300 pounds', weight);
  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.