Что для этого потребуется:
() Уметь выполнять зависимость, вычитание, деление и умножение.
() Числа могут быть как целыми, так и десятичными.
() Вы можете очистить содержимое или увидеть результат.
() Дополнительно, бросает шутку, когда пользователь пытается разделить 0 на 0
Сначала вы начнете с создания папки с тремя файлами: html, css и js файлом.
(совет: вы можете легко создать все с помощью команд на терминале, проверьте как здесь).
HTML
В нашем файле Html мы установим его как обычно, создав голову и тело, если вы используете VSCode, вы можете просто ввести восклицательный знак и нажать Enter, и он создаст такой файл:
Затем вам нужно будет добавить ссылку на ваш файл CSS и JS внутри тега head.
Если вы используете VS Code, вы можете загрузить плагин под названием live server, и вы можете открыть свой HTML-файл и просмотреть его в своем браузере без необходимости перезагружать страницу каждый раз, когда происходит изменение.
Теперь создадим каждый элемент калькулятора.
Во-первых, нам понадобится место для дисплея, пока воспользуемся div.
Затем мы создадим каждый элемент калькулятора в виде кнопки. Было бы неплохо иметь представление о том, где будет располагаться каждая кнопка, чтобы вы могли создавать ее в желаемом порядке. Мой веб-сайт для вдохновения: ведение .
Я решаю использовать сетку 4 x 5.
Если вы проверите в своем браузере, вы сможете увидеть свои кнопки.
CSS
Мы будем использовать сетку для отображения наших элементов, во-первых, мы немного изменим наш HTML и создадим некоторый div, который будет содержать весь наш калькулятор, а внутри нашего дисплея у нас будет два div, вывод и предыдущий операнд.
В нашем файле CSS мы будем использовать класс сетки и установить наш дисплей как сетку с 4 столбцами по 100 пикселей с строкой для нашего дисплея с минимальной шириной 120 пикселей, а остальные - высотой 100 пикселей.
Затем мы стилизуем наши кнопки. Я решил сделать свой калькулятор более пастельным, поэтому я использовал цветовое колесо, чтобы получить комбинацию, обычно я использую веб-сайт Canvas.
Если вы посмотрите на свой калькулятор, вы увидите, что там отсутствует пробел (если вы использовали те же операнды, что и я), поэтому я растянул знак равенства так, чтобы он занимал два пробела.
Затем зададим стиль отображения
Теперь ваш калькулятор должен выглядеть примерно так:
JavaScript
А теперь давайте начнем с забавной части ... с JS есть миллион способов сделать то же самое, есть аргументы или определенные способы быть лучше других, но в конце концов, кодирование - это доставка, и в простом и небольшом проекте таким образом, вам не нужно беспокоиться о масштабируемости.
Первое, что мы сделаем, это дадим идентификатор для нашего предыдущего операнда и вывода и используем getElementById в нашем файле JS.
Затем создайте три переменные с именами outputDisplay, prevOperandDisplay, они будут использоваться для хранения всего, что пользователь нажимает, и результата, где мы будем хранить результат нашей оценки.
Чтобы узнать, что щелкнул пользователь, я буду использовать функцию, которая будет получать аргументы, и что она будет делать, так это добавлять это значение на наш выходной дисплей. Я решил присвоить каждой из наших кнопок идентификатор с ее символом, который будет передается в эту функцию по щелчку.
Теперь, когда нам нужно сделать функцию, когда пользователь щелкает символ равенства, это будет выглядеть примерно так:
Теперь, что здесь происходит ... Во-первых, мы проверим, щелкнул ли пользователь что-то, потому что, если мы этого не сделаем, он вернется как undefined.
Во-вторых, мы передадим предыдущему операнду математическую функцию, которую мы оцениваем, и отобразите его с помощью innerHTML.
В-третьих, мы узнаем результат с помощью небольшой функции, называемой eval.
Функция eval () оценивает или выполняет аргумент.
Если аргумент является выражением, eval () оценивает выражение. Если аргументом является один или несколько операторов JavaScript, eval () выполняет эти операторы.
В нашем случае, если мы дадим строку с математической функцией, она выполнит ее нормально, избавив нас от необходимости добавлять дополнительный код.
Затем я изменил отображение вывода как наш результат и установил его значение на отображаться с использованием innerHtml.
Вы должны протестировать его сейчас, и он будет нормально выполнять математические операции.
Теперь давайте сделаем так, чтобы кнопка Очистить работала.
Что нам нужно, так это изменить наш вывод innerHTML, prevOperandDisplay и наш результат, чтобы он снова стал ничем, а затем вызвать эту функцию на нашей кнопке C.
Хорошо, похоже, все уже сделано, последнее, что нам нужно сделать сейчас, это когда пользователь нажимает кнопку +/-, он должен изменить первое число на отрицательное, если оно положительное, или на положительное, если оно отрицательное.
Мое решение заключалось в том, что, поскольку мы работаем со строками здесь (поскольку мы отправляем ввод пользователя в виде строки), нам нужно только вставить знак «-» в начало нашей строки.
Или, если это уже знак «-», чтобы удалить его, а затем установить в качестве результата innerHTML.
КОНЕЦ
Как уже было сказано, в JavaScript есть миллион способов сделать то же самое, и это было мое решение, вы можете найти множество различных руководств, которые можно использовать в Интернете, но самое главное - понять, что происходит. И ВЕСЕЛИТЬСЯ!
Вы можете найти код здесь.
И я сделал еще один проект, в котором я немного (слишком много) повеселился с моей CSS-анимацией, дайте мне знать, что вы думаете о моем надоедливом калькуляторе.
