Q4 : Random story generator

5 years ago · 931fe03f0f
parent bfa83984dd
commit 931fe03f0f
2 changed files with 117 additions and 0 deletions
--- a/Day1Exercise/Q4/index.html
+++ b/Day1Exercise/Q4/index.html
@ -0,0 +1,58 @@
 <!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>
    <script src="main.js"></script>
 </body>
 </html>
--- a/Day1Exercise/Q4/main.js
+++ b/Day1Exercise/Q4/main.js
@ -0,0 +1,59 @@
 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];
 }
 var 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.";
 var insertX = [
    "Willy the Goblin",
    "Big Daddy",
    "Father Christmas"];
 var insertY = ["the soup kitchen",
    "Disneyland",
    "the White House"];
 var insertZ = ["spontaneously combusted",
    "melted into a puddle on the sidewalk",
    "turned into a slug and crawled away"];
 // event handler
 randomize.addEventListener('click', result);
 function result() {
    var newStory = storyText;
    var xItem = randomValueFromArray(insertX);
    var yItem = randomValueFromArray(insertY);
    var zItem = randomValueFromArray(insertZ);
    // replace strings
    newStory = newStory.replaceAll(":insertx:", xItem);
    newStory = newStory.replaceAll(":inserty:", yItem);
    newStory = newStory.replaceAll(":insertz:", zItem);
    if (customName.value !== '') {
        let name = customName.value;
        newStory = newStory.replaceAll("Bob", name);
    }
    if (document.getElementById("uk").checked) {
        let weight = Math.round(300 / 14);   // pound to stone :  divide by 14
        let temperature = Math.round((94 - 32) * 5 / 9);  // F to C : (F - 32) * 5/9
        newStory = newStory.replaceAll("300 pounds", weight + " stones");
        newStory = newStory.replaceAll("94 fahrenheit", temperature + " celcius");
    }
    story.textContent = newStory;
    story.style.visibility = 'visible';
 }