Created
November 22, 2019 13:20
-
-
Save navyasn/6408729bf8cc1b957ffd93d937f0ddcf to your computer and use it in GitHub Desktop.
Silly story generator // source https://jsbin.com/jewowib
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 id="jsbin-javascript"> | |
var customName = document.getElementById('customname'); | |
var randomize = document.querySelector('.randomize'); | |
var story = document.querySelector('.story'); | |
function randomValueFromArray(array){ | |
return array[Math.floor(Math.random()*array.length)]; | |
} | |
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."; | |
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() { | |
let newStory = storyText; | |
var xItem = randomValueFromArray(insertX); | |
var yItem = randomValueFromArray(insertY); | |
var zItem = randomValueFromArray(insertZ); | |
newStory = newStory.replace(/:insertx:/g, xItem); | |
newStory = newStory.replace(/:inserty:/g, yItem); | |
newStory = newStory.replace(/:insertz:/g, zItem); | |
if(customName.value !== '') { | |
var name = customName.value; | |
newStory.replace('/Bob/g', name); | |
} | |
if(document.getElementById("uk").checked) { | |
var weight = Math.round(weight/14) + 'stone'; | |
var temperature = Math.round((temperature-32) *5 )/9 + 'centigrade'; | |
} | |
story.textContent = ; | |
story.style.visibility = 'visible'; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> var customName = document.getElementById('customname'); | |
var randomize = document.querySelector('.randomize'); | |
var story = document.querySelector('.story'); | |
function randomValueFromArray(array){ | |
return array[Math.floor(Math.random()*array.length)]; | |
} | |
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."; | |
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() { | |
let newStory = storyText; | |
var xItem = randomValueFromArray(insertX); | |
var yItem = randomValueFromArray(insertY); | |
var zItem = randomValueFromArray(insertZ); | |
newStory = newStory.replace(/:insertx:/g, xItem); | |
newStory = newStory.replace(/:inserty:/g, yItem); | |
newStory = newStory.replace(/:insertz:/g, zItem); | |
if(customName.value !== '') { | |
var name = customName.value; | |
newStory.replace('/Bob/g', name); | |
} | |
if(document.getElementById("uk").checked) { | |
var weight = Math.round(weight/14) + 'stone'; | |
var temperature = Math.round((temperature-32) *5 )/9 + 'centigrade'; | |
} | |
story.textContent = ; | |
story.style.visibility = 'visible'; | |
} | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var customName = document.getElementById('customname'); | |
var randomize = document.querySelector('.randomize'); | |
var story = document.querySelector('.story'); | |
function randomValueFromArray(array){ | |
return array[Math.floor(Math.random()*array.length)]; | |
} | |
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."; | |
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() { | |
let newStory = storyText; | |
var xItem = randomValueFromArray(insertX); | |
var yItem = randomValueFromArray(insertY); | |
var zItem = randomValueFromArray(insertZ); | |
newStory = newStory.replace(/:insertx:/g, xItem); | |
newStory = newStory.replace(/:inserty:/g, yItem); | |
newStory = newStory.replace(/:insertz:/g, zItem); | |
if(customName.value !== '') { | |
var name = customName.value; | |
newStory.replace('/Bob/g', name); | |
} | |
if(document.getElementById("uk").checked) { | |
var weight = Math.round(weight/14) + 'stone'; | |
var temperature = Math.round((temperature-32) *5 )/9 + 'centigrade'; | |
} | |
story.textContent = ; | |
story.style.visibility = 'visible'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment