From bbd855ed3193d3d3ad3e26d7fca9b12169ad3356 Mon Sep 17 00:00:00 2001
From: Sobit Prasad <66735394+sobitp59@users.noreply.github.com>
Date: Sun, 31 Oct 2021 09:04:15 +0530
Subject: [PATCH] Create Story Generator

---
 Story Generator | 122 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 Story Generator
diff --git a/Story Generator b/Story Generator
new file mode 100644
index 00000000..9616caa6
--- /dev/null
+++ b/Story Generator	
@@ -0,0 +1,122 @@
+<!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;
+      background-color: blueviolet;
+    }
+
+    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>
+      //1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS
+
+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];
+}
+
+
+//STORY
+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'];
+
+
+
+randomize.addEventListener('click', result);
+
+//--------------------------//
+function result() {
+
+var newStory = storyText;
+var xItem = randomValueFromArray(insertX);
+var yItem = randomValueFromArray(insertY);
+var zItem = randomValueFromArray(insertZ);
+
+var newStory = newStory.replace(':insertx:',xItem);
+var newStory = newStory.replace(':insertx:',xItem);
+var newStory = newStory.replace(':inserty:',yItem);
+var newStory = newStory.replace(':insertz:',zItem);
+
+  if(customName.value !== '') {
+    var name = customName.value;
+    newStory = newStory.replace('Bob',name);
+
+  }
+
+  if(document.getElementById("uk").checked) {
+    var weight = Math.round(300/14 + 'stone');
+    var temperature =  Math.round((94-32)*(5/9) + 'centigrade');
+    var newStory = newStory.replace('94 fahrenheit',temperature);
+    var newStory = newStory.replace('300 pounds',weight);
+
+  }
+
+  story.textContent = newStory;
+  story.style.visibility = 'visible';
+}
+
+    </script>
+  </body>
+</html>
