Safaldas G

Building a Simple Calculator App: A Step-by-Step Guide

safaldas -

In this tutorial, we'll walk you through the process of creating a simple calculator application using HTML, CSS, and JavaScript. This hands-on project will help you understand how to manipulate the DOM, handle user interactions, and implement basic arithmetic operations.

Task 1: Setting Up the HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Simple Calculator</title>
</head>
<body>
  <div class="calculator">
    <!-- Calculator display -->
    <div class="display">0</div>
    
    <!-- Calculator buttons -->
    <div class="buttons">
      <!-- Buttons go here -->
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Task 2: Styling the Calculator

Create a styles.css file and add basic styling to the calculator elements.

/* Add styling to the calculator */
.calculator {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* Style the display */
.display {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: right;
  font-size: 24px;
  margin-bottom: 10px;
}

Task 3: Adding Buttons

Inside the .buttons div, add buttons for numbers and operators.

<!-- Inside the .buttons div -->
<button class="number">1</button>
<button class="number">2</button>
<!-- ... more number buttons ... -->
<button class="operator">+</button>
<button class="operator">-</button>
<!-- ... more operator buttons ... -->
<button class="equals">=</button>
<button class="clear">C</button>

Task 4: Basic Button Functionality

Create a script.js file and add the following code to handle button clicks.

document.addEventListener('DOMContentLoaded', () => {
  const display = document.querySelector('.display');
  const buttons = document.querySelectorAll('.number, .operator, .equals, .clear');
  let currentInput = '';
  
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      if (button.classList.contains('number')) {
        currentInput += button.textContent;
        display.textContent = currentInput;
      } else if (button.classList.contains('operator')) {
        // Handle operator logic
      } else if (button.classList.contains('equals')) {
        // Handle calculation
      } else if (button.classList.contains('clear')) {
        currentInput = '';
        display.textContent = '0';
      }
    });
  });
});

In the next part of this tutorial, we'll cover Tasks 5 through 17, including handling operator inputs, calculating results, decimal points, error handling, keyboard support, and more.

Stay tuned for the next installment of "Building a Simple Calculator App" where we continue to refine and enhance our calculator's functionality!