Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
</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">
    
​
    <button onclick="generateMadlib()" class="btn btn-success btn-lg">Generate MadLib</button>
        
    <div id="result"></div>
        
    </div>
</body>
</html>
 
.container
{
    max-width: 768px;
}
​
#run-btn
{
    margin-top: 10px;
    width: 100px;
}
 
function generateMadlib() {
  
  // This is the starting story
  var story = "Welcome to ScriptEd! Our mascot is the PLURAL_NOUN.  We love to VERB! ";
  
​
  var inputValue = document.getElementById("plural-noun-1").value;
  story = story.replace("PLURAL_NOUN", inputValue);
  
  inputValue = document.getElementById("verb").value;
  story = story.replace("VERB", inputValue);
  
  // This writes the story when the user clicks the "Generate MadLib" button"
  document.getElementById("result").innerHTML = story;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
BIjessepro
0viewers