how Create a professional calculator with an amazing interface

Creating a professional calculator with an amazing interface involves combining functionality with a sleek, user-friendly design. Below is a step-by-step guide to building a calculator using HTML, CSS, and JavaScript. This calculator will have a modern and responsive interface.

HTML (Structure)

DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Professional Calculator</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="calculator"><divclass="display"><inputtype="text"id="result"readonly></div><divclass="buttons"><buttonclass="btn operator"data-value="C">C</button><buttonclass="btn operator"data-value="+/-">+/-</button><buttonclass="btn operator"data-value="%">%</button><buttonclass="btn operator"data-value="/">/</button><buttonclass="btn"data-value="7">7</button><buttonclass="btn"data-value="8">8</button><buttonclass="btn"data-value="9">9</button><buttonclass="btn operator"data-value="*">*</button><buttonclass="btn"data-value="4">4</button><buttonclass="btn"data-value="5">5</button><buttonclass="btn"data-value="6">6</button><buttonclass="btn operator"data-value="-">-</button><buttonclass="btn"data-value="1">1</button><buttonclass="btn"data-value="2">2</button><buttonclass="btn"data-value="3">3</button><buttonclass="btn operator"data-value="+">+</button><buttonclass="btn zero"data-value="0">0</button><buttonclass="btn"data-value=".">.</button><buttonclass="btn operator"data-value="=">=</button></div></div><scriptsrc="script.js"></script></body></html>

CSS (Styling)

/* General Reset */*{margin:0;padding:0;box-sizing: border-box;}
body{font-family:'Arial', sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display: flex;justify-content: center;align-items: center;height:100vh;}
.calculator{width:320px;background-color:#2c3e50;border-radius:15px;box-shadow:010px30pxrgba(0,0,0,0.3);overflow: hidden;}
.display{padding:20px;background-color:#34495e;text-align: right;}
#result{width:100%;height:50px;background:transparent;border: none;color:#fff;font-size:32px;text-align: right;outline: none;}
.buttons{display: grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:15px;}
.btn{padding:20px;font-size:24px;border: none;border-radius:10px;background-color:#34495e;color:#fff;cursor: pointer;transition: background-color 0.3s ease;}
.btn:hover{background-color:#3b4a5a;}
.btn.operator{background-color:#e67e22;}
.btn.operator:hover{background-color:#d35400;}
.btn.zero{grid-column: span 2;}

JavaScript (Functionality)

const result =document.getElementById('result');const buttons =document.querySelectorAll('.btn');
let currentInput ='';let operator =null;let firstOperand ='';let secondOperand ='';
buttons.forEach(button=>{  button.addEventListener('click',()=>{const value = button.getAttribute('data-value');
if(!isNaN(value)|| value ==='.'){      currentInput += value;      result.value= currentInput;}elseif(value ==='C'){clearCalculator();}elseif(value ==='+/-'){toggleSign();}elseif(value ==='%'){calculatePercentage();}elseif(['+','-','*','/'].includes(value)){handleOperator(value);}elseif(value ==='='){performCalculation();}});});
functionclearCalculator(){  currentInput ='';  operator =null;  firstOperand ='';  secondOperand ='';  result.value='';}
functiontoggleSign(){if(currentInput.charAt(0)==='-'){    currentInput = currentInput.slice(1);}else{    currentInput ='-'+ currentInput;}  result.value= currentInput;}
functioncalculatePercentage(){  currentInput =parseFloat(currentInput)/100;  result.value= currentInput;}
functionhandleOperator(op){if(operator !==null)performCalculation();  operator = op;  firstOperand = currentInput;  currentInput ='';}
functionperformCalculation(){if(operator ===null|| currentInput ==='')return;
  secondOperand = currentInput;let computation;
switch(operator){case'+':      computation =parseFloat(firstOperand)+parseFloat(secondOperand);break;case'-':      computation =parseFloat(firstOperand)-parseFloat(secondOperand);break;case'*':      computation =parseFloat(firstOperand)*parseFloat(secondOperand);break;case'/':      computation =parseFloat(firstOperand)/parseFloat(secondOperand);break;default:return;}
  currentInput = computation.toString();  result.value= currentInput;  operator =null;  firstOperand ='';  secondOperand ='';}

Features

Modern Design: Gradient background, rounded corners, and shadow effects.
Responsive Layout: Works on all screen sizes.
Basic Operations: Addition, subtraction, multiplication, and division.
Advanced Features: Percentage calculation, sign toggle, and clear functionality.
User-Friendly: Clear and intuitive interface.

How to Run

Save the HTML, CSS, and JavaScript code in separate files (index.html, styles.css, script.js).
Open the index.html file in any modern web browser.

Enjoy your professional calculator! 🚀