Calculator

First let's talk about the HTML

• The HTML file contains just the basic buttons and the container of my whole calculator.
• html_file

On to the CSS

• I used Grid to design the whole layout
• As the Grid is now widely used among so many different web designs, the grid makes things look more aesthetic.
• CSS Grid is one of the main things in CSS nowadays and this project is the best way to improve my grid skills.
• I used a light background for the body to make it look more pleasing.

Now the main part ( THE JAVASCRIPT FILE )

• I used an Object-oriented approach to build this project.

• The main object is the calculator

• it takes two parameters which are previousnumber ( the number that was entered before) and current number (the number that is being entered now )

• The object calculator has certain methods

  • del() To delete the last digit of the current input
  • clear() To clear out the previous as well as current input and the operator
  • calc() To calculate the result
  • currentoperator() that watches for the operator and once an operator is selected the currentinput becomes the previousinput and the calculation goes on
  • appendInput responsible for adding the numbers to the currentand previous input
  • updateDisplay() is responsible for updating the display on the screen mainly on the calculator

What I learned doing this project:

• CSS GRID
• Object-oriented programing
• JS functionality
• Best practices