Skip to main content

Make Calculator Dynamic JS Calculator: Sleek Animations, ES6 Features & Responsive Design

 Here's an advanced Calculator App with animations and high-level JavaScript concepts like ES6+ features, event delegation, and CSS animations.

Output

Features:

  • Smooth button press animations
  • Dark/light mode toggle
  • Keyboard support
  • History of calculations
  • Error handling

1. Project Structure

bash
/calculator/
│── index.html
│── style.css
│── script.js

2. index.html

html
<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Calculator</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body>


    <div class="calculator">

        <div class="theme-toggle">🌙</div>
        <div class="display"> 
<div id="history"></div> 
<div id="output">0</div>
        </div>

        <div class="buttons">

            <button class="btn operator" data-value="C">C</button> 
<button class="btn operator" data-value="←">←</button>

            <button class="btn operator" data-value="%">%</button> 
<button class="btn operator" data-value="/">÷</button> 
<button class="btn number" data-value="7">7</button> 
<button class="btn number" data-value="8">8</button> 
<button class="btn number" data-value="9">9</button> 
<button class="btn operator" data-value="*">×</button> 
<button class="btn number" data-value="4">4</button>

            <button class="btn number" data-value="5">5</button>

            <button class="btn number" data-value="6">6</button> 
<button class="btn operator" data-value="-">−</button> 
<button class="btn number" data-value="1">1</button>

            <button class="btn number" data-value="2">2</button> 
<button class="btn number" data-value="3">3</button> 
<button class="btn operator" data-value="+">+</button> 
<button class="btn number" data-value="0">0</button>

            <button class="btn number" data-value=".">.</button> 
<button class="btn equals" data-value="=">=</button> 
</div>
    </div> 
<script src="script.js"></script>

</body>

</html>

3. Style.css

css
body {
font-family: Arial,
 sans-serif; 
display: flex;
justify-content: center;
align-items: center; 
height: 100vh; 
background-color: #1e1e1e; 
transition: background 0.3s; 
} 
.calculator {
width: 320px; 
background: #fff; 
padding: 20px; 
border-radius: 10px; 
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
text-align: center;
    position: relative; 
transition: background 0.3s, color 0.3s; 
} 
.theme-toggle {
    position: absolute;
top: 10px; 
right: 10px; 
cursor: pointer; 
font-size: 18px;
 } 
.display { 
background: #222; 
color: #fff;
font-size: 2rem;
padding: 15px;
border-radius: 8px;
text-align: right;
margin-bottom: 10px; 
min-height: 60px; 
} 
.buttons { 
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
 } 
.btn {
    background: #eee;
font-size: 1.5rem; 
padding: 15px;
border-radius: 8px; 
border: none; 
cursor: pointer;
transition: transform 0.1s ease-in-out;
 } 
.btn.operator {
    background: #ff9500; 
color: white;
 } 
.btn.equals {
    background: #34c759; 
color: white;
grid-column: span 2; 
} 
.btn:active {
    transform: scale(0.9);
 } 
.dark-mode { 
background: #222 !important;
color: #fff !important;
 }

4. Script.js

js
document.addEventListener("DOMContentLoaded", () => {
const output = document.getElementById("output");
const history = document.getElementById("history"); 
const buttons = document.querySelector(".buttons"); 
const themeToggle = document.querySelector(".theme-toggle");
let currentInput = ""; 
let historyList = []; 
function updateDisplay() {
        output.textContent = currentInput || "0"; 
 }

    function addToHistory(expression, result) {
if (historyList.length >= 5) historyList.shift(); 
 historyList.push(`${expression} = ${result}`); 
 history.innerHTML = historyList.join("<br>"); 
 }

    buttons.addEventListener("click", (event) => {
if (!event.target.classList.contains("btn")) return; 
const value = event.target.dataset.value;
if (value === "C") {
            currentInput = "";
updateDisplay();
 } 
else if (value === "←") {
            currentInput = currentInput.slice(0, -1);
updateDisplay();
 } 
else if (value === "=") {
            try {
                let result = eval(currentInput);
addToHistory(currentInput, result);
 currentInput = result.toString(); 
 } 
catch {
                currentInput = "Error";
 } 
updateDisplay();
 }
else {
            currentInput += value;
            updateDisplay();
 }
    });
 themeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
document.querySelector(".calculator").classList.toggle("dark-mode");
 themeToggle.textContent = document.body.classList.contains("dark-mode") ? "☀️" : "🌙";
    }); 
document.addEventListener("keydown", (event) => { 
const key = event.key;
        if (/[\d+\-*/.%]/.test(key)) 
{ 
 currentInput += key; 
 } 
else if (key === "Enter") {
 event.preventDefault();
try {
                let result = eval(currentInput); 
addToHistory(currentInput, result);
 currentInput = result.toString(); 
 } 
catch {
                currentInput = "Error";
 }
        }
else if (key === "Backspace") {
            currentInput = currentInput.slice(0, -1); 
 } 
else if (key === "Escape") {
            currentInput = ""; 
 }
        updateDisplay(); 
 }); 
updateDisplay(); 
});

Key Features in This Code

✅ Smooth button animations (.btn:active { transform: scale(0.9); })
✅ Dark Mode Toggle (CSS class switch)
✅ Keyboard Support (keydown event)
✅ History of Last 5 Calculations
✅ Error Handling (Prevents crashes from invalid inputs)

How to Run

  1. Save the files as index.html, style.css, and script.js.
  2. Open index.html in a browser.
  3. Click buttons or use the keyboard to operate the calculator.