Калькулятор с использованием html css и javascript.

В этой статье я покажу вам, как сделать простой калькулятор, используя html, css и javascript. Это хороший проект для практики ваших навыков JavaScript. Я использовал простой javascript, чтобы сделать этот калькулятор.

Итак, в основном, чтобы вычислить значения, представленные на экране калькулятора, я только что использовал метод eval() javascript. Экран калькулятора является входным тегом с типом текста.

В этот калькулятор я включил:

Цифровые кнопки (от 1 до 9, 0, 00, .).
Кнопка AC (кнопка All Clear, чтобы очистить дисплей).
кнопку DE для удаления последней цифры.
Другая кнопка для расчетов, например +, -, *, /, %.

Вот демонстрация и полный видеоурок простого калькулятора с использованием html css и javascript:

Итак, приступим к изготовлению.

Простой калькулятор.

Создайте два файла с index.html и index.css или с любым другим именем. Затем создайте базовую структуру html в html файле. Затем свяжите файл css с файлом html.

Для расчета я использовал javascript, который добавляется в тег script в html-файле под закрывающим тегом body. Ниже приведены шаги, которые я создал для вас, чтобы сделать этот калькулятор.

Шаг 1: Добавьте окно калькулятора.

Итак, сначала добавьте окно калькулятора, в котором мы собираемся добавить дисплей и кнопки. Поле калькулятора находится в центре экрана, это тег div с полем значения класса (см. код ниже).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
    <div class="container">
        <div class="box">
          
        </div>
    </div>

</body>
</html>
*{
    padding: 0;
    margin: 0;
}
.container{
    width: 100%;
    height: 100vh;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container .box{
    width: 400px;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    padding-bottom: 10px;
    box-shadow: 0px 20px 70px -40px rgb(84 53 255);
}

Выход :

Как вы можете видеть белую линию на изображении выше, это коробка. Я установил ширину 400 пикселей и высоту, установленную на авто.

Шаг 2: Добавьте экран или дисплей в калькулятор.

Теперь давайте добавим дисплей в калькулятор, на котором будет отображаться значение. Здесь отображение — это входной тег с типом текста.

<div class="input_box">
    <input type="text" class="calculator_screen">
</div>
.box .input_box{
    background-color: #d2d2d21a;
    margin: 20px;
    border-radius: 15px;
}
.box .input_box input{
    width: 90%;
    height: 120px;
    background-color: transparent;
    text-align: end;
    font-size: 35px;
    border: none;
    outline: none;
}

Выход :

Шаг 3: Добавление кнопок в калькулятор.

Теперь добавим кнопки в калькулятор.

Во-первых, я добавил кнопку полной очистки (AC), кнопку удаления (DE), кнопку % и кнопку деления (/). Я применил стили к этой кнопке по имени их тега (который является тегом кнопки).

Я добавил одно и то же значение класса (класс = «кнопка») к тем тегам кнопок, значение или внутренний HTML-код которых я хочу отображать на экране калькулятора при нажатии на него. Итак, по одному и тому же значению класса я могу выбрать все через метод foreach JavaScript.

Означает, что кнопка AC (кнопка очистки всех) используется для очистки экрана при нажатии на нее, а не для отображения ее значения или внутреннего HTML на экране, поэтому я добавил другой класс.

<div class="button_box">
    <button type="button" class="allclear_button" style="font-weight: bold;">AC</button>
    <button type="button" class="delete_button" style="font-weight: bold;">DE</button>
    <button type="button" class="button" style="font-weight: bold;">%</button>
    <button type="button" class="button" style="font-weight: bold;">/</button>
</div>
.box .button_box{
    width: 100%;
}
.box .button_box button{
    width: 75px;
    height: 75px;
    cursor: pointer;
    font-size: 30px;
    margin: 8px;
    border: none;
    border-radius: 20px;
    box-shadow: 0px 18px 26px -25px rgb(65 36 228);
    transition: 0.1s;
}
.box .button_box button:active{
    box-shadow: none;
}

Выход :

Теперь давайте добавим больше кнопок. См. приведенный ниже HTML-код. Я просто скопировал и вставил вышеприведенный код (весь div класса button_box) и просто изменил внутренний текст или значение тега кнопки. Нет необходимости добавлять стили, потому что имя тега такое же, как мы применили стиль, выбрав имя тега для кнопки.

Я добавил встроенный css в некоторые кнопки (AC, DE, /, *, -, +, =), чтобы они выглядели жирными.

<div class="button_box">
    <button type="button" class="button">7</button>
    <button type="button" class="button">8</button>
    <button type="button" class="button">9</button>
    <button type="button" class="button" style="font-weight: bold;">*</button>
</div>
<div class="button_box">
    <button type="button" class="button">4</button>
    <button type="button" class="button">5</button>
    <button type="button" class="button">6</button>
    <button type="button" class="button" style="font-weight: bold;">-</button>
</div>
<div class="button_box">
    <button type="button" class="button">1</button>
    <button type="button" class="button">2</button>
    <button type="button" class="button">3</button>
    <button type="button" class="button" style="font-weight: bold;">+</button>
</div>
<div class="button_box">
    <button type="button" class="button">0</button>
    <button type="button" class="button">00</button>
    <button type="button" class="button">.</button>
    <button type="button" class="equal" style="background-color: #000; color: #fff; font-weight: bold;">=</button>
</div>

Выход :

Дизайнерская часть готова. Теперь давайте добавим в калькулятор функциональность для расчета.

Шаг 4: Добавьте JavaScript для функциональности калькулятора.

Прежде всего, определите переменную для всех кнопок очистки, удаления, кнопки равенства, экрана калькулятора, кнопок.

Как вы можете видеть ниже, JavaScript. Я добавил queryselectorAll в класс кнопок. Итак, он дает все элементы, которые имеют имя класса кнопки.

Позже мы добавим метод foreach для таргетинга на каждый элемент, который имеет имя класса кнопки. так что мы можем добавить значение этого класса кнопки при нажатии на экране калькулятора.

    let button = document.querySelectorAll(".button");
    let calculator_screen = document.querySelector(".calculator_screen");
    let allclear_button = document.querySelector(".allclear_button");
    let delete_button = document.querySelector(".delete_button");
    let equal = document.querySelector(".equal");

Теперь давайте сначала добавим функциональность для очистки или очистки экрана калькулятора при нажатии на кнопку очистки всех (кнопка AC).

    allclear_button.onclick = function(){
        calculator_screen.value = "";
    }

Добавлена функция удаления последней цифры на экране при нажатии на кнопку удаления (кнопка DE) в калькуляторе.

    delete_button.onclick = function(){
        calculator_screen.value = calculator_screen.value.substring(0 , calculator_screen.value.length - 1);
    }

Теперь давайте добавим значение на экран, когда пользователь нажимает кнопки в калькуляторе.

Как видите, я добавил то же имя класса в тег кнопки (класс = «кнопка»), для кнопки, значение которой я хочу отображать на экране калькулятора, когда пользователь нажимает на нее.

Используя метод foreach JavaScript. мы можем настроить таргетинг на каждый элемент, у которого есть кнопка имени класса. Итак, когда пользователь нажимает на элемент, который имеет класс кнопки, мы делаем значение экрана калькулятора равным значению этого элемента или внутреннего HTML, по которому щелкнули.

Но при нажатии на кнопку я добавил условие if, которое проверяет, есть ли знак «=» или нет.

Если на экране есть знак «=», и пользователь нажимает другую кнопку, чтобы добавить значение на экран, он удалит знак «=» и добавит это значение.

Потому что мы собираемся отображать ответ вычислений со знаком =. Таким образом, после показанного ответа, если пользователь непосредственно вводит другое значение перед очисткой экрана, значение добавляется после ответа, и когда пользователь нажимает кнопку «равно» для ответа, это приведет к ошибке или ответ не будет отображаться, потому что есть нежелательные Знак «=».

    button.forEach(button => {
        button.onclick = function(){
            if(calculator_screen.value.substring(0 , 1) == "="){
                calculator_screen.value = "";
                calculator_screen.value += button.innerHTML;

            }else{
                calculator_screen.value += button.innerHTML;
            }
        }
    });

Добавление функциональности для получения ответа. Чтобы произвести расчеты. Я использовал метод eval() javascript.

    equal.onclick = function(){
        let answer = eval(calculator_screen.value);

        calculator_screen.value = "= " + answer;
    }

Вот простой калькулятор готов. Вы можете увидеть демонстрацию в приведенном выше видео на YouTube.

Окончательный код:

Вы найдете окончательный код здесь.

Вот как вы можете создать простой калькулятор, используя html CSS и JavaScript. Если у вас есть какие-либо вопросы или предложения, вы можете написать в разделе комментариев.

Первоначально опубликовано на https://www.maketechstuff.com.

Калькулятор с использованием html css и javascript.

Вот демонстрация и полный видеоурок простого калькулятора с использованием html css и javascript:

Простой калькулятор.

Шаг 1: Добавьте окно калькулятора.

Шаг 2: Добавьте экран или дисплей в калькулятор.

Шаг 3: Добавление кнопок в калькулятор.

Шаг 4: Добавьте JavaScript для функциональности калькулятора.

Вопросы по теме