Код для простого калькулятора

Вигляд результату...

Ці коди працюють разом, щоб створити повністю функціональний і візуально привабливий калькулятор.

HTML

HTML створює структуру калькулятора, це основа калькулятора. Вона містить область відображення, де показуються числа та результати, а також набір кнопок для чисел, операторів (як +, -) та функцій (C, DEL, =). Кожна кнопка має дію, пов’язану з нею, як-от очищення екрану, видалення числа чи виконання обчислень.

C    DEL    %    ÷    7    8    9    ×    4    5    6    −    1    2    3    +    0    .    =    
       ```
> CSS

CSS робить його привабливим, цей стиль оформлює калькулятор, щоб він виглядав гарно і був зручним для користувачів. Тіло має кольоровий градієнт на фоні, калькулятор центрований з округленими кутами, а кнопки мають м’які кольори з ефектами при наведенні. Кнопка = підсвічується, щоб виділятися. Область відображення оформлена так, щоб виглядати чисто і бути зручною для читання.

body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
margin: 0;
}
.calculator {
background: white;
border-radius: 20px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}
.display {
background: #f7f7f7;
border-radius: 10px;
padding: 20px;
font-size: 2rem;
text-align: right;
margin-bottom: 15px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
background: #ffe4e4;
border: none;
border-radius: 10px;
font-size: 1.2rem;
padding: 15px;
cursor: pointer;
transition: background 0.3s;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background: #ffccd5;
}
button:active {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}
button.equal {
grid-column: span 2;
background: #ff9a9e;
color: white;
font-weight: bold;
}
button.equal:hover {
background: #ff7f87;
}
```

JavaScript

JavaScript робить його функціональним, це мозок калькулятора. Він змушує кнопки працювати. Коли ви натискаєте кнопку, він оновлює відображення. Ви також можете очистити екран, видалити останній символ або обчислити результат, використовуючи кнопку =.
Він обробляє всі математичні операції та оновлює екран відповідно.

let display = document.getElementById('display');  

function appendSymbol(symbol) {  
 display.innerText += symbol;  
}  

function clearDisplay() {  
 display.innerText = '';  
}  

function deleteLast() {  
 display.innerText = display.innerText.slice(0, -1);  
}  

function calculate() {  
 try {  
 display.innerText = eval(display.innerText.replace('÷', '/').replace('×', '*'));  
 } catch {  
 display.innerText = 'Error';  
 }  
}

Коротко кажучи, HTML будує калькулятор, CSS робить його привабливим, а JavaScript робить його функціональним!

Збережіть файли як index.html, styles.css та script.js, та протестуйте в браузері.

Код адаптивний та підтримує як десктопні, так і мобільні пристрої, забезпечуючи плавний та приємний досвід.

— Code with gp…

Перекладено з: Code for simple calculator…