|
- Setup a webpage with a grid for buttons. Use divs to create rows. Add a class attribute: < div class="its_a_row"> so you can style them all together.
- Create 17 buttons: numbers 0-9, four main operators (+-/*), period, equal, clear.
- Think of the best layout for your calculator. Arrange them inside the rows as you prefer. Have all buttons run corresponding functions when you click on them.
HINT: all the Number buttons can run the same function. So can all the Operator buttons.
- Create another div above the buttons. This will be the output screen.
- In JavaScript, wire up the number buttons: clicking on them should make the corresponding number appear in the screen.
- Wire up the operator buttons. Have the operator symbol appear in the screen, unless the screen is empty.
- Wire up the period and clear buttons.
- Now hook up the Equal button to produce the result. Hint: look at the eval() function.
- Put your screen and buttons in a simple table and give it a border to resemble a calculator.
- Style your buttons and screen with CSS. Add a cool background image.
HINT: use button:hover and button:active to give your buttons responsive UI
- FOR EXTRA CREDIT:
(1) Add a delete button to take out the last character typed
(2) add Audio to each button press
(3) With this version, all input is written directly to the screen. Try a version where each set of numbers is saved to a stack, like an accountant’s calculator.
|
|
