Как создать калькулятор на сайте

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Введение: Зачем нужен калькулятор на сайте

Калькуляторы на сайте могут быть полезными для различных целей: от простых арифметических операций до сложных финансовых расчетов. Они улучшают пользовательский опыт, позволяя посетителям быстро получить нужную информацию без необходимости покидать ваш сайт. Например, калькулятор может помочь пользователям рассчитать стоимость товаров, определить сумму кредита или вычислить калорийность продуктов. В современном мире, где время — это деньги, наличие калькулятора на сайте может значительно повысить его привлекательность и удобство для пользователей. Калькуляторы также могут быть полезны для образовательных целей, помогая студентам и учащимся быстро выполнять необходимые вычисления. В бизнесе калькуляторы могут использоваться для расчета налогов, процентов и других финансовых показателей, что делает их незаменимым инструментом для многих компаний.

Кинга Идем в IT: пошаговый план для смены профессии

Подготовка: Необходимые инструменты и технологии

Для создания калькулятора на сайте вам понадобятся базовые знания HTML, CSS и JavaScript. Эти три технологии являются основой веб-разработки и позволят вам создать функциональный и стильный калькулятор. Вот список инструментов и технологий, которые мы будем использовать:

HTML: для создания структуры калькулятора. HTML (HyperText Markup Language) является основным языком разметки для создания веб-страниц. Он позволяет структурировать контент и добавлять элементы, такие как кнопки и поля ввода.
CSS: для стилизации элементов калькулятора. CSS (Cascading Style Sheets) используется для оформления веб-страниц. С его помощью можно задать цвет, шрифт, размеры и другие визуальные характеристики элементов.
JavaScript: для реализации логики калькулятора. JavaScript — это язык программирования, который позволяет добавлять интерактивные элементы на веб-страницы. С его помощью мы будем обрабатывать ввод данных и выполнять арифметические операции.

Создание HTML-структуры калькулятора

Начнем с создания базовой структуры калькулятора с помощью HTML. В этом разделе мы создадим форму с полями ввода и кнопками для выполнения арифметических операций. HTML-структура будет включать в себя контейнер для калькулятора, экран для отображения результатов и кнопки для ввода данных и выполнения операций.

HTML

Скопировать код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" value="" disabled />
        <div class="calculator-keys">
            <button type="button" class="operator" value="+">+</button>
            <button type="button" class="operator" value="-">−</button>
            <button type="button" class="operator" value="*">×</button>
            <button type="button" class="operator" value="/">÷</button>
            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>
            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>
            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>
            <button type="button" value="0">0</button>
            <button type="button" class="decimal" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">AC</button>
            <button type="button" class="equal-sign" value="=">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

В этом коде мы создаем базовую структуру калькулятора с помощью HTML. Мы используем элемент <div> для контейнера калькулятора, элемент <input> для экрана и элементы <button> для кнопок. Каждая кнопка имеет атрибут value, который будет использоваться для выполнения соответствующей операции.

Добавление стилей с помощью CSS

Теперь, когда у нас есть базовая структура, давайте добавим стили, чтобы наш калькулятор выглядел привлекательно и был удобен в использовании. Создадим файл styles.css и добавим следующие стили:

CSS

Скопировать код

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
}

.calculator {
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.calculator-screen {
    width: 100%;
    height: 80px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 2.5rem;
}

.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
}

button {
    height: 60px;
    border-radius: 5px;
    border: none;
    background-color: #e0e0e0;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #d0d0d0;
}

.operator {
    background-color: #ff9500;
    color: #fff;
}

.operator:hover {
    background-color: #e08e00;
}

.equal-sign {
    background-color: #4caf50;
    color: #fff;
    grid-column: span 2;
}

.equal-sign:hover {
    background-color: #45a049;
}

.all-clear {
    background-color: #f44336;
    color: #fff;
}

.all-clear:hover {
    background-color: #e53935;
}

В этом CSS-коде мы стилизуем элементы калькулятора, чтобы он выглядел привлекательно и был удобен в использовании. Мы задаем стили для контейнера калькулятора, экрана и кнопок. Используем Flexbox для центрирования калькулятора на странице и Grid Layout для расположения кнопок в сетке. Также добавляем стили для кнопок, чтобы они изменяли цвет при наведении курсора.

Реализация логики калькулятора на JavaScript

Теперь, когда у нас есть структура и стили, давайте добавим логику для нашего калькулятора с помощью JavaScript. Создадим файл script.js и добавим следующий код:

Скопировать код

const calculator = {
    displayValue: '0',
    firstOperand: null,
    waitingForSecondOperand: false,
    operator: null,
};

function inputDigit(digit) {
    const { displayValue, waitingForSecondOperand } = calculator;

    if (waitingForSecondOperand === true) {
        calculator.displayValue = digit;
        calculator.waitingForSecondOperand = false;
    } else {
        calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
}

function inputDecimal(dot) {
    if (calculator.waitingForSecondOperand === true) return;

    if (!calculator.displayValue.includes(dot)) {
        calculator.displayValue += dot;
    }
}

function handleOperator(nextOperator) {
    const { firstOperand, displayValue, operator } = calculator;
    const inputValue = parseFloat(displayValue);

    if (operator && calculator.waitingForSecondOperand) {
        calculator.operator = nextOperator;
        return;
    }

    if (firstOperand == null && !isNaN(inputValue)) {
        calculator.firstOperand = inputValue;
    } else if (operator) {
        const result = performCalculation[operator](firstOperand, inputValue);

        calculator.displayValue = String(result);
        calculator.firstOperand = result;
    }

    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator;
}

const performCalculation = {
    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
    '-': (firstOperand, secondOperand) => firstOperand – secondOperand,
    '=': (firstOperand, secondOperand) => secondOperand
};

function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
}

function updateDisplay() {
    const display = document.querySelector('.calculator-screen');
    display.value = calculator.displayValue;
}

updateDisplay();

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
    const { target } = event;
    if (!target.matches('button')) {
        return;
    }

    if (target.classList.contains('operator')) {
        handleOperator(target.value);
        updateDisplay();
        return;
    }

    if (target.classList.contains('decimal')) {
        inputDecimal(target.value);
        updateDisplay();
        return;
    }

    if (target.classList.contains('all-clear')) {
        resetCalculator();
        updateDisplay();
        return;
    }

    inputDigit(target.value);
    updateDisplay();
});

В этом JavaScript-коде мы реализуем логику калькулятора. Мы создаем объект calculator, который будет хранить текущее состояние калькулятора, включая текущее значение на экране, первый операнд, флаг ожидания второго операнда и текущий оператор. Функции inputDigit, inputDecimal и handleOperator обрабатывают ввод данных и выполнение операций. Функция resetCalculator сбрасывает состояние калькулятора, а функция updateDisplay обновляет значение на экране.

Теперь у вас есть полноценный калькулятор, который можно добавить на ваш сайт. Этот калькулятор поддерживает базовые арифметические операции и имеет простой и понятный интерфейс. Надеюсь, эта статья помогла вам создать свой первый калькулятор на сайте! Если у вас возникнут вопросы или проблемы, не стесняйтесь искать дополнительную информацию или задавать вопросы в сообществах разработчиков. Удачи в ваших начинаниях!

Как создать калькулятор на сайте

Пройдите тест, узнайте какой профессии подходите

Введение: Зачем нужен калькулятор на сайте

Подготовка: Необходимые инструменты и технологии

Создание HTML-структуры калькулятора

Добавление стилей с помощью CSS

Реализация логики калькулятора на JavaScript

Читайте также