Skip to main content

Simple Calculator using HTML, CSS & JavaScript

This Simple Calculator App is a beginner-friendly project built using HTML5, CSS3, and Vanilla JavaScript. It performs basic arithmetic operations like addition, subtraction, multiplication, and division — making it a perfect mini project for new developers to understand core JavaScript logic and DOM manipulation.

🔹 Key Features:

  • Basic Operations: Addition, Subtraction, Multiplication, Division, and Decimal Handling.
  • Clear & Delete: Reset the full input or delete the last digit using dedicated buttons.
  • Error Handling: Invalid expressions are caught and displayed as "Error".
  • Responsive Layout: Clean and centered UI layout using basic CSS Flexbox.

📁 File Structure:

calculator-app/
├── index.html
├── style.css
└── script.js

⚙️ How to Run:

  1. Clone or download the repository to your local machine.
  2. Open index.html in your browser.
  3. Try out the calculator functions like basic math, clear, delete, and decimal operations.

💡 Why Build This?

This project is an excellent way to practice and demonstrate your skills in:

  • Basic DOM manipulation
  • Event handling in JavaScript
  • JavaScript methods like eval(), slice(), and try-catch blocks
  • Styling layouts with Flexbox and responsive units

🔗 GitHub Repository

You can view or download the full project source code from my GitHub:

👉 View on GitHub

🧪 Live Demo on CodePen

Want to try it without downloading? Check it out live on CodePen:

▶️ Open Calculator on CodePen

Comments

Post a Comment

Popular posts from this blog

How to Display Flash Messages in EJS using Node.js and Express

Displaying Flash Messages in EJS with Node.js and Express Flash messages are a great way to give users quick feedback — like "Login successful!" or "Please enter all fields!" . In this guide, you’ll learn how to implement them using: express-session connect-flash EJS templating 📦 Step 1: Install Required Packages npm install express express-session connect-flash ejs ⚙️ Step 2: Setup Express App and Middleware const express = require('express'); const session = require('express-session'); const flash = require('connect-flash'); const app = express(); // Set view engine app.set('view engine', 'ejs'); // Middleware app.use(express.urlencoded({ extended: true })); app.use(session({ secret: 'yourSecretKey', resave: false, saveUninitialized: true })); app.use(flash()); // Make flash messages available to all views app.use((req, res, next) => { res.lo...
Post a Comment
Read more

Realtime Device Tracker using Node.js, Socket.IO & Leaflet

Realtime Device Tracker using Node.js, Socket.IO & Leaflet In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map. 🚀 Project Overview Backend: Node.js, Express.js, Socket.IO Frontend: HTML, Leaflet.js, Socket.IO client Features: Live GPS tracking, multi-user map, disconnect cleanup 📁 Folder Structure project-root/ ├── app.js ├── package.json ├── src/ │ ├── public/ │ │ ├── css/ │ │ │ └── style.css │ │ └── js/ │ │ └── script.js │ ├── routes/ │ │ └── routers.js │ ├── socket/ │ │ └── socketHandler.js │ └── views/ │ └── index.ejs 🧠 How It Works Each user shares their location using the browser's navigator.geolocation API. Location is sent to the server via Socket.IO . The server broadcasts each user’s position to all clien...
Post a Comment
Read more

How to Send Emails in Node.js using Nodemailer and Ethereal

How to Send Email in Node.js using Nodemailer Email functionality is essential in modern web applications. Whether you're sending confirmation emails, password resets, or notifications, Node.js with Nodemailer makes this simple. In this blog, we'll walk through setting up email sending using Node.js , Express , and Ethereal Email for testing. 🧾 Prerequisites Node.js installed Basic knowledge of Express.js Internet connection 📁 Project Structure project-folder/ ├── index.js ├── .env ├── package.json └── app/ └── controller/ └── emailSendController.js 📦 Step 1: Install Dependencies npm init -y npm install express nodemailer dotenv npm install --save-dev nodemon 🔁 Configure nodemon (Optional but Recommended) Update your package.json with a custom start script: "scripts": { "start": "nodemon index.js" } 🔐 Step 2: Create a .env File Create a .env file a...
Post a Comment
Read more