Simple calculator developed with HTML, CSS, JavaScript
------------FOR LIVE WORKING OF THIS PROJECT VISIT THIS LINK HERE------------------------------
// HTML
- Normal structured html file containing only outer div having:
- containing calculator's display(dark green).
- containing button div having numerous buttons and arranged row wise.
// CSS
- Outer div's display set to flex.
- arranged flex-direction as row(for row wise alignment of buttons).
- Calculator display designed to avoid overflow of contents by text wrapping.
- Color setting and size alignment.
- Contents of display aligned to right side.
- Buttons set with color, uniquely for "0" button and same for other button to replicate real-life calculator.
- Hover effect created for all buttons to show effects like box-shadow, radial-gradient coloring.
- On click setting button shadow to none for clicking effect.
//JavaScript
- Extracting content through:
- getElementById
- querySelectorAll
- Creating variable like operands and operator.
- EventListener added on click of buttons.
- Calculation is done through built in function "eval(operand1 + " " +operator+ " " + operand2)".
- Evaluation is done using if else statements of different operators(can be improved to switch statements).
- On click of AC button to clear content of display.