Part 1 - HTML
Here we need to place the HTML code to tell it where to generate the story and what elements to use to do so.
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
<ul>
<li><input type="text" id="personName1" placeholder="person's name"></li>
<li><input type="text" id="personName2" placeholder="person's name"></li>
<li><input type="text" id="city" placeholder="name of a city"></li>
<li><input type="text" id="adj1" placeholder="adjective"></li>
<li><input type="text" id="adj2" placeholder="adjective"></li>
<li><input type="text" id="adj3" placeholder="adjective"></li>
<li><input type="text" id="adj4" placeholder="adjective"></li>
<li><input type="text" id="noun1" placeholder="plural noun"></li>
<li><input type="text" id="noun2" placeholder="noun"></li>
<li><input type="text" id="number1" placeholder="number"></li>
</ul>
<button id="submit">Create Story</button>
<div id="story"></div>
Part 2 - CSS
The CSS section is fairly simple to manipulate to your liking.
Example:
#story{ font-family: arial;
font-size: 30px; }
p{ line-height: 45px; }
.person{ font-weight: bold;
font-size: 40px;
color: green; }
.city{ font-weight: bold;
font-size: 40px;
color: blue; }
.adj{ font-weight: bold;
font-size: 40px;
color: red; }
.noun{ font-weight: bold;
font-size: 40px;
color: purple; }
.number{ font-weight: bold;
font-size: 40px;
color: orange; }
Part 3 - jQuery
For the jQuery part we'll need access to the newest jQuery library. Luckily all you have to do is take this tag from right below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and throw it into your header or footer!
The section below will show you how to create your story and have the mystery words pop up wherever you please.
Example:
$(document).ready(function(){ //document is ready to function
"use strict";
$("#story").hide(); //hides story element
//show the #story when the submit button is clicked
$("#submit").click(function(){
$("#story").show();
//create a variable and get element of #personName1
var personName1 = document.getElementById("personName1").value;
//create a variable and get element of #personName2
var personName2 = document.getElementById("personName2").value;
//create a variable and get element of #city
var city = document.getElementById("city").value;
//create a variable and get element of #adj1
var adj1 = document.getElementById("adj1").value;
//create a variable and get element of #adj2
var adj2 = document.getElementById("adj2").value;
//create a variable and get element of #adj3
var adj3 = document.getElementById("adj3").value;
//create a variable and get element of #adj4
var adj4 = document.getElementById("adj4").value;
//create a variable and get element of #noun1
var noun1 = document.getElementById("noun1").value;
//create a variable and get element of #noun2
var noun2 = document.getElementById("noun2").value;
//create a variable and get element of #number1
var number1 = document.getElementById("number1").value;
//show #story and insert the values of each variable
document.getElementById("story").innerHTML = "<p>Hello, my name is <span class='person'>" + personName1 + "</span>, my friend <span class='person'>" + personName2 + "</span> and i have decided to venture beyond <span class='city'>" + city + "</span> and to the <span class='adj'>" + adj1 + "</span></p>";
});
});
Now test your new undertanding here with the codepen!
Here you can try plugging in your own styles to practice before you place it into your own site
You can click back and forth between the HTML, CSS, and jQuery tabs to see all the working components or click in the top right corner to enlarge the pen for a better look.
See the Pen mrNKzV by Alex Coy (@CoyFish) on CodePen.
