Создайте калькулятор с использованием JavaScript, HTML и CSS в 2022 году

Опубликовано: 2021-01-02

Изучаете ли вы новый язык программирования или среду разработки, наступает время, когда вам приходится работать над реальными проектами. По мере продвижения по предмету вы должны проверить свои навыки и понимание языка. Создание проекта с использованием недавно изученной технологии или фреймворка — хорошая идея. В Интернете доступно множество идей о том, что вы должны создать, используя свои знания.

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

Начнем?

Оглавление

Логика превыше всего

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

Как работает калькулятор?

Вы добавляете два или более числа (любое количество цифр), используя цифровые клавиши, указанные на калькуляторе.
Затем вы выполняете основные арифметические функции, то есть сложение, вычитание, умножение и деление этих чисел.
Калькулятор должен уметь считать и выдавать правильные решения.

Это предпосылка вашего калькулятора. Итак, вам нужна клавиатура, дисплей и функциональные элементы.

Кнопка «равно» оценит ответ, а кнопка «очистить» обеспечит удаление всех вводов с дисплея калькулятора.

Изучите онлайн-курсы по разработке программного обеспечения от лучших университетов мира. Участвуйте в программах Executive PG, Advanced Certificate Programs или Master Programs, чтобы ускорить свою карьеру.

Работа над проектом: ключ к созданию кода

Вместо того, чтобы сразу переходить к коду, вам нужно научиться решать новый проект. У вас есть две вещи, готовые для вас: логика и базовое понимание интерфейсных технологий, то есть JavaScript, HTML и CSS.

Прежде чем вы начнете создавать свой калькулятор с помощью JavaScript , вам необходимо следующее:

Интегрированная среда разработки, которая поможет вам создать проект с использованием всех трех технологий.
Локальный сервер, который поможет вам протестировать ваши коды и удалить ошибки. В результате вы сможете запускать приложение быстрее и с большей гибкостью.

#1 Начало работы с HTML

Первый шаг — немного запачкать руки HTML, чтобы построить схему для своего калькулятора.

На калькуляторе десять кнопок, от 0 до 9. HTML отвечает за построение ключей для каждой цифры.

Кроме того, вам потребуется использовать HTML для создания отдельных ключей для различных арифметических функций, а также при создании калькулятора с использованием JavaScript .

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

Визуальный блок вашего калькулятора полностью зависит от HTML и CSS, из которых кнопки и их идентификаторы должны быть созданы с использованием HTML.

Стандартный код

<!ДОКТИП HTML>

<голова>

<метакодировка="UTF-8">

<title>Калькулятор</title>

</голова>

<тело>

Фактический код для создания контура калькулятора

(

<!– калькулятор –>

<!– отображать –>

<тип ввода = «текст», класс = «отображение» отключено>

<!– клавиши –>

<!– 4 ряда клавиш –>

</div>

</div>

</div>

</div>

<!– конец тела калькулятора –>

</тело>

</html>

Узнайте: 20 лучших проектов Javascript в Github для начинающих

#2 Стиль с помощью CSS

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

Хотя встроенный CSS отлично подходит для дизайна и оформления внешнего вида вашего приложения, он может быть не оптимизирован для SEO. Кроме того, вы также можете использовать внешние элементы CSS, пометив их в том же корневом каталоге. Вы даже можете использовать внутренние или встроенные элементы CSS, которые присутствуют в тегах <style></style> в разделе заголовка.

Здесь мы познакомим вас с кодом, который вы можете использовать для оформления своего калькулятора.

(Вы можете создать варианты этого кода, если хотите.)

/* общие стили */

* {

заполнение: 0;

маржа: 0;

}

тело {

ширина: 100vw;

высота: 100вх;

переполнение: скрыто;

дисплей: гибкий;

выравнивание содержимого: по центру;

выравнивание элементов: по центру;

цвет фона: #222831;

семейство шрифтов: без засечек;

}

/* общие стили заканчиваются */

/* калькулятор */

.калькулятор {

ширина: 300 пикселей;

нижний отступ: 15px;

радиус границы: 7px;

цвет фона: #000;

box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0,61);

}

/* конец стиля калькулятора */

/* отображать */

.отображать {

ширина: 100%;

высота: 80 пикселей;

граница: нет;

box-sizing: граница-коробка;

отступ: 10 пикселей;

размер шрифта: 2rem;

цвет фона: #00ff44;

цвет: #000;

выравнивание текста: вправо;

граница-верхний-левый-радиус: 7px;

граница-верхний-правый-радиус: 7px;

}

/* конец стиля отображения */

/* ряд */

.ряд {

дисплей: гибкий;

выравнивание содержимого: пробел между;

}

/* конец строки */

/* кнопка */

кнопка {

ширина: 50 пикселей;

высота: 50 пикселей;

радиус границы: 50%;

граница: нет;

контур: нет;

размер шрифта: 1.5rem;

цвет фона: #222;

цвет: #fff;

поле: 10 пикселей;

}

кнопка:наведите {

курсор: указатель;

}

/* конец стиля кнопки */

/* оператор */

.оператор {

цвет фона: #00ff44;

цвет: #000;

}

/* конец стиля оператора */

# 3 Добавление функциональности с помощью JavaScript

Теперь мы подробно обсудили видимые аспекты построения калькулятора с использованием JavaScript . Давайте напишем несколько сценариев, чтобы сделать калькулятор функциональным и выполнять вычислительные задачи. Мы поймем несколько шагов, связанных с созданием кода JS, что поможет вам быстрее разрабатывать код.

Вам нужно будет вызывать теги HTML, которые вы создали для отдельных функций, используя JavaScript. Вы будете использовать селекторы для вызова каждого из этих входов и сохранения их в переменной. Для каждой функции вам понадобится переменная. Например, есть отдельная переменная для отображения, цифры, функция очистки, а также функция равенства. В этом случае можно использовать функцию getElementbyID().
Допустим, вы хотите выполнить простое вычисление 20+30, вы сначала вызовете 20, используя метод, упомянутый выше. Перед вызовом 30 и арифметической функции вам нужно будет где-то сохранить ранее вызванное 20. В вашем коде должно быть место для временного хранения чисел, чтобы упростить вычисления. Пустой массив будет содержать число в виде строки. После того, как вы добавили другое число и арифметическую функцию, используя eval(), вы можете оценить числа и получить ответ.
При нажатии на кнопки в калькуляторе нужны какие-то результаты, либо они отображаются, либо оцениваются. Для этого вы должны добавить прослушиватели событий в свой код. Таким образом, кнопки будут слушать щелчок. Когда вы добавляете функции в прослушиватели событий, они автоматически выполняют задачу по звуку щелчка.
Блок отображения должен возвращать значение кнопки, на которую вы нажали. Вы можете использовать объект event.target, так как он вернет значение элемента, на котором произошло событие. Например, вы хотите, чтобы число «1» отображалось, как только вы нажмете на него. Для этого вам нужно будет сохранить число в виде переменной. Используя функцию «если», вы сравните существующую переменную, чтобы определить, равна она нулю или нет. Если это ноль, вы добавите его к пустой строке, чтобы ни одно число не начиналось с нуля. Наконец, вы добавите содержимое ключа «1» в отображаемую переменную. В результате, как только будет нажата цифровая клавиша, вы увидите содержимое в поле дисплея.
Наконец, вам нужно создать функцию, которая поможет применять математические операции к отображаемым числам. Убедитесь, что ваш калькулятор на JavaScript может легко выполнять математические вычисления. Чтобы включить эту функцию, вы можете использовать комбинацию синтаксисов и методов. Мы указали код для элементов JavaScript ниже для вашего ознакомления.

// выделяем все кнопки

константные кнопки = document.querySelectorAll («кнопка»);

// выбираем элемент <input type="text" class="display" disabled>

const display = document.querySelector('.display');

// добавить прослушиватель событий к каждой кнопке

buttons.forEach (функция (кнопка) {

button.addEventListener('клик', вычислить);

});

// вычислить функцию

функция вычислить (событие) {

// текущее значение нажатой кнопки

const clickedButtonValue = event.target.value;

если (clickedButtonValue === '=') {

// проверяем, не пуст ли дисплей, затем делаем только расчет

если (отображаемое.значение !== ”) {

// вычислить и показать ответ для отображения

display.value = eval (display.value);

}

} иначе если (clickedButtonValue === 'C') {

// очищаем все на дисплее

отображение.значение = ";

} еще {

// в противном случае объединяем его с дисплеем

display.value += clickedButtonValue;

}

Обязательно к прочтению: объяснение архитектуры и компонентов Java

Подводя итоги

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

Если вам интересно узнать больше о Java, разработке программного обеспечения с полным стеком, ознакомьтесь с программой Executive PG upGrad и IIIT-B по разработке программного обеспечения — специализация в разработке полного стека, которая предназначена для работающих профессионалов и предлагает более 500 часов интенсивного обучения. , более 9 проектов и заданий, статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.

Получите работу своей мечты

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