🧮 Build a Simple Calculator App with HTML, CSS & JavaScript

By Darchums Technologies Inc

In this tutorial, you’ll create a simple calculator that can add, subtract, multiply, and divide—perfect for beginners learning HTML, CSS, and JavaScript.

✅ What This Tutorial Covers:

• HTML layout for calculator buttons
• CSS styling for visual appeal
• JavaScript for interactivity and logic

💻 Step-by-Step Guide

1️⃣ HTML – Calculator Layout

<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <button onclick="appendValue('1')">1</button>
    <button onclick="appendValue('2')">2</button>
    <button onclick="appendValue('3')">3</button>
    <button onclick="appendValue('+')">+</button>

    <button onclick="appendValue('4')">4</button>
    <button onclick="appendValue('5')">5</button>
    <button onclick="appendValue('6')">6</button>
    <button onclick="appendValue('-')">-</button>

    <button onclick="appendValue('7')">7</button>
    <button onclick="appendValue('8')">8</button>
    <button onclick="appendValue('9')">9</button>
    <button onclick="appendValue('*')">*</button>

    <button onclick="appendValue('0')">0</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendValue('/')">/</button>
  </div>
</div>

2️⃣ CSS – Style the Calculator

.calculator {
  width: 200px;
  margin: 20px auto;
  padding: 15px;
  border-radius: 8px;
  background: #f9f9f9;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

#display {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: right;
}

.buttons button {
  width: 45px;
  height: 45px;
  margin: 5px;
  font-size: 16px;
  cursor: pointer;
}

3️⃣ JavaScript – Add the Logic

let display = document.getElementById('display');

function appendValue(value) {
  display.value += value;
}

function clearDisplay() {
  display.value = '';
}

function calculate() {
  try {
    display.value = eval(display.value);
  } catch {
    display.value = 'Error';
  }
}

🎯 Why This Is a Great Beginner Project

• ✅ Builds confidence with core web languages
• ✅ Teaches logical thinking through math operations
• ✅ Fun and practical!

Ready to bring your code to life? Start now and keep experimenting. Let’s code with Darchums! 💡