GoSkills
Help Sign up Share
Back to course

Putting It All Together - What We'll Build

Compact player layout Large player layout

Subscriber only lesson.

Sign up to this course to view this lesson.

View pricing

  • Lesson resourcesResources
  • Quick referenceReference
  • Transcript
  • Notes

About this lesson

Introduction to building a simple math flashcard app with JavaScript and Ajax.

Exercise files

Download this lesson’s related exercise files.

Putting It All Together - What We'll Build.docx
199.9 KB
Putting It All Together - What We'll Build - Solution.docx
200.4 KB

Quick reference

Putting It All Together - What We'll Build

Let's build a math flashcard app!

When to use

Go through these steps whenever you start a new project.

Instructions

Let's map out our plan...

- generate one random number between 1 and 10
- generate another random number between 1 and 10
- output those two numbers onto the screen
- create a form to enter the answer
    - input field
    - button to submit answer
    - button to show next flashcard
- determine what the correct answer should be
- compare user answer to the correct answer
- output correct answer to screen with message
    - correct answer
    - incorrect answer
- create code for next flashcard button
    - clear the screen of messages and old question
    - output new question
 

Hints & tips

  • Before you start any project, take a moment to write out a simple plan
  • Step by step is best!
  • 00:04 Okay, so we're at the end of the course here.
  • 00:06 In the next few videos, we'll build a fun little math flash card game,
  • 00:09 just to sort of revisit some of the things we learn throughout the course and
  • 00:12 have a little fun doing it.
  • 00:13 So do you remember flash cards from when you were a kid?
  • 00:16 Now what's 4 plus 8?
  • 00:17 The answer is 12, correct, that sort of thing.
  • 00:19 We'll need to use a little bit of math to do this and some if else statements but
  • 00:23 nothing too crazy.
  • 00:24 Just to give you an idea, it's gonna look a little something like this.
  • 00:27 Just 7 + 10, enter your answer, 6, wrong.
  • 00:30 This is a very basic set up, we're not gonna be doing HTML or
  • 00:34 CSS to make this look nice, you can do that later if you want.
  • 00:36 We're just gonna work on the actual functionality to build out this thing.
  • 00:39 So it should be a whole lot of fun, and let's jump right in and get started.
  • 00:42 I'm gonna pull up our script file here just to have an open file.
  • 00:45 Now, whenever you build something, it's always a good idea to take a few minutes
  • 00:48 and just map out what you're going to do, and a lot of people, a lot of experienced
  • 00:51 programmers, they just sort of do that in their head, and that's usually a mistake.
  • 00:55 You really just wanna write it out on a piece of paper, or
  • 00:57 pull up a notepad on your computer, and just take a couple of minutes and just
  • 01:01 make a list of the different steps that are gonna be involved in your project.
  • 01:05 You don't have to go into a lot of details, just very quickly,
  • 01:07 but it really clarifies things and makes things a lot easier down the road.
  • 01:10 Even simple tasks, even simple projects can spin out of control if you don't take
  • 01:14 a few minutes just to map out what you're gonna do.
  • 01:17 Let's go ahead and do that right now.
  • 01:18 And I'll just kinda show you the process that I personally use whenever
  • 01:21 I'm building something just to sort of clarify things in my own head.
  • 01:23 What are we doing here?
  • 01:24 We're building a math flash card app.
  • 01:27 What is that gonna need?
  • 01:28 Well, first of all, we're gonna need a couple of random numbers and
  • 01:30 we didn't talk about random numbers in the course,
  • 01:32 I'll show you how to do that in just a minute, its very quick and easy.
  • 01:34 So let's say the first thing we want is to generate one random number between
  • 01:38 one and ten.
  • 01:39 Now I'm just gonna kinda rough out a list here.
  • 01:41 We're also gonna need another number because there are two numbers here,
  • 01:44 generate another random number, see you notice we're not doing any code here,
  • 01:48 we're just in English mapping this out.
  • 01:50 After we generate them, we need to map them or
  • 01:52 we need to output them onto the screen, we know how to do that.
  • 01:55 Now we need a form so that our user can enter an answer.
  • 01:58 So, let's create a form to enter the answer, and
  • 02:00 that form needs an input field.
  • 02:03 This guy right here and a couple of buttons, right, one button to submit
  • 02:06 the answer and then another button to show the next flash card.
  • 02:09 So far so good, nothing too crazy yet.
  • 02:11 Next, before anything else happens,
  • 02:13 we need to know behind the scenes what the correct answer is supposed to be.
  • 02:17 So 7 +10, our program needs to know that the correct answer is 17,
  • 02:20 we need to build it up to do that, next we need to compare our user answer to what
  • 02:24 the correct answer is, that sounds like an If/Else statement, probably.
  • 02:28 Then we need to output the correct answer to the screen with a little message,
  • 02:31 whether the user got the answer right or wrong, basically, and
  • 02:35 that's pretty much it.
  • 02:36 We just now need to create the code for this next button, the next card, and
  • 02:41 what that will do is clear the screen of any old of messages like this thing,
  • 02:45 clear this from little box here and then clear these numbers and
  • 02:48 then replace them with a new question.
  • 02:51 So if we look through here, this is pretty much the whole thing,
  • 02:53 this is what we need to do.
  • 02:54 So I'm just gonna keep this up here and we'll refer back to it from time to time,
  • 02:57 but this is what we're gonna do, and
  • 02:58 this is what I always do whenever I build anything.
  • 03:00 Just take, it took us two minutes here, less than that,
  • 03:02 to just kind of write up what the steps are.
  • 03:05 And you can look at this and see, we're not doing any code here,
  • 03:08 we're just doing English, we're just writing out the steps in English,
  • 03:11 very informally, and we'll figure out how to do all of these things as we go along,
  • 03:15 but right now we just wanna get it on paper so we can refer back back to it.
  • 03:19 And like I said, it keeps, it helps to clarify later on when we get stuck and
  • 03:23 we get turned around and we don't know what we're doing and
  • 03:24 where we went wrong, we can refer back to our list and sort of take a beat and
  • 03:28 go okay, I need to do this now, and it just really helps.
  • 03:31 So, in the next video we'll jump right in, we'll start building this thing,
  • 03:34 it's gonna be a lot of fun.

Lesson notes are only available for subscribers.

AJAX Response
3m:24s
Create the Fill-Out Form
4m:30s
Share this lesson and earn rewards Google+ Facebook Twitter LinkedIn
Gift this course
Give feedback

How is your GoSkills experience?

I need help

Your feedback has been sent

Thank you

Back to the top

© 2019 GoSkills Ltd. Skills for career advancement