<!DOCTYPE html>
    <html lang="en-us">
    <head>
        <meta charset="utf-8" />
        <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>

        <script src="./storymaket.js" defer></script>
    </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>
// Get the references to the elements in HTML
const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

randomize.addEventListener('click', result); // Added eventListner to the button


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

function getCelciusFromFahrenheit(f){
  // Just a conversion function
    cel = (f - 32) * (5/9);
    return Math.floor(cel);

}

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"];

let 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.";

function result() {
  
    // This is the function that is being called when clicked
    // I just want to display the story text when the button is clicked
    // Below is a code of some meaningful string operations as demanded by the project
    // The real problem is nothing is being displayed when I click the button

    let newStory = storyText;   

    let xItem = randomValueFromArray(insertX);
    let yItem = randomValueFromArray(insertY);
    let zItem = randomValueFromArray(insertZ);

    if (customName.value !== ''){

        newStory = newStory.replace("Bob",customName.value);
    }

    let country = document.querySelector("input[name = 'ukus']:checked").value;

    if(country == "uk"){
        let temperature = getCelciusFromFahrenheit(94);
        let weight = Math.floor(300 / 14);

        newStory = newStory.replace("94 fahrenheit", `${temperature} centigrade`);
        newStory = newStory.replace("300 pounds", `${weight} stone`);
    }
    
    // This should do the job, but I have no idea why it is not. 
    story.textContent = newStory;

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.