Created
November 21, 2019 12:45
-
-
Save navyasn/0243c796bae4b293531d3145de6c4de6 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)]; | |
} | |
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; | |
if(customName.value !== '') { | |
var name = customName.value; | |
} | |
if(document.getElementById("uk").checked) { | |
var weight = Math.round(300); | |
var temperature = Math.round(94); | |
} | |
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)]; | |
} | |
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; | |
if(customName.value !== '') { | |
var name = customName.value; | |
} | |
if(document.getElementById("uk").checked) { | |
var weight = Math.round(300); | |
var temperature = Math.round(94); | |
} | |
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)]; | |
} | |
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; | |
if(customName.value !== '') { | |
var name = customName.value; | |
} | |
if(document.getElementById("uk").checked) { | |
var weight = Math.round(300); | |
var temperature = Math.round(94); | |
} | |
story.textContent = ; | |
story.style.visibility = 'visible'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment