The logic for the calculator needs to be implemented on the server. The client side will take in the values (in 2 input text fields) and the type of mathematical operation (selected using a button on the DOM). Each of the numerical values and type of mathematical operation will be bundled up in an object and then sent to the server via a POST. So when the object is sent, it should look something like this:
{
x: 3,
y: 4,
type: "Add"
}
Once the server receives it, build out logic to compute the numbers in 1 of 4 different ways. The server should be able to handle Addition, Subtraction, Multiplication, and Division. Once the calculation is complete, it should be sent back down to the client side app where it should be displayed on the DOM.
NOTE: You can send an object back as a response to a POST request or follow up the POST with a GET request to retrieve the data. Using a GET request to follow up is more common at Prime and will put you in a better position working on the History feature below.
Finally, build a 'clear' button that resets the whole experience.
History: Keep a historical record of all math operations on the server. Display a list of all previous calculations on the page when it loads. Update the list when a new calculation is made.
History:
3 * 5 = 15
4 - 2 = 2
4 * 3 = 12
3 + 6 = 9
,________, .----------, _Request_ .---------,
|________| ,'_________,'| -> | -> ,'________,'|
| HTML 5 | | jQuery | | | | _______ | |
| CSS | | | | | | Node.js | |
| Boot | <-- | | | | | Express | |
| strap | | | ; <- | <- | _______ | ;
|________| |___________|' _Response_ |_________|'
Client Client Logic Server
*Front End* *Back End*
- Created Git Repo, Setup File Structure, Install node modules Express, Body-Parser
- Create two inputs for values to be entered
- Create buttons for Addition, Subtraction, Multiplication, Division that will show the the results via equals output
- Create the event listeners to capture input values
- Have the values bundled into an object
- Create POST app.post on server
- Create module for calculations
- Calculation:
- Make it so values of the object are set as variables in order to calculate the return value
- Make the values of Addition, Subtraction, Multiplication, Division set as an if statement to condition out the calculations
- Create class that links to creation of the object
- Create GET from the server to send the result to the the client side
- Create GET from the server to send the response & history as a string to append the DOM
- Create clear button to reset/clear:
- History
- Inputs
- Make it so the history list doesn't append with each calculation
- Make it so the history list so it doesn't load the last items in the array
- Style website
- Style buttons
- Used icomoon font icons to style buttons
- Convert the two values inputs to numerical buttons
- Allow the user to click on a numerical button and then a mathematical operation, then the numerical button again
- Create an equal button that sends all of the information to the server
- Create a button that allows the user to clear history, shouldn't be a GET or POST, but a delete request
- Allow a user to click on an entry in the history list to re-run that calculation that will display the answer on the calculator interface like a normal calculation