Постапокаліптичний калькулятор

Простий веб-калькулятор у стилі Fallout / Pip-Boy.
Написаний на HTML, CSS та JavaScript — без фреймворків і складних бібліотек.

Щоб відкрити проєкт: двічі клацни по файлу index.html або відкрий його у браузері (Chrome, Firefox, Edge).

1. Для чого потрібен кожен файл

Файл	Призначення
`index.html`	Каркас сторінки: заголовок, екран калькулятора та всі кнопки
`style.css`	Зовнішній вигляд: кольори, шрифти, світіння, анімації
`script.js`	Логіка калькулятора: що відбувається при натисканні кнопок
`README.md`	Цей файл — пояснення, як усе влаштовано

2. Як працює HTML-структура

HTML — це «скелет» сторінки. Він каже браузеру, що показувати.

Основні частини `index.html`:

<body>
  └── <div class="pip-boy">          ← головний корпус калькулятора
        ├── <header>                 ← назва «ROBCO INDUSTRIES»
        ├── <div class="screen">     ← екран з виразом
        │     └── <div id="display"> ← сюди JavaScript пише цифри
        ├── <div class="buttons">    ← сітка з кнопками
        └── <footer>                 ← рядок внизу «Система готова»

Кнопки

Кожна кнопка має два важливі атрибути:

data-action — що робить кнопка:
- number — додає цифру
- operator — додає знак (+, -, *, /)
- equals — обчислює результат
- clear — очищає екран
data-value — яке саме значення (наприклад, 7 або +)

Приклад:

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

JavaScript читає ці атрибути і розуміє, що робити при кліку.

Підключення файлів

У <head> підключено CSS і шрифт. Перед закриваючим </body> — JavaScript:

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

3. Як працюють стилі CSS

CSS відповідає за вигляд сторінки: кольори, розміри, ефекти.

Темний фон

body {
    background-color: #0a0a0a;
}

#0a0a0a — дуже темний колір (майже чорний).

Зелений екран Pip-Boy

Колір #39ff14 — яскраво-зелений, як на старих терміналах.
Він використовується для тексту, рамок і світіння (text-shadow, box-shadow).

Зелене світіння

У класі .pip-boy є box-shadow — тінь навколо блоку. Кілька тіней разом створюють ефект світіння:

box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);

Шрифт термінала

Підключено шрифт Share Tech Mono з Google Fonts. Якщо він не завантажиться — браузер використає Courier New.

Мерехтіння екрану

Анімація screenFlicker на короткий момент зменшує прозорість екрана — імітація старого монітора:

@keyframes screenFlicker {
    93% { opacity: 0.85; }
    ...
}

Кнопки «після апокаліпсису»

Кнопки мають:

темний градієнт (linear-gradient) — виглядають об'ємними;
товсту нижню тінь — ніби кнопка виступає;
при натисканні (:active) зсуваються вниз — ефект натискання.

Сітка кнопок

display: grid з grid-template-columns: repeat(4, 1fr) розкладає кнопки в 4 стовпці однакової ширини.

4. Як працює JavaScript

JavaScript — це «мозок» калькулятора. Він реагує на кліки і змінює те, що написано на екрані.

Змінні стану

На початку файлу зберігаємо:

Змінна	Що зберігає
`display`	Посилання на елемент екрану в HTML
`currentExpression`	Поточний вираз (наприклад `"12+5"`)
`hasError`	Чи зараз показується помилка

Загальна схема роботи

Користувач натискає кнопку
        ↓
JavaScript читає data-action і data-value
        ↓
Викликається потрібна функція
        ↓
Змінюється currentExpression
        ↓
Екран оновлюється через updateDisplay()

5. Для чого потрібна кожна основна функція

`updateDisplay(text)`

Показує текст на екрані. Всі інші функції викликають її, щоб оновити відображення.

`clearAll()`

Скидає все: вираз стає порожнім, помилка зникає, на екрані знову 0.

`showError(message)`

Показує червоний текст помилки (наприклад ПОМИЛКА) і вмикає прапорець hasError.

`addNumber(number)`

Додає цифру до виразу. Якщо на екрані був 0, замінює його новою цифрою замість 05.

`addOperator(operator)`

Додає знак +, -, * або /. Якщо останній символ уже оператор — замінює його (щоб не було 5++).

`calculateResult()`

Обчислює результат виразу і показує його на екрані. Якщо щось не так — показує помилку.

6. Як відбувається обробка натискань кнопок

У кінці script.js:

var buttons = document.querySelectorAll('.btn');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        var action = this.getAttribute('data-action');
        var value = this.getAttribute('data-value');
        // ... виклик потрібної функції
    });
}

Крок за кроком:

querySelectorAll('.btn') — знаходить усі кнопки з класом btn.
Цикл for проходить по кожній кнопці.
addEventListener('click', ...) — «слухає» клік миші.
При кліку читаємо data-action і data-value.
Залежно від action викликаємо:
- addNumber — для цифр
- addOperator — для знаків
- calculateResult — для =
- clearAll — для C

7. Як працює обчислення прикладів

Коли натискають =, викликається calculateResult():

Перевірка виразу — чи не порожній, чи не закінчується на + чи -.
Перевірка безпеки — у виразі дозволені лише цифри та + - * / .
Обчислення — eval(currentExpression) рахує результат.
Перевірка результату — чи це нормальне число (не Infinity при діленні на нуль).
Округлення — щоб не показувати 0.30000000000000004.
Показ — результат з'являється на екрані.

Приклад

Користувач вводить: 5 + 3 =
currentExpression = "5+3"
eval("5+3") → 8
На екрані: 8

Помилки

Ситуація	Що бачить користувач
Ділення на нуль (`5/0`)	`ПОМИЛКА`
Вираз закінчується на `+`	`ПОМИЛКА`
Некоректні символи	`ПОМИЛКА`

Після помилки наступна цифра або C скидає стан.

8. Як самостійно змінити кольори, кнопки та фон

Змінити фон сторінки

У style.css знайди body і зміни background-color:

body {
    background-color: #1a0a2e; /* фіолетовий фон */
}

Змінити зелений колір Pip-Boy

Заміни #39ff14 на інший колір у файлі style.css. Наприклад, блакитний термінал:

color: #00d4ff;

Шукай цей колір у .display-text, .btn, .screen та інших місцях.

Змінити силу світіння

У .pip-boy зміни числа в box-shadow:

box-shadow: 0 0 40px rgba(57, 255, 20, 0.5); /* сильніше світіння */

Додати нову кнопку

У index.html додай кнопку з потрібними data-action і data-value.
Якщо потрібна нова дія — додай else if у обробник кліків у script.js.

Змінити текст заголовка

У index.html зміни вміст тегів <h1> та <p class="subtitle">.

Вимкнути мерехтіння

Видали або закоментуй рядок у .screen:

/* animation: screenFlicker 4s infinite; */

Спробуй сам

Ось 5 простих покращень, які можна зробити самостійно:

Кнопка крапки (.) — додай кнопку для десяткових дробів, щоб можна було рахувати 3.14 + 2.
Кнопка видалення (⌫) — одне натискання стирає останній символ, не весь вираз як C.
Звук кліку — додай короткий звук при натисканні кнопки через HTML-елемент <audio> або Web Audio API.
Історія обчислень — під екраном показуй останні 3–5 прикладів і їхні результати.
Темна / світла тема — додай кнопку перемикання, яка змінює клас на <body> (наприклад body.amber з жовтим кольором замість зеленого).

Успіхів у навчанні веброзробки!

Name		Name	Last commit message	Last commit date
favicons		favicons
.gitignore		.gitignore
README.md		README.md
hero.avif		hero.avif
index.html		index.html
pip-boy.gif		pip-boy.gif
script.js		script.js
style.css		style.css
tower.avif		tower.avif

Latest commit

History

Folders and files

Repository files navigation