🛠 What I Made:

I built a JavaScript Calculator that performs basic arithmetic operations like addition, subtraction, multiplication, and division. The calculator features:

  • Buttons for each digit (0-9) and operation (+, -, *, /).

  • A display screen that shows the input and results.

  • A clear button to reset the calculation.

💻 How I Made It:

  1. HTML Structure:

  • Designed the calculator layout with buttons for numbers and operations, a display screen (#display), and a reset button (C).

  • Organized the layout into rows and columns using a simple grid layout for better visual alignment.

  1. CSS Styling:

  • Styled the calculator with a modern look, using box shadows, rounded corners, and a clean color scheme.

  • Ensured that the calculator is responsive for smaller screens by adjusting the button sizes and layout using media queries.

  • Added hover and active button effects to improve user interactivity.

  1. JavaScript Functionality:

  • Defined a display variable to show the input or result in the calculator.

  • Created an array of button elements that correspond to digits and operations.

  • Added event listeners for each button to:

  • Append digits or operations to the display when clicked.

  • Evaluate the expression when the equals button (=) is pressed.

  • Clear the display when the clear button (C) is clicked.

  • Utilized JavaScript’s eval() method to evaluate the mathematical expression entered by the user.

  • Operations and Calculation Logic:

  • Handled basic arithmetic operations: addition, subtraction, multiplication, and division.

  • The calculator also properly manages operator precedence and parentheses.

  1. Error Handling:
  • Included error handling for cases like division by zero or invalid input, ensuring the calculator doesn’t break unexpectedly.

📚 What I Learned:

  1. Event Handling and DOM Manipulation:

  • I learned how to handle click events for the calculator’s buttons and how to dynamically update the display using JavaScript.

  • Manipulating the DOM to update the UI in real-time was an important skill I developed in this project.

  1. JavaScript Functions:
  • I improved my understanding of functions in JavaScript, particularly how to define them for specific tasks like performing calculations, appending input to the display, and clearing the screen.
  1. Math Operations and Eval Method:
  • I gained knowledge of how to use JavaScript's built-in eval() function for evaluating mathematical expressions. I also learned the importance of error handling in case of invalid operations.
  1. CSS Layout and Design:
  • I enhanced my skills in creating flexible layouts using CSS, such as using the grid layout for organizing buttons and ensuring a responsive design for mobile screens.
  1. Interactive UI Design:

  • I refined my ability to make interactive UI elements that respond to user input through hover effects, click actions, and smooth transitions.

  • Learning how to create a user-friendly interface for a calculator with clean and modern design elements was a valuable experience.

  1. Debugging and Optimization:
  • I faced challenges related to ensuring correct calculations and handling edge cases like invalid inputs. Debugging these issues helped me improve my problem-solving skills.

In summary, the JavaScript Calculator project strengthened my abilities in HTML, CSS, and JavaScript. I learned how to combine dynamic event handling, math operations, and UI design to create a fully functional web-based application. The project enhanced my skills in handling user interactions and debugging real-time applications.