Create your own version of a mad-lib. Be creative on your story. Your program mu
ID: 3745282 • Letter: C
Question
Create your own version of a mad-lib. Be creative on your story. Your program must have the following:
At least 7 Input Controls.
A button to “Reset” the form. This button clears all input controls on the page to allow user start over again.
Data validation. When user clicks on “Tell me the Story”, you need to check to make sure that the user has provided input for all input controls. If there are any input controls that have not been populated, you will display a warning message to the user. No story will be display. The warning message can be displayed via “alert()” function.
Additionally, you may add images, CSS to make your web page look "pretty". This is not required, though.
Explanation / Answer
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mad Libs</title>
<script type="text/javascript">
function madlibs() {
if (validateForm()) {
var name = document.getElementById("name").value;
var thing = document.getElementById("thing").value;
var color = document.getElementById("color").value;
var adjective = document.getElementById("adjective").value;
var verb = document.getElementById("verb").value;
var place = document.getElementById("place").value;
var noun = document.getElementById("noun").value;
var mystory = document.getElementById("mystory");
mystory.innerHTML = "There was a person whose name was " + name + ". He was very fond of " + thing + ". He had a collection of this particular thing in " + color +
". He once asked a " + verb + " programmer who wanted to use his creativity to " + verb + " the " + noun + " at " + place + "."
}
}
function reset() {
document.getElementById("myForm").reset();
}
function validateForm() {
var x = document.getElementById("name").value;
var y = document.getElementById("thing").value;
var z = document.getElementById("color").value;
var a = document.getElementById("adjective").value;
var b = document.getElementById("verb").value;
var p = document.getElementById("place").value;
var c = document.getElementById("noun").value;
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == "") {
alert("Any thing must be filled out");
return false;
} else if (z == "") {
alert("Color must be filled out");
return false;
} else if (a == "") {
alert("Adjective must be filled out");
return false;
} else if (b == "") {
alert("Verb must be filled out");
return false;
} else if (c == "") {
alert("Noun must be filled out");
return false;
} else if (p == "") {
alert("Place must be filled out");
return false;
}
else return true;
}
</script>
</head>
<body>
<h1>
Mad Libs</h1>
<form id="myForm" method="post">
<p>
Any persons name that comes to your mind:</p>
<input type="text" id="name" />
<p>
Any thing that comes to your mind:</p>
<input type="text" id="thing" />
<p>
Colors:</p>
<input type="text" id="color" />
<p>
Any Adjective</p>
<input type="text" id="adjective" />
<p>
A verb that doesn't end with 'ing'</p>
<input type="text" id="verb" />
<p>
Type a noun</p>
<input type="text" id="noun" />
<p>
Type a place</p>
<input type="text" id="place" />
</form>
<br />
<button id="reset">
Reset</button>
<br />
<input type="submit" value="Create story" id="libbutton" />
<br />
<textarea rows="4" cols="50" id="mystory"></textarea>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.