Skip to content

HafizEngineerMuhammadAbdullah/MySimpleCalculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

🧮 Glassmorphism Calculator

A modern animated calculator built using HTML, CSS & JavaScript ✨


🚀 Live Features

  • 🧮 Basic arithmetic operations (+, -, ×, ÷)
  • 💡 Percentage support (% logic included)
  • 🎨 Glassmorphism UI design
  • ⚡ Real-time input handling
  • ❌ Error handling (NaN, Infinity, etc.)
  • 📱 Fully responsive mobile design

🛠️ Tech Stack

  • HTML5
  • CSS3 (Glassmorphism + Animations)
  • JavaScript (DOM + Logic + eval replacement)

📸 Preview


🎬 Demo (GIF)


⚙️ How It Works

  • Buttons update input field dynamically
  • Expression is built as string
  • % is converted to /100
  • Function() evaluates safely instead of eval()
  • Error handling resets invalid output

📱 Responsive Design

✔ Mobile-friendly layout
✔ Touch-optimized buttons
✔ Adaptive calculator size


💡 What I Learned

  • DOM manipulation
  • Event handling
  • String-based expression building
  • UI/UX design principles
  • Glassmorphism styling

📂 Project Structure

calculator/ │── index.html │── style.css │── script.js │── assets/ │ ├── calculator.png │ ├── calculator.gif


📫 Connect With Me


⭐ If you like this project, give it a star!