Build a Simple Calculator with HTML, CSS & JavaScript

Build a Simple Calculator with HTML, CSS & JavaScript JavaScript, Projects, HTML, CSS, Beginner Projects https://images.unsplash.com/photo-1581276879432-15e50529f34b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80

In this tutorial, we'll build a fully functional calculator from scratch. This is a perfect project for beginners to practice HTML structure, CSS styling, and basic JavaScript logic.

What we're building: A calculator with number buttons (0-9), operators (+, -, ×, ÷), equals (=), and clear (C) functions.

Step 1: HTML Structure

First, create the basic HTML structure for our calculator.

calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" readonly>
        <div class="buttons">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>+</button>
            <!-- Add more buttons here -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

Make it look like a real calculator with CSS.

style.css
.calculator {
  width: 300px;
  margin: 50px auto;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 20px;
  background: #f5f5f5;
}

.display {
  width: 100%;
  height: 50px;
  font-size: 24px;
  text-align: right;
  margin-bottom: 15px;
  padding: 10px;
  box-sizing: border-box;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  height: 50px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: white;
}

button:hover {
  background: #ddd;
}

Step 3: JavaScript Logic

Add functionality to make the calculator work.

script.js
// Get display element
const display = document.querySelector('.display');

// Add click event to all buttons
document.querySelectorAll('.buttons button').forEach(button => {
  button.addEventListener('click', function() {
    const value = this.textContent;
    
    if (value === 'C') {
      // Clear display
      display.value = '';
    } else if (value === '=') {
      // Calculate result
      try {
        display.value = eval(display.value);
      } catch {
        display.value = 'Error';
      }
    } else {
      // Append value to display
      display.value += value;
    }
  });
});

What You'll Learn

  • ✅ HTML structure for web apps
  • ✅ CSS Grid for button layouts
  • ✅ JavaScript event handling
  • ✅ Basic calculator logic
  • ✅ DOM manipulation

🚀 Take It Further

Challenge yourself: Add keyboard support, a backspace button, or a dark mode toggle!

📚 Resources

Comments

Post a Comment

Popular posts from this blog

5 JavaScript Console Methods You're Not Using (But Should Be)

5 JavaScript Console Methods You're Not Using (But Should Be) JavaScript, Debugging, Developer Tools, Productivity https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80 Everyone uses console.log() , but JavaScript's console object has powerful debugging methods that can save you hours. Here are 5 underused console methods that will make you a better debugger. 1. console.table() - View Arrays & Objects Beautifully Instead of expanding objects in the console, display them as a table. JavaScript const users = [ { name: 'Alice', age: 25, city: 'NYC' }, { name: 'Bob', age: 30, city: 'London' }, { name: 'Charlie', age: 35, city: 'Tokyo' } ]; console.table(users); // Displays a beautiful sortable table Use case: When working with arrays of objects (API responses, user data). 2. console.group() - Organize Your Logs...
Read more

How to Center a Div - The 3 Modern Ways (2026)

Centering a <div> used to be a meme in the CSS world because it was surprisingly hard. But in 2024, we have three clean, modern solutions. Here's how to do it properly. Method 1: Flexbox (Most Popular) CSS .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Full viewport height */ } When to use: Modern layouts, when you need to center both horizontally AND vertically. Method 2: CSS Grid CSS .container { display: grid; place-items: center; height: 100vh; } When to use: When working with grid-based layouts already. Method 3: The Classic Margin Auto CSS .centered-div { width: 300px; margin: 0 auto; } When to use: Simple horizontal centering only (still works perfectly!). 💡 Pro Tip: For simple horizontal centering, use margin: 0 auto . For modern full centering, use Flexbox. For grid layouts, use CSS Grid's place-items: center . ...
Read more