This course will be retired on January 24, 2020. We recommend "Introducing JavaScript" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn about the basics of HTML, forms, and working with JavaScript and CSS in mind.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
<title>MASH</title>
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
</head>
<body>
<h1 class="logo"><img src="img/mash-logo.svg" /></h1>
<p class="description">Fill in the blanks and your future will be foretold.</p>
<form action="" method="post" id="mash">
<div id="answers" class="hide">
<p>Your home is in <span id="location"></span> with a <span id="pet"></span> as you are a <span id="profession"></span> who owns a <span id="home"></span>.
</div>
<div class="bucket">
<div class="choice-bucket">
<h4 class="highlight">Where will you live?</h4>
<input name="location[]">
<input name="location[]">
<input name="location[]">
<input name="location[]">
</div>
<div class="choice-bucket">
<h4 class="highlight">Your future profession?</h4>
<input name="profession[]">
<input name="profession[]">
<input name="profession[]">
<input name="profession[]">
</div>
<div class="choice-bucket">
<h4 class="highlight">What's your future pet?</h4>
<input name="pet[]">
<input name="pet[]">
<input name="pet[]">
<input name="pet[]">
</div>
</div>
<input type="submit" value="Tell my fortune">
</form>
<script src=""></script>
</body>
</html>
-
0:00
[MUSIC]
-
0:04
Hi, my name is Joy, and
-
0:06
I'm excited to show you a little game I built called Mash.
-
0:10
It's a future telling game you can play again and again.
-
0:13
As usual in club courses, the code works beautifully already, but
-
0:17
it's up to you to mash it up and make it your own.
-
0:21
In this stage, you'll learn a bunch of new HTML code and
-
0:24
prepare the HTML to be used with CSS and JavaScript.
-
0:29
Let's take a look at the code and figure out what to do first.
-
0:33
For those of you that have never played Mash before,
-
0:36
here's a little preview of the game.
-
0:38
Mash stands for Mansion, Apartment, Shack, and
-
0:41
House, and if you fill in the blanks, your future will be foretold.
-
0:46
Now at the top of each column, there's a question, and
-
0:49
below are some text inputs for you or a friend to put your answers.
-
0:55
Then you press this button here at the bottom, and
-
0:58
your future will be told in a sentence at the top.
-
1:03
Now let's dive into the code and see what this looks like.
-
1:07
We'll start by changing the content, questions, and
-
1:10
number of input in each category.
-
1:13
So all the stuff in gray, and then how many text areas you want in each column.
-
1:20
Next, you'll play with some new HTML tags like form, div and span.
-
1:26
And lastly, we'll talk about how to set up our HTML so
-
1:30
it'll be ready when we want to add style and functionality.
-
1:33
Now, in this course, we're not going to worry about style and functionality.
-
1:37
So, not to disappoint and I hope you're ready, but
-
1:40
this is what the code is gonna look like at the end of this project.
-
1:45
This is just the HTML.
-
1:48
Stay tuned for all three courses and build a fun game for you and your friends.
You need to sign up for Treehouse in order to download course files.
Sign up