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

Graph Data Structure – Complete Beginner to Advanced Guide with BFS, DFS and Examples

Graph Data Structure – Complete Beginner to Advanced Guide with BFS, DFS and Examples Graphs are one of the most powerful and widely used data structures in computer science. They are used to represent networks such as social media connections, road maps, computer networks, recommendation systems, and many real-world problems. What is a Graph? A graph is a non-linear data structure that consists of a set of vertices (nodes) and a set of edges that connect these vertices. Basic Terminology Vertex (Node): An individual point in the graph. Edge: A connection between two vertices. Degree: Number of edges connected to a vertex. Path: A sequence of vertices connected by edges. Cycle: A path that starts and ends at the same vertex. Types of Graphs Undirected Graph Directed Graph (Digraph) Weighted Graph Unweighted Graph Cyclic Graph Acyclic Graph Graph Representation 1. Adjacency Matrix A 2D matrix where rows and columns represent vertic...
Read more

Top Coding Mistakes Beginners Make (And How to Fix Them the Right Way)

Top Coding Mistakes Beginners Make (And How to Fix Them the Right Way) When beginners start learning coding, they often repeat the same mistakes. These mistakes are not signs of failure. They are part of the learning process. Understanding them early can save a lot of time and frustration. Why Beginner Mistakes Are So Common Coding requires logical thinking, attention to detail, and patience. Beginners are still developing these skills, so mistakes are completely normal. Mistake 1: Skipping the Basics Many beginners rush into advanced topics without understanding fundamentals. This creates confusion later when basic concepts are required. How to fix: Spend enough time learning variables, loops, and conditions. Mistake 2: Copy-Pasting Code Without Understanding Copying code may seem helpful, but it slows real learning. When errors appear, beginners feel lost because they do not understand the code. How to fix: Rewrite the code in your own words an...
Read more

Top 10 Free Coding Websites Every Beginner Should Use in 2026

Top 10 Free Coding Websites Every Beginner Should Use in 2026 Starting your coding journey can feel confusing, especially when you don’t know where to learn programming for free . The internet is full of learning platforms, but not all of them are beginner-friendly. In this guide, you will discover the top free coding websites that help beginners learn step by step using simple lessons, exercises, and real projects. All the platforms listed here are: Beginner-friendly Free to use Trusted by millions of learners 1. freeCodeCamp freeCodeCamp is one of the most popular free platforms to learn programming. It provides complete courses on: HTML, CSS, and JavaScript Responsive web design APIs and backend development Python and data analysis The best part is that you can earn free certificates after finishing each course. Best for: Beginners who want full structured learning. 2. W3Schools W3Schools is perfect for quick and simple expla...
Read more