This project is a simple web-based calculator built with HTML, CSS, and JavaScript. It provides the essential features of a calculator, such as performing basic arithmetic operations including addition, subtraction, multiplication, and division. The calculator is designed with both button interaction and keyboard support, making it more flexible and user-friendly. Users can click on the on-screen buttons to input numbers and operators or use their keyboard to type directly into the display. Special keys are also supported: Enter executes the calculation, Backspace deletes the last character, and Escape clears the entire display.
The HTML structure of the project organizes the calculator into a display area and multiple rows of buttons, with dedicated keys for digits, operators, the decimal point, clear, delete, and the equals sign. The JavaScript file handles all the functionality, including appending values to the display, calculating results with the built-in eval() function, clearing the display, deleting individual characters, and managing keyboard events for input. The CSS styles provide a simple dark theme and use CSS Grid to neatly arrange the keys into separate rows. The buttons are styled to stand out clearly against the background, with the equals button highlighted as the main action key.
Overall, this project was created as a practice exercise in DOM manipulation, event handling, and layout design. It demonstrates how HTML, CSS, and JavaScript can work together to build a small interactive application that is both functional and visually consistent.
