Creating Winter Mad Libs
This Wiki will walk you through the process of creating your own version of Winter Mad Libs. The full video tutorial can be found here.
// TO DO: EXPLAIN WHERE TO FIND THE STORIES // TO DO: ADD LINKS / RESOURCES SECTION
Table of Contents
3. Create Form Submit and Story Generation Functionality
4. Making This Tutorial Project Your Own
1. This first thing we want to do is create the required files for our project and connect them. This project will only require vanilla HTML, CSS, and JavaScript, so we won't be adding in additional libraries or frameworks. In your desired directory, create the following files:
MadLibs.html for the structure
MadLibs.css for the styling
MadLibs.js for added functionality
2. Configure the HTML Document
After the files have been created, open MadLibs.html. Create a basic HTML5 page by creating or copying the HTML5 boiler plate code.
Hint: If you're using Visual Studio code, you can type html:5 to render the boiler plate code for you. Not using Visual Studio Code? You can copy the HTML5 boiler plate code here.
After loading in the HTML5 boiler plate, update the <title> to reflect the name of the project (or whatever you see fit). Then, connect the other two files that will help us build Mad Libs (MadLibs.css and MadLibs.js).
In order to connect MadLibs.css, add a <link> to the <head> in MadLibs.html where rel="stylesheet" and href is equal to the local address of the MadLibs.css file.
To connect the MadLibs.js, add a <script> to the bottom of the <body> where the src is equal to the local address of the MadLibs.js file.
Hint: I always like to create some simple logic in my CSS and JavaScript files when I link them to my HTML just to make sure they're connected properly. If you would like to do the same, try this:
In MadLibs.css, add a rule to make the backgroud-color of the body blue. Use: body { background-color: blue; }.
In MadLibs.js, add an alert statement with a simple message like Hello. Use alert("Hello!");.
Open your MadLibs.html file in your favorite browser and you should notice that the background color of the document is blue and there should be an alert with the message you entered. If you notice one of these two things didn't happen, you may need to review the location you provided to the <link> or the <script>. Just make sure to remove these statements after you've validated the connections.
⭐ Checkpoint
At this current point, the MadLibs.html should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./madlibs.css">
<title>Mad Libs</title>
</head>
<body>
<!-- JS Script inclusion -->
<script src="./madlibs.js"></script>
</body>
</html>
3. Create the Document <header>
Now that the structure of the project has been created and all required files have been connected, let's create the <header> for our page. The header will tell users what our app is, give a description about the game, and tell users how to play the game. Feel free to get creative with this!
In the <body>, create a <header>. Inside of the <header> create the following:
-
An
<h1>with the title of our project -
An
<h2>with the subtitle of our project. For this, I will be using the name of the story the users will be creating. -
A
<p>with an explanation of the game
Here's what your <header> should look like:
<header>
<h1 >Winter Mad Libs</h1>
<h2>❄️Fun Facts About Winter ☃️</h2>
<p><strong>Mad Libs</strong> are stories with words removed and replaced by blank spaces. Fill in the blanks for a fun winter story! Make sure to think outside the box. The wackier the better!</p>
</header>
At this point, we have a very bare bones app! If you open MadLibs.html in your browser, you won't see a lot, but you will be able to see the content from the <header> we just created. Here's an example of what you should see:
4. Add Styling to the Header and Home Page
The styling for this app is completely optional as you may want to style your app a different way. The styling that I create in this tutorial is just what I think looks nice. Get as creative as you would like! Open MadLibs.css to get started.
- Add a Background: The first thing I'm going to tackle is the background. Let's add a rule that targets the
bodyto add a nice blue gradient.
body{
background-color: #63a4ff;
background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);
}
Now, when you take a look at this change in your browser, you may notice that the gradient is repeated for the height of our header section. That's not exactly what we want. It should span the height of the entire document, so add a rule to target the html and give it a height of 100%.
html{
height: 100%;
}
Hint: Gradients can be very tricky to work with, so don't feel like you always have to create them on your own. There are lots of designers and developers who have submitted their work to make our lives a little easier. The gradient being used here can be found here on EggGradients.com.
- Update the Document Font: Let's change the basic Times New Roman font within our app. Google has a whole repo of free fonts that can be added to your projects. They're free and easy to use. For this app, I'll be using
Poppins, but visit fonts.google.com to check out all of the fonts that are available.
Once the font has been selected on Google Fonts, they provide us with a <link> to use in the <head> of our HTML that will link the font so we can use it. We're going to copy all three links provided by Google and add them to our MadLibs.html in the <head> between the existing metadata and the link to MadLibs.css.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
After the links have been added to MadLibs.html, we will be able to use them in our CSS. In MadLibs.css, let's add a style to the existing body{} rule to set the font-family of our body to Poppins.
font-family: 'Poppins', sans-serif;
⭐ Checkpoint
At this point, your MadLibs.html should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./madlibs.css">
<title>Mad Libs</title>
</head>
<body>
<header>
<h1 >Winter Mad Libs</h1>
<h2>❄️Fun Facts About Winter ☃️</h2>
<p><strong>Mad Libs</strong> are stories with words removed and replaced by blank spaces. Fill in the blanks for a fun winter story! Make sure to think outside the box. The wackier the better!</p>
</header>
<!-- JS Script inclusion -->
<script src="./madlibs.js"></script>
</body>
</html>
At this point, your MadLibs.css should look like this:
html{
height: 100%;
}
body{
background: rgb(131,234,241);
background: linear-gradient(135deg, rgba(131,234,241,1) 9%, rgba(99,164,255,1) 99%);
font-family: 'Poppins', sans-serif;
}
- Create a Glassy Background for the Game Board: In order to make the game board stand out from the background, let's add some styling to play area. This will require us to make a slight adjustment to our structure. Let's create a container
<div>that will hold our<header>and soon our<main>. Give it theclass="container"so we can apply styles to it.
Note: Be sure to add this the new elements above the JavaScript inclusion tag.
<div class="container">
<header>
<h1 >Winter Mad Libs</h1>
<h2>❄️Fun Facts About Winter ☃️</h2>
<p><strong>Mad Libs</strong> are stories with words removed and replaced by blank spaces. Fill in the blanks for a fun winter story! Make sure to think outside the box. The wackier the better!</p>
</header>
</div>
Over in MadLibs.css, we're going to create a new rule to target the container class and give it a white background with 60% opacity. This is going to create the glassy effect for us.
.container{
background-color: rgba(255,255,255,.6 );
}
This looks nice, but we can make it look better by adding a border-radius and shadows. Let's give the container a border-radius of 20px and padding.
.container{
background-color: rgba(255,255,255,.6 );
padding: 30px 0;
border-radius: 20px;
}
Let's give the container some dimension by adding a shadow. Similar to the gradients from above, you don't have to be an expert at shadows to use them. I found lots of great shadows on getcssscan.com. Once I found one I liked, I just had to plug in the code! Let's update the .container rule with a shadow.
.container{
background-color: rgba(255,255,255,.6 );
padding: 30px 0;
border-radius: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
Things look ok now, but it's taking up a good majority of the width of the page. Let's provide some height and width restrictions so we can still see the nice gradient in the background.
.container{
background-color: rgba(255,255,255,.6 );
padding: 30px 0;
border-radius: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
min-width: 60vw;
max-width: 70vw;
min-height: 60vh;
max-height: 90vh;
margin: 0 auto;
}
The last styling adjustment we’ll make for now is adding a style to center the container in the middle of the screen so it doesn’t just stay at the top. There are lots of ways to do this, but I’m going to do it by adding flex to the parent of .container (which is the <body>) and telling it to align-items: center;. This will vertically align any child elements of body.
We need to add a rule for height here because the flex will vertically center the child items based on the height of it’s content, but we want it to be the whole page, so we increase the height of the container to be the height of the entire page. But then, we get a scroll bar on the side. This is because we have two elements with heights set to 100%. I wouldn’t use this in all cases because it can get messy, but since we know we only care about the card in the middle, we’re going to set the overflow of y to hidden as well.
Let's update the body{} rule:
body{
background: rgb(131,234,241);
background: linear-gradient(135deg, rgba(131,234,241,1) 9%, rgba(99,164,255,1) 99%);
font-family: 'Poppins', sans-serif;
height: 100%
display: flex;
align-items: center;
overflow-y: hidden;
}
⭐ Checkpoint
So far, we've completed the following:
✅ Created the structure for our Mad Libs projects
✅ Created our document <header>
✅ Created the initial styling for the project
At this point, your MadLibs.html should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./madlibs.css">
<title>Mad Libs</title>
</head>
<body>
<div class="container">
<header>
<h1 >Winter Mad Libs</h1>
<h2>❄️Fun Facts About Winter ☃️</h2>
<p><strong>Mad Libs</strong> are stories with words removed and replaced by blank spaces. Fill in the blanks for a fun winter story! Make sure to think outside the box. The wackier the better!</p>
</header>
</div>
<!-- JS Script inclusion -->
<script src="./madlibs.js"></script>
</body>
</html>
At this point, your MadLibs.css should look like this:
html{
height: 100%;
}
body{
height: 100%;
overflow-y: hidden;
background: rgb(131,234,241);
background: linear-gradient(135deg, rgba(131,234,241,1) 9%, rgba(99,164,255,1) 99%);
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
}
.container{
margin: 0 auto;
min-width: 60vw;
max-width: 70vw;
min-height: 60vh;
max-height: 90vh;
padding: 30px 0;
background-color: rgba(255,255,255,.6 );
border-radius: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
overflow-y: auto;
}
Here's what our project looks like so far:
