calculator using html,css and js

Creating a Calculator Application using HTML, CSS, and JavaScript

In this guide, I’ll walk you through how I built a simple calculator web application using HTML, CSS, and JavaScript.

This project helped me understand how the Document Object Model (DOM) works, how to validate expressions using regular expressions (regex), and how to handle user input dynamically through JavaScript events.

---

🧰 Prerequisites

Before starting, you should have basic knowledge of:

• HTML structure and elements
• CSS for basic styling
• JavaScript fundamentals (variables, functions, event listeners)

If you’re new to JavaScript, don’t worry — this project is simple and a great way to learn DOM manipulation and regex usage.

---

🧠 What You’ll Learn

By the end of this project, you’ll understand:

1. How to access and modify HTML elements using the DOM.
2. How to validate arithmetic expressions using regular expressions (regex).
3. How to respond to user interactions (button clicks).
4. How to evaluate user input dynamically using JavaScript’s eval() function.

---

🏗️ About the Project

This calculator is a simple, single-page web application that performs basic arithmetic operations such as addition, subtraction, multiplication, division, and modulus.

For the UI (User Interface), I used a pre-made HTML and CSS template.
My main focus was on writing the JavaScript logic to make the calculator actually work.

---

🌐 Understanding the DOM

The Document Object Model (DOM) represents your HTML page as a tree of elements that JavaScript can interact with.

Using the DOM, we can grab elements, update content, or change styles based on user actions.

Common DOM methods I used:

• document.getElementById() – grabs an element by its unique ID.
• document.querySelector() – grabs the first element matching a CSS selector.
• document.querySelectorAll() – grabs all elements matching a CSS selector.

Example:

document.getElementById("display").innerText = "Hello World";

click here