calculator instructions.txt

We will work on creating a calculator for next week's work with JavaScript.

Our goal is to create a calculator that looks exactly like the image calculator-spec.png, located in your day 5 folder.

A few things to know about this calculator:

* To get the symbols for math, you will need to look up their HTML codes. One place to do that is here: 

https://www.toptal.com/designers/htmlarrows/math/

https://www.toptal.com/designers/htmlarrows/arrows/

* The calculator buttons should be clickable. Next week, you'll program them. But for right now, somehow we need to code clickable buttons.

* Colors used in this de#clude:

- black: #000000
- white: #ffffff
- light grey: #d8d9db
- buttons on hover: #ebebeb
- button active state: #bbbcbe
- function buttons: #df974c
- function buttons on hover: #dfb07e
- function button active state: #dd8d37

* The overall width of this calculator is 400px.


Suggested approach:
* Create a wrapper with a width of 400px to set up the calculator.
* Determine how many rows and columns we need.
* Identify elements that occupy more than one column.
* Determine the HTML tags required to code rows and cells.
* Code a single row of 4 elements to start with and see if you can get that working.
* Now add the other rows of 4 elements.
* Finally, add the rows where there are fewer than 4 elements. What do you need to adjust to get these to work?
* Once your layout is mostly working, add the colors and make it pretty.