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 design include:
- 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.