Hello! Today you are going to make THIS!
All you'll need is a little JS, CSS, and HTML knowlage to get started :)
Happy Coding ۜ\(סּںסּَ` )/ۜ

-- Road map --

HTML

File Setup
Code Setup
Comments
Textbox
Table
Table Data
Buttons

JS

Functions
insert(num)
equal()
empty()
back()

CSS

*
.main
.button
.button:hover
.textview
html

(~˘▾˘)~ HTML

`File Setup`

By now you should be familiar with most of the HTML setup steps. The visual aids are gone, the training wheels are off! If you need help you can always ask an instructor for help! ۜ\(סּںסּَ` )/ۜ

To get started create a new folder to store your files ( Right click => New => Folder ). You may name it whatever you'd like but make it something meaningful to you!

Inside of the new folder create a new file and name it index.html ( Right click => New => Text document ).

`Code Setup`

Add the following code to index.html
HINT! Type html and then press tab. It will save you some typing.

<!DOCTYPE html>
<html>

  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
  </body>

</html>

This is the standard index.html setup you have seen 100 times, but what's new?

<style></style> tag holds our CSS code.
<script></script> tag holds our JS code.
<body></body> tag holds our HTML code.

Everything we need is right here! We don't have to worry about making several different files. 🎉 Yay! 🎉

`Comments ＼(^▽^)/`

You do not need to write any of the code in green.
These are comments, the computer ignores them.

It would be a good idea for you to 
This way you will know what is going on when you try to read your code later on!

Please add the following code to your index.html

This div will hold all of the buttons and text that we will see on the page.

Add a comment about what the 'main' div is doing, or your favorite video game (סּںסּَ`)

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
    <!-- Add the code below! -->
    <div class="main">
    </div>
    <!-- Add the code above! -->
  </body>
</html>

`Textbox`

We need a place for our numbers to appear. Like the screen on a normal calculator.

Use the following code to get a textbox for our calculator

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
    <div class="main">
      <!-- Add the code below! -->
      <form name="form">
        <input class="textview" name="textview" type="text">
      </form>
      <!-- Add the code above! -->
    </div>
  </body>
</html>

You should have the following

Not much of a calculator... But it's a start!

`Table`

We are going to use a Table to arange the buttons.

Why should we use a table?

How many rows should we make? Why that many?

If you know why 
or
Quiz an instructor!

You can use THIS! as a reference.

Add the following - ⦿⽘⦿

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
    <div class="main">
      <form name="form">
        <input class="textview" name="textview" type="text">
      </form>
      <!-- Add the code below! -->
      <table>
        <tr>

        </tr>
        <tr>

        </tr>
        <tr>

        </tr>
        <tr>

        </tr>
        <tr>

        </tr>
      </table>
      <!-- Add the code above! -->
    </div>
  </body>
</html>

`Table Data`

Next we have to add a table data <td></td> for each button on the calculator

How many buttons are there on each row? Reference

Four: C, <, /, *
Four: 1, 2, 3, +
Four: 4, 5, 6, -
Four: 7, 8, 9, =
Two!

What are the last two buttons?

Add the following - •|龴◡龴|•

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
    <div class="main">
      <form name="form">
        <input class="textview" name="textview" type="text">
      </form>
      <!-- Add the code below! -->
      <table>
        <!-- Four: C, <, /, * -->
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
      <!-- Add the code above! -->
    </div>
  </body>
</html>

Add comments reminding you what button belong in each row.

`Buttons`

Time to add some buttons to our calculator!

We are going to use input to make all of the buttons.

<input class="button" type="button" onclick="" value="">

type="button" makes our 'input' a button.
class="button" is so that we can style our button later.

What do you think onclick="" does?
Write you answer as a comment or ask an instructor! ʕノ◔ϖ◔ʔノ

Add a button to each td

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
    <div class="main">
      <form name="form">
        <input class="textview" name="textview" type="text">
      </form>
      <!-- Add the code below! -->
      <table>
        <tr>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value=""></td>
          <td><input class="button" type="button" onclick="" value=""></td>
        </tr>
      </table>
      <!-- Add the code above! -->
    </div>
  </body>
</html>

🎉 WE HAVE BUTTONS! 🎉

But out buttons do not mean anything, lets add some lables! ＼(●~▽~●)

To add text to our buttons we need to change the value="" attribute.
For the "1" button we change value to value="1"

<td><input class="button1" type="button" id="" onclick="" value="1" ></td>

This is what we end up with ༼ つ ◕_◕ ༽つ Reference

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
    <div class="main">
      <form name="form">
        <input class="textview" name="textview" type="text">
      </form>
      <!-- Add the code below! -->
      <table>
        <tr>
          <td><input class="button" type="button" onclick="" value="C"></td>
          <td><input class="button" type="button" onclick="" value="<"></td>
          <td><input class="button" type="button" onclick="" value="/"></td>
          <td><input class="button" type="button" onclick="" value="*"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value="1"></td>
          <td><input class="button" type="button" onclick="" value="2"></td>
          <td><input class="button" type="button" onclick="" value="3"></td>
          <td><input class="button" type="button" onclick="" value="+"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value="4"></td>
          <td><input class="button" type="button" onclick="" value="5"></td>
          <td><input class="button" type="button" onclick="" value="6"></td>
          <td><input class="button" type="button" onclick="" value="-"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value="7"></td>
          <td><input class="button" type="button" onclick="" value="8"></td>
          <td><input class="button" type="button" onclick="" value="9"></td>
          <td><input class="button" type="button" onclick="" value="="></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="" value="0"></td>
          <td><input class="button" type="button" onclick="" value="."></td>
        </tr>
      </table>
      <!-- Add the code above! -->
    </div>
  </body>
</html>

Our buttons now have some text! (づ｡◕‿‿◕｡)づ

We are done!

Well kinda (´･ω･`)
We are done programming in HTML:)

Next we will add some (ﾉ◕ヮ◕)ﾉ JS to our program so that the buttons actually do things.

(ﾉ◕ヮ◕)ﾉ JS

JS will make our buttons interactable.

`Functions`

A function is a block of code that does the same task whenever you tell it to. Kind of like training your dog to do tricks. You say sit, the dog sits. You say stay, the dog stays. Sit and stay are basically 'dog functions.'

What is another example of a 'dog function?'

Computer functions look a little different. Lets break it down.

function addOne(num) { // ~(˘▾˘~)
  num++;
}

What do you think this function is does? Quiz an instructor!

We have to tell the computer that we are making a new function.
We do this by starting our code with function

When we want to 'call' this function we will have use its name.
This function has a name of addOne

Sometimes functions need some extra information. Like where to draw the hero or the health of an enemy.
This function needs one peice of extra informaiton (num)

Finally we need instructions for our function to follow.
This function's instructions are inbetween two curly brackets { num++; }

There are four different functions we have to write for our calculator.

insert(num)
equal()
empty()
back()

insert(num)
insert(num) will take in a number and add it to the text box.
Apply this function to 1, 2, 3, 4, 5, 6, 7, 8, 9, '/', '*', '-', '+', and '.'

equal()
equal() will evaulate the expression in the text box.
Apply this function to '='

back()
back() will act like a 'backspace' for our calculator.
Apply this function to '<'

empty()
empty() will clear out the text in our text box.
What button will this function apply to?

`insert(num)`

Find the script tags you wrote earlier. This is where we will write all of our JS Functions

Write the following code.

<script>
  function insert(num) {
    document.form.textview.value = document.form.textview.value + num
  }
</script>

How do you change the name of the funciton? Ask an instructor!

Now that the function is written we can attach it to our buttons.

We will add this function to the onclick="" part of every button that it needs to be applied to. (Look above for list)

Do it just like this for all of the numbers.

<td><input class="button" type="button" onclick="insert(1)" value="1"></td>

(ᵔᴥᵔ) For '/', '*', '-', '+', and '.' we need to use quotes ''

<td><input class="button" type="button" onclick="insert('+')" value="1"></td>

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Calc!</title>
  </head>

  <style>
  </style>

  <script>
  </script>

  <body>
    <div class="main">
      <form name="form">
        <input class="textview" name="textview" type="text">
      </form>
      <!-- Add the code below! -->
      <table>
        <tr>
          <td><input class="button" type="button" onclick="" value="C"></td> <!-- No onclick="insert()" function here! -->
          <td><input class="button" type="button" onclick="" value="<"></td> <!-- No onclick="insert()" function here! -->
          <td><input class="button" type="button" onclick="insert('/')" value="/"></td>
          <td><input class="button" type="button" onclick="insert('*')" value="*"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="insert(1)" value="1"></td>
          <td><input class="button" type="button" onclick="insert(2)" value="2"></td>
          <td><input class="button" type="button" onclick="insert(3)" value="3"></td>
          <td><input class="button" type="button" onclick="insert('+')" value="+"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="insert(4)" value="4"></td>
          <td><input class="button" type="button" onclick="insert(5)" value="5"></td>
          <td><input class="button" type="button" onclick="insert(6)" value="6"></td>
          <td><input class="button" type="button" onclick="insert('-')" value="-"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="insert(7)" value="7"></td>
          <td><input class="button" type="button" onclick="insert(8)" value="8"></td>
          <td><input class="button" type="button" onclick="insert(9)" value="9"></td>
          <td><input class="button" type="button" onclick="" value="="></td> <!-- No onclick="insert()" function here! -->
        </tr>
        <tr>
          <td><input class="button" type="button" onclick="insert(0)" value="0"></td>
          <td><input class="button" type="button" onclick="insert('.')" value="."></td>
        </tr>
      </table>
      <!-- Add the code above! -->
    </div>
  </body>
</html>

🎉 Congrats! 🎉 We now have a super inefficient keypad. ¯\_(ツ)_/¯

We are actually only one function away from making our calculator work. Everything else just makes it easier to use and look better. ヽ(´▽｀)ノ

`equal()`

This function will do the 'heavy lifting' for our calculator.

<script>
  function equal() {
    let val = document.form.textview.value;
    if(val){
      document.form.textview.value = eval(val)
    }
  }
</script>

Next add the funciton to the '=' button.

<td><input class="button" type="button" onclick="equal()" value="="></td>

Check it out! (づ￣ ³￣)づ

You have offically made a HTML/JS calculator. We could stop here but our calculator isn't supper easy to use and it looks kinda ugly.

The next sections will address this:)

What is a function? Explain it to an instructor.

Write a comment explaining it.

Warning!

After this point I will give you only small sections of source code.
It is up to you to fill in the gaps. ﴾͡๏̯͡๏﴿ O'RLY?

You may still ask an insturctor for help but no source code will be given.

Happy Coding ۜ\(סּںסּَ` )/ۜ

`empty()`

The empty function will reset our text box. Just like 'Clear' on a calculator.

Add this code to the script section.

<script>
  ????? empty() {
    document.form.textview.value ="";
  }
</script>

Something is missing! What?

Make sure to add the correction to your code.

Next: Attach the "empty()" function to the 'C' button.
Just like we did with equal()!

We now have the following:

`back()`

The back() function will 'backspace' our input

Add this code to the script section.

<script>
function ????? () {
  var exp = document.form.textview.value;
  document.form.textview.value = exp.substring(0,exp.length-1)
}
</script>

Something is missing! What?

Make sure to add the correction to your code.

Next: Attach the "back()" function to the '<' button.
Just like we did with equal()!

We now have the following:

Our calculator is 100% functional! `(ง°○°)ง`

But it's ugly ༼ つ ಥ_ಥ ༽つ lets fix that.

♥‿♥ CSS

CSS will fix the ugly ♥‿♥

`*`

The '*' symbol is a wildcard meaning that it stands for everything (like a wild in Uno).
Any styles we put here will be applied to everything!
Most of the time this is used just to reset everything. Add the following code inside of the style tags.

<style>
  * {
    margin: 0px;
    padding: 0px;
  }
</style>

`.main`

The 'main' class holds the text box and all the buttons. Lets center it.

<style>
  .main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
</style>

We use the '.' to select all of the elements with the same class!
Next section you will only have the styling, add the correct slector to the code.

`.button`

The 'button' class is applied to each button on our calculator. Notice: You have to add some code! ⚆ _ ⚆ Look at the .main CSS code for hints.

<style>
  ????? {
    width: 50px;
    height: 50px;
    font-size: 25;
    margin: 2;
    background: rgba(95,199,239,.90);
    border:none;
  }
</style>

Lets add a hover effect to our button.

This is how I would add a hover effect to a class called "notAButton."
.notAButton:hover { ... }
How do you add that effect to the class "button?"

<style>
  ?????:????? {
    background: rgba(75,179,219,1);
  }
</style>

`.textview`

The "textview" class is applied to the textbox.
Lets make it the same size as everything else.
Notice: You have to add some code! (ಥ﹏ಥ) Look at the button CSS code for hints.

<style>
  ????? {
    text-align: right;
    /* Set the width to 192px */
    /* Set the height to 25px */
    margin-left:2px;
    /* Set the font-size to 25px */
    padding: 5px;
  }
</style>

`html`

"html" applies to everything that the <html></html> tags wrap. (basically everything)

<style>
  html {
    background: linear-gradient(#e66465, #9198e5);
    height:100%;
  }
</style>

One last thing lets add some "inline styles" to our two of our buttons.

This will make them fill in the blank space.
First, the '=' button.

<td rowspan="5"><input style="height:102px" class="button" type="button" onclick="equal()" value="="></td>

And now, the '0' button.

<td colspan="2"><input style="width:102px" class="button" type="button" onclick="insert(0)" value="0"></td>

And we are done!
ヽ(ﾟｰﾟ*ヽ)ヽ(*ﾟｰﾟ*)ﾉ(ﾉ*ﾟｰﾟ)ﾉ

HTML Calculator

-- Road map --

(~˘▾˘)~ HTML

`File Setup`

`Code Setup`

`Comments ＼(^▽^)/`

`Textbox`

`Table`

`Table Data`

`Buttons`

We are done!

(ﾉ◕ヮ◕)ﾉ JS

`Functions`

`insert(num)`

`equal()`

Warning!

`empty()`

`back()`

Our calculator is 100% functional! `(ง°○°)ง`

♥‿♥ CSS

`*`

`.main`

`.button`

`.textview`

`html`

\ (•◡•) / Final!

Insturctor Cheat Sheet

-- Road map --

(~˘▾˘)~ HTML

File Setup

Code Setup

Comments ＼(*^▽^*)/

Textbox

Table

Table Data

Buttons

We are done!

(ﾉ◕ヮ◕)ﾉ JS

Functions

insert(num)

equal()

Warning!

empty()

back()

Our calculator is 100% functional! (ง°○°)ง

♥‿♥ CSS

*

.main

.button

.textview

html

\ (•◡•) / Final!

Insturctor Cheat Sheet

`File Setup`

`Code Setup`

`Comments ＼(^▽^)/`

`Textbox`

`Table`

`Table Data`

`Buttons`

`Functions`

`insert(num)`

`equal()`

`empty()`

`back()`

Our calculator is 100% functional! `(ง°○°)ง`

`*`

`.main`

`.button`

`.textview`

`html`