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';
+}