Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 13, 2015 19:42
Show Gist options
  • Save anonymous/8499aadd591d3459ad58 to your computer and use it in GitHub Desktop.
Save anonymous/8499aadd591d3459ad58 to your computer and use it in GitHub Desktop.
Download ZIP
ScriptEd Unit 6 Project: Madlibs // source http://jsbin.com/qorisi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/madlibs.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<title>ScriptEd Unit 6 Project: Madlibs</title>
<style id="jsbin-css">
.container
{
max-width: 768px;
}
#run-btn
{
margin-top: 10px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<h1>ScriptEd Unit 6 Project: Madlibs</h1>
<hr/>
<input type="text" class="form-control input-lg" id="plural-noun-1" placeholder="Enter a plural noun">
<input type="text" class="form-control input-lg" id="verb" placeholder="Enter a verb">
<input type="text" class="form-control input-lg" id="verb2" placeholder="Enter another verb">
<input type="text" class="form-control input-lg" id="ADJ" placeholder="Enter an adjective">
<input type="text" class="form-control input-lg" id="VERB3" placeholder="Enter a third verb">
<input type="text" class="form-control input-lg" id="JOB" placeholder="Enter an occupation">
<input type="text" class="form-control input-lg" id="TIME" placeholder="Enter a time period">
<button onclick="generateMadlib()" class="btn btn-success btn-lg">Generate MadLib</button>
<div id="result"></div>
</div>
<script id="jsbin-javascript">
function generateMadlib() {
// This is the starting story
var story = "Welcome to ScriptEd! Our mascot is the PLURAL_NOUN. We love to VERB! In ScriptEd we learn how to VERB2! It is ADJ to VERB3 this skill! By doing this we are preparing ourselves to become JOB in the TIME.";
var inputValue = document.getElementById("plural-noun-1").value;
story = story.replace("PLURAL_NOUN", inputValue);
inputValue = document.getElementById("verb").value;
story = story.replace("VERB", inputValue);
inputValue = document.getElementById("verb2").value;
story = story.replace ("VERB2", inputValue);
inputValue = document.getElementById("ADJ").value;
story = story.replace("ADJ", inputValue);
inputValue = document.getElementById("VERB3").value;
story = story.replace("VERB3", inputValue);
inputValue = document.getElementById("JOB").value;
story = story.replace("JOB", inputValue);
inputValue = document.getElementById("TIME").value;
story = story.replace("TIME", inputValue);
// This writes the story when the user clicks the "Generate MadLib" button"
document.getElementById("result").innerHTML = story;
}
</script>
<script id="jsbin-source-css" type="text/css">.container
{
max-width: 768px;
}
#run-btn
{
margin-top: 10px;
width: 100px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function generateMadlib() {
// This is the starting story
var story = "Welcome to ScriptEd! Our mascot is the PLURAL_NOUN. We love to VERB! In ScriptEd we learn how to VERB2! It is ADJ to VERB3 this skill! By doing this we are preparing ourselves to become JOB in the TIME.";
var inputValue = document.getElementById("plural-noun-1").value;
story = story.replace("PLURAL_NOUN", inputValue);
inputValue = document.getElementById("verb").value;
story = story.replace("VERB", inputValue);
inputValue = document.getElementById("verb2").value;
story = story.replace ("VERB2", inputValue);
inputValue = document.getElementById("ADJ").value;
story = story.replace("ADJ", inputValue);
inputValue = document.getElementById("VERB3").value;
story = story.replace("VERB3", inputValue);
inputValue = document.getElementById("JOB").value;
story = story.replace("JOB", inputValue);
inputValue = document.getElementById("TIME").value;
story = story.replace("TIME", inputValue);
// This writes the story when the user clicks the "Generate MadLib" button"
document.getElementById("result").innerHTML = story;
}</script></body>
</html>
Raw
jsbin.qorisi.css
.container
{
max-width: 768px;
}
#run-btn
{
margin-top: 10px;
width: 100px;
}
Raw
jsbin.qorisi.js
function generateMadlib() {
// This is the starting story
var story = "Welcome to ScriptEd! Our mascot is the PLURAL_NOUN. We love to VERB! In ScriptEd we learn how to VERB2! It is ADJ to VERB3 this skill! By doing this we are preparing ourselves to become JOB in the TIME.";
var inputValue = document.getElementById("plural-noun-1").value;
story = story.replace("PLURAL_NOUN", inputValue);
inputValue = document.getElementById("verb").value;
story = story.replace("VERB", inputValue);
inputValue = document.getElementById("verb2").value;
story = story.replace ("VERB2", inputValue);
inputValue = document.getElementById("ADJ").value;
story = story.replace("ADJ", inputValue);
inputValue = document.getElementById("VERB3").value;
story = story.replace("VERB3", inputValue);
inputValue = document.getElementById("JOB").value;
story = story.replace("JOB", inputValue);
inputValue = document.getElementById("TIME").value;
story = story.replace("TIME", inputValue);
// This writes the story when the user clicks the "Generate MadLib" button"
document.getElementById("result").innerHTML = story;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment