Back to course

Finishing Up

Locked lesson.

Upgrade

About this lesson

Create pages for Subtraction, Multiplication, and Division and finish the app.

Exercise files

Download this lesson’s related exercise files.

Finishing Up.docx
59.2 KB Finishing Up - Solution.docx
59.3 KB

Finishing Up

Let's finish the app up!

When to use

We're at the end!

Instructions

Now we just need to create pages for Subtraction, Multiplication, and Division. Copy and paste our Addition code into each one, and then just change the plus signs + to subtraction signs, multiplication signs, and division signs accordingly.

Our finished code including links to all pages looks like this:

<html>
<head>
       <title>Addition Flashcards</title>
       <script>
       var number1 = Math.floor((Math.random() * 10) + 1);
       var number2 = Math.floor((Math.random() * 10) + 1);
       var correctAnswer = number1 + number2;
       var output;
       </script>
   </head>

   <body>
<a href="addition.html">Addition</a> |
<a href="subtraction.html">Subtraction</a> |
<a href="multiplication.html">Multiplication</a> |
<a href="division.html">Division</a>

       <h1>Addition Flashcards</h1>

   <h1 id="numbers">
   <script>
       document.write(number1 + " + " + number2);
   </script>
</h1>

<input id="answer">
<button type="button" onclick="userAnswer();">Submit Answer</button>
<button type="button" onclick="nextCard();">Next Card</button>
<p id="output"></p>

<script>
   function userAnswer(){
       var userAnswer = document.getElementById("answer").value;

       if (isNaN(userAnswer)) {output = "Hey! That's not a number, try again!";} else {

       if (userAnswer == correctAnswer) {output = "Correct! " + number1 + " + " + number2 + " = " + correctAnswer;} else {output = "Wrong! " + number1 + " + " + number2 + " is not " + userAnswer;}
       }

       document.getElementById("output").innerHTML = output;
   }


function nextCard(){
   document.getElementById("output").innerHTML = "";
   document.getElementById("answer").value = "";

   number1 = Math.floor((Math.random() * 10) + 1);
number2 = Math.floor((Math.random() * 10) + 1);
correctAnswer = number1 + number2;
document.getElementById("numbers").innerHTML = (number1 + " + " + number2);

   }


</script>

   </body>
</html>

Hints & tips

Be sure to add links to all the other pages of your app!

00:04 We finished our Addition Flashcard page.
00:08 Now let's go ahead and create a page for subtraction, multiplication and division.
00:11 And we're just going to, like I said add a page for each one, and
00:15 we'll call each one subtraction.HTML, multiplication.HTML, and
00:19 division.HTML just like we called this one addition.HTML.
00:23 And there's a lot of different ways that you can do this.
00:25 And I'll talk about that in a minute.
00:26 But we're just gonna do it very basically just like this.
00:29 But before we do that, let's go ahead and add some links to this thing, so
00:32 that we can navigate around.
00:34 And I'm just gonna come up here above this guy and paste in these basic links.
00:40 And if you're familiar with HTML, this is just a basic
00:42 HTML link pointing to addition, subtraction, multiplication, and division.
00:46 So if we save this, come back here and hit reload and
00:48 we just have this sort of very basic menu on top.
00:50 And if you know HTML or CSS, go crazy, make this look nicer.
00:54 Use a nav bar, do whatever you want.
00:56 We're just gonna slap this in there.
00:57 So these don't go anywhere yet.
00:59 So if we come up here and click New File and call this subtraction.html.
01:05 And then click New File, multiplication.html.
01:11 And one more, New File, divison.html.
01:16 So what we wanna do is just come back to our addition.html page.
01:20 Copy this over to each one, and then kind of tweak it a little bit to
01:23 reflect the type of math that we're gonna be doing on that particular page.
01:27 Now before we do this, I should say, like I said earlier,
01:30 there's a bunch of different ways you can do this.
01:32 And frankly, better ways that you can do this.
01:35 But this is very quick and easy and we're coming towards the end of the course,
01:37 so we're just kinda roughing this in really quickly.
01:40 We're doing it the easiest way.
01:42 You don't have to create additional pages.
01:44 Maybe you can figure out how to do it all on one page.
01:47 You can use different functions, you can use different logic
01:50 programatically to make this all work on one page.
01:52 And I recommend,
01:53 I highly encourage you to try to do this when you're finished with this course.
01:56 Come back here and say, you know if I wanted to do this all on one page,
02:00 maybe all with one script, how would I do that?
02:02 And just give it a try.
02:03 It's actually a great way to learn and a lot of fun.
02:05 And it's always better to make your code more elegant,
02:09 to make your code as small as possible to create as few files as possible.
02:13 So there's no need to do all these additional files,
02:15 if you can think your way through it and find a quicker way and an easier way.
02:19 But like I said, for this we are just gonna do it this way, 'cause it's quick.
02:22 So I'm gonna hit Ctrl+A to copy all of this, Ctrl+A to highlight it,
02:25 Ctrl+C to copy it, or you can right-click and click Copy.
02:28 And then I'm gonna open the subtraction file and
02:30 I'm gonna click Ctrl+V to paste it in, or you can right-click and click Paste.
02:35 Up here it's addition.
02:36 I'm gonna change this to subtraction.
02:38 Just go through here, the correct answer is now -, instead of +, right?
02:43 And I'm just gonna come through here, and every time I see a +,
02:46 submit answer, here are our answer output.
02:52 We should probably change that.
02:54 Else, that, and what else?
03:00 Maybe our h1?
03:01 Yep, subtraction.
03:08 And then our next card function is the last one probably.
03:12 - and -.
03:14 So we save this, come back here and hit reload.
03:17 Click on our subtraction, 6- 8 is -2.
03:19 Submit Answer.
03:21 Correct.
03:22 Next card, 5- 6 is 44, wrong.
03:25 Okay, so we can switch back and forth.
03:27 Now if we save this, come back here to our multiplication, do the same thing.
03:34 Multiplication, switch this to the multiplication sign, multiplication.
03:42 Switch that, come down here, change that.
03:52 Change that.
03:54 And we're almost done.
03:55 Here and here.
04:01 Save that.
04:02 Copy this.
04:04 Very quickly, do the division.
04:14 Remember to forward slash for dividing.
04:16 Forward slash.
04:19 Forward slash.
04:24 Finally, forward slash and forward slash, save this, and it looks like we're done.
04:32 You can play around to make sure everything worked correctly,
04:34 but like I said, this is a very generic looking game.
04:36 You could spruce this up with images, CSS, a nice nav bar and anything you like.
04:40 You could center everything on the screen, whatever you want.
04:43 Have some fun with it.
04:44 But since this isn't really a course on HTML and CSS or
04:47 design at all, I'm gonna go ahead and skip that and let you do that if you want.
04:50 But feel free to play around with this, make it look however you'd like.
04:53 So there you have it, a very simple flash card app.
04:55 But fully functioning.
04:57 Pretty fun, you know? It didn't take us very long to make
04:59 at all, and I hope you enjoyed it.
05:00 So that's it for this course.
05:02 I hope you enjoyed the videos and got a lot out of them.
05:04 Mostly I hope you're excited about JavaScript and want to continue with your
05:08 JavaScript education, because JavaScript is a lot of fun, and it powers so
05:11 much of the Internet that it's really worth learning as much as you can.
05:14 But you're off to a great start so far.
05:17 So, my name is John Elder, and thank you for watching.

Lesson notes are only available for subscribers.

Finishing Up

About this lesson

Exercise files

Quick reference

Finishing Up

When to use

Instructions

Hints & tips