Mad Libs Exemplar Project

In this example below you will see how to do a Mad Libs Exemplar Project with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rcmeisty, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rcmeisty ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mad Libs Exemplar Project</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<h1>Mad Libs Craziness!</h1>
<h2 id = "wholeSentence">I once saw a <span id ="randomAnimalWrite"></span> in the middle of <span id ="randomPlaceWrite"></span> who loved to <span id ="randomVerbWrite"></span> in <span id ="randomPlaceWrite2"></span></h2>
<body>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <p>Enter the name of three animals<br>
    <form id = "form0">
      <input class ="animalInput1" type="text" value=""></input> 
      <input class ="animalInput2" type="text" value=""></input>
      <input class ="animalInput3" type="text" value=""></input>
    </form>
  <p>Enter three verbs<br>
    <form id = "form1">
      <input class ="verbInput1" type="text" value=""></input>   
      <input  class ="verbInput2" type="text" value=""></input>
      <input  class ="verbInput3" type="text" value=""></input>
    </form>
  <p>Enter three cities<br>
    <form id = "form2" class = "pulse">
      <input  class ="placeInput1" type="text" value=""/>     
      <input class ="placeInput2" type="text" value=""/>
      <input class ="placeInput3" type="text" value=""/>
    </form>
<br></br>
<p>
<button class="button" id="button1" style="vertical-align:middle" type = "submit">Click here <span>to see a <span id = "another">another combination of a </span> MadLib!</span> </p>
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rcmeisty/mad-libs-exemplar-project-aJRJbB */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Lato:300');
input[type=text] {
  font-family:'Lato';
  color:gray;
  background:#d9d9d9;
  padding:10px 0px;
  text-align: center;
  width: 150px;
    transition: ease-in-out, width 5s ease-in-out;
 font-size: 18px; 
}

html {
  font-family: 'Lato';
  font-size: 16px;
  text-align: center;
}

span {color:red;
}

h2{

}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #d9d9d9;
  border: none;
  color: gray;
  text-align: center;
  font-size: 14px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color: gray;
}


/*Downloaded from https://www.codeseek.co/rcmeisty/mad-libs-exemplar-project-aJRJbB */
var animal1 = document.querySelector('.animalInput1');
var animal2 = document.querySelector('.animalInput2');
var animal3 = document.querySelector('.animalInput3');
var verb1 = document.querySelector('.verbInput1');
var verb2 = document.querySelector('.verbInput2');
var verb3 = document.querySelector('.verbInput3');
var place1 = document.querySelector('.placeInput1');
var place2 = document.querySelector('.placeInput2');
var place3 = document.querySelector('.placeInput3');
  
var animals = [
  animal1, 
  animal2, 
  animal3
];

var verbs = [
  verb1, 
  verb2, 
  verb3
];

var places = [
  place1, 
  place2, 
  place3
];

Array.prototype.randomElement = function() {
  return this[Math.floor(Math.random() * this.length)];
};

$("#wholeSentence").hide();
$("#another").hide();

$("#button1").click(function () {
  $("#randomPlaceWrite").html(places.randomElement().value);
  $("#randomPlaceWrite2").html(places.randomElement().value);
  $("#randomAnimalWrite").html(animals.randomElement().value);
  $("#randomVerbWrite").html = verbs.randomElement().value;
  $("#wholeSentence").show();
  $("#another").show();
})

Comments