Создаем калькулятор 👨‍💻 JavaScript. Без eval, по шагам для начинающих

⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
🧠 Чат Telegram c мозголомками : t.me/itgid_info
👇 Разверни для полной информации
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
🧑🏻‍💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/course/arraymethod
На прошлом уроке мы верстали калькулятор, настало время его оживить с помощью JavaScript. Вешаем события на кнопки и реализуем логику вычислений на простом коде.
00:00 Изучаем верстку калькулятора
01:15 Создаем переменны для калькулятора JS
02:50 Создаем массив кнопок чисел и действий
04:15 Функция clearAll в калькуляторе
05:20 Обрабатываем нажатия кнопок
08:20 Заполняем первое число
10:40 Заполняем знак действия калькулятора
12:00 Заполняем второе число
15:40 Выполняем рассчет в калькуляторе JavaScript
21:00 Обработка деления на нуль
Моя рабочая станция:
Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 16GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB
Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D
Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro
+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics

[@user-co7nl8pf4p]

Для меня как для начинающего очень приятная, информативная и легко воспринимаемая подача материала! Почему раньше вас не замечал?!

[@kinggizzard9353]

Спасибо огромное Александру, очень приятно учиться по вашим видео

[@user-rl8hs4mm7x]

Огромное спасибо за видео! Отличные подробные объяснения 🤩

[@user-jz5cd5uu8w]

Благодарю, Алекс! Интересное видео, подробные пояснения! 🙂👍

[@recentlygod6578]

Лучший, спасибо, ждал продолжение с нетерпением и вот оно!

[@forfedix1019]

Извиняюсь за правки учителю, сам я разбираюсь меньше в этом всё, но знаю точно, что пишется не "secont", а "second". Понимаю, что там вы указывали комментарий в JavaScript и он ни на что не влияет, но просто небольшая помарка) А так уроки очень познавательные, спасибо большое) Всё стало гораздо понятнее в работе с HTML, CSS и JavaScript )

[@dmitriymedvedev70]

Алексей! Хочу поблагодарить вас за ваши видео по JS. Смотреть начал недавно, но пока все доступно и понятно.

[@user-vs1it4no2v]

Спасибо супер !Очень понравилось .Достаточно понятно

[@vasyl_trots]

Неймовірно крута подача матеріалу. Дякую!

[@leaf5960]

Лучше сделать лисенер на каждую кнопку. Все обработчики вынести в отдельные функции для реюза т.к. мы можем нажимать на ui и можем нажимать на нумпаде. Будет читаемый, расширяемый и понятный код. Так же легко будет покрыть тестами.

[@user-zp5jn8ht5n]

Никогда не писал на JavaScript, но очень было интересно

[@oleksandrsmyrnov9275]

спасибо за ваш труд!!!

[@mikhail_shokun]

очень просто и доходчиво, как всегда, спасибо вам Алекс

[@user-xh6dd2vv6k]

Просто крутяг. Спасибо за видео!

[@jscripts2697]

Отличный урок, много нового узнаешь

[@user-qc5qb7dy5e]

Было интересно, спасибо и респект автору

[@iMan-ql4gx]

Классное объяснение. Функции % и +/- было бы хорошо реализовать. Как то у меня пока не получилось.

[@user-ii2me6ul2q]

Ну ты гигант брат. Спасибо за урок

[@user-sf1ol3gh8v]

спасибо за видео. Делал с вами и все получилось. Нашел 1 баг. Если после каждого действия перед следующим вычислением не нажимать равно, то выводит ошибочные данные. Прим: 1) 2+2 = 4 -> 4+2 = 6 (так работает корректно, но обычно люди не нажимают на равно после каждого действия если нужно произвести несколько операций. И в этом случае если если мы нажмем 7+7-7 (например), то выведет -70. Но рекомендую всем новичкам постараться пофиксить это самим, пока я фиксил этот и другие баги получил дополнительных знаний. Еще раз спасибо за урок

[@chieftain6539]

Самое нормальное решенее,спасибо!

[@sa1ntseye648]

Спасибо за видео , очень интересно

[@Sashabutter228]

Ты очень крутой! Спасибо большое 🤝

[@DamedParadis]

ОГо! Спасибо, а вначале казалось все элементарно

[@Exigoll92]

Было круто! Ждем продолжение с фиксом багов! Поддержите камрады🙂 По более бы такого контента

[@podsvinokSatani]

не, это уже интересная задача для саморазвития

[@user-cu4cy2tv9l]

пофиксил и доработал, чекайте мой коммент там ссылка на деплой)

[@KseniaFr]

Пытаюсь изучать JS. Спасибо за ролик

[@Learn-Dev_]

Круто!!!

[@Anatoli-bq1pe]

Благодарю!

[@MrKOHKyPEHT]

Казалось бы: простой калькулятор. Но когда сделал основу и начинаешь думать над доп фичами и их реализацией - растёт азарт.

[@itgid]

Я поэтому и люблю эту задачу. Она глубокая. Именно благодаря ей я в свое время познакомился с Обра́тная по́льская за́пись

[@Tui3694]

@@itgid не легче готовую библиотеку скачать для калькулятора?

[@yuriilukianovych8660]

@@Tui3694 дело не в том, чтобы найти готовое решение, а в том, чтобы практиковать приобретённые знания языка на реальной и интересной задаче

[@rob3190]

спасибо тебе большое :)

[@user-um6sm4jn3r]

А будет значительная разница в синтаксисе если этот калькулятор в писать в react native?

[@yuriilukianovych8660]

Ещё нужно обработать следующую ситуацию: пользователь ввёл a, b и знак, но вместо "=" нажимает другой знак. Здесь 2 варианта: 1) сделать вычисление, как бы при нажатии на равно, результат будет в переменной a, записать этот новый знак и ждать ввода b 2) выводить вверху сложное выражение, которое вычислить по нажатию "=" Ещё нужно задать количество цифр после точки в выводе результата.

[@user-cu4cy2tv9l]

он запоминает результат, перезаписывает его в a, и дальше вычисления по кругу

[@agraiskr]

@@user-cu4cy2tv9l и что получится если 4+5-2*6+4/3= ???

[@user-zd3hi7tq8p]

Крутий гайд 👍

[@VladTsyb]

Спасибо!

[@tobyalderweireld8445]

Интересно!

[@youngprogrammer3858]

Пожалуйста, укажите эффект вывода звука при нажатии цифр

[@anthonyjameson7129]

Скажите, а почему нельзя было onclick повесить на . btn вместо . buttons. Тогда бы не пришлось проверять нажата ли кнопка. Попробовал так сделать, но не работает почему то

[@hikarukun5126]

После длительной работы с React/ReactNative и их библиотеками сел для разнообразия сделать калькулятор и потратил на это 2 часа … чтобы полностью без ошибок работал, но результатом я остался недоволен, решил посмотреть видео 😁

[@serdotsenko]

после реакта такие видео смотреть вредно. т.к. в них акцент на работу с DOM API, что при разработке на Реакте считается плохой практикой - на прямую работать с DOM 🤓 и вообще кто планирует изучать Реакт, то после базы по JS'у нужно сразу переходить на Реакт и не тратить время на DOM. это правда могут спросить на собеседовании, но вот как начнут спрашивать, тогда и выучите 😉

[@Daleever]

У меня непонятная проблема: для класса buttons всегда flex стоит и это не меняется, то есть все кнопки в один ряд и они при гриде не меняют свое положение вообще. Хром последняя версия, код идентичный ( смотрел код в самом браузере и строка с display:grid была зачеркнута)

[@arsa946]

Александр, спасибо! Расскажите про генерацию QR code. А также чтобы переход был на сервер. Тема не раскрыта в интернете.

[@itgid]

Так даже видео есть

[@Tui3694]

хочешь qr сертификата от коронавируса сделать?

[@user-iz9lh5vj8e]

Не подскажете, как можно округлить числа с множеством цифр после запятой при делении? Например «0.5555555» можно же округлить до «0.5» ? При этом чтобы при выполнении других математических операций в ответе было целое число например «46», а не допустим «46.0»? А то никак не могу сообразить, как сделать округление, заранее спасибо

[@melmenx]

используйте toFixed();

[@jarqynn6619]

Спасибо

[@swishers2807]

Где код можно скачать?

[@user-bm4sl7jq1e]

Будет проблема при повторном нажатии кнопки "." - точка внесется несколько раз, и, в отличии от незначащих нулей превратит калькулятор в тыкву.

[@yuriilukianovych8660]

if (key === '.' && a.includes('.')) { a += ''; console.log(a, b, sign); out.textContent = a; } else { a += key; console.log(a, b, sign); out.textContent = a; } Такую же проверку и для переменной b

[@bayel5920]

@@yuriilukianovych8660 а куда этот код вставлять, я просто недавно начал учиться

[@yuriilukianovych8660]

@@bayel5920 это вместо кода, где записываем ввод в переменную a. Мы просто расширили код

[@bayel5920]

@@yuriilukianovych8660 спасибо

[@user-rw4sq3ev6f]

​@@yuriilukianovych8660 А не подскажете почему с переменной b этот код не работает?

[@UnravelWorld]

Мне интересно было бы посмотреть на ограничение цифр. Как оно делается. Я пробывал методы slice, substring. У меня была такая проблема что я ограничил этими методами, ну цифры остановились на ограничителе в 10 цифр и стали перезаписывать друг друга, так и не получилось исправить.

[@azigurbanov4203]

Здравствуйте, у меня выводит ошибку null при объявлении onclick

[@armenbadalyan7049]

Алекс а где можно найти весь этот код. у меня что то не работает?

[@aquamanmyn]

спасибо

[@James-oh1vy]

На 9:30 у вас при нажатии пропадают цифры, а у меня ничего не происходит выдает такую ошибку Uncaught TypeError: Cannot set properties of null (setting 'onclick')

[@pbarovsky]

точку поставить надо в скобках где объявляется класс.

[@andrewgrechukh3139]

Щоб зробити кнопку +/-, то можна просто число помножити на -1 і знак поміняє значення. Проста матиматика :)

[@volodymyrkharin2332]

Как ограничить количество символов в .calc-screen?

[@mrzmove1426]

a*b/100=c это формула вычета процента из суммы

[@user-ix4cv9zf8y]

Почему вы в свиче прописали приведение к числу только в одном кейсе?

[@mirkeimar]

Если после оператора нажать оператор? Проморгал этот момент в видео или не ставилось условие?

[@user-yk6iq5hn4d]

Мы по нажатию на оператор его задаём: 5 + - это 5 -

[@user-yk6iq5hn4d]

Да, я делал более сложный, но похожий калькулятор на c# в 10 лет. Прям в детство вернулся. По памяти могу сказать, что нельзя сделать несколько действий за один шаг, типа = 5+5-7+8. Это можно решить, если а, б (числа) заменить на массив чисел и массив знаков, но это будет намного сложнее с приоритетом операторов или вложенные switch. eval конечно проще, но это крест на безопасности

[@user-bm4sl7jq1e]

Есть система записи операций называется бесскобочная. То ли шведская то ли Датская. Использовали в советских ПМК в 80х годах (были такие БК-34, МК-61) пишется как 34 12 7 + * 15 - считается как (12+7)*34-15

[@user-yk6iq5hn4d]

@@user-bm4sl7jq1e Надо разобраться, никогда о таком не слышал

[@Tui3694]

@@user-bm4sl7jq1e ну и хрень

[@trezzh4]

@@user-bm4sl7jq1e обратная польская

[@user-cu4cy2tv9l]

в топку eval

[@munarbeksarbashov5]

very nice

[@10sv93]

И еще, может я и не прав, но для совсем новичков данный код не заработает вы не показали как подключить JS файл к index файлу.

[@mehdiamiraslanli4040]

+

[@Eldar_Radle]

[@MsMatveev]

Я очень хотел найти ответ на этот вопрос )))))

[@MsMatveev]

@@Eldar_Radle надо добавить scr как тут написанно в body?

[@user-pn6op5nf6w]

@@MsMatveev да , рядом с закрывается тегом body

[@igormaksymiv113]

Дякую за чудовий урок. Знайшов баг у цьому калькуляторі. При виконанні другої дії підряд в змінну b заноситься лише одне число.

[@user-hn1kt8uu6v]

Всем привет, ребят выдает такую ошибку-" Uncaught ReferenceError: out is not defined at HTMLDivElement" Что делать? подскажите пожалуйста.

[@MrUnknownman1986]

А источник кода есть у вас ?

[@hostvi]

1 номер = first number 2 номер = second number 3 номер = znak operatsui

[@yar0vayzz869]

можете скинуть файл калькулятора пожалуйста html css и js очень нужно

[@Bolvar_uz]

Здравствуйте у меня вопрос как строить логику в js и вообще в программировании я не могу понять что нужно делать?

[@user-uh1kh9lk2i]

Для начала нужно изучить алгоритмизацию, тогда и логика должна появиться

[@user-wr4ej3so9y]

Около двух месяцев назад я писал свой собственный первый калькулятор на JS, и по началу думал что всё легко и без напряжения, но когда вник в суть и логику работы - понял что есть просто 1000 вещей которые можно добавить и исправить, но я остановился на простом и рабочем варианте. Когда я писал его, я использовал eval, но даже сегодня, когда я сделал калькулятор по примеру из видео у меня остался один не решённый баг... А заключается он в том, что пользователь определённо захочет потыкать на кнопочки, и нажать, к примеру "." несколько раз подряд. Так вот, я пытался сделать проверки предыдущего символа, чтобы если это вдруг ".", то запретить её повторный ввод. Но ведь после точки можно поставить снова число, А ВОТ ПОСЛЕ НЕГО УЖЕ СНОВА ТОЧКУ! А ведь чисел наподобии "3.14.1" не существует, и я пытался снова добавить проверки на наличие точки, и перебор всей строки, и кучу ещё всяких заморочек с этим. В итоге получается полнейший бред из NaN'ов инфинити и ошибок. В общем, если вы знаете пути решения этой проблемы, прошу отписаться в комментариях, а если это читает автор видео, то записать третью часть с решением проблем, и доработкой неработающей части нашего кальулятора)

[@leaf5960]

if (!/\./.test(your string with number)) // do something

[@mikhail_shokun]

дополнить код автора и все будет работать адекватно без повторных повторений точек if (digit.includes(key)) { if (b === '' && sign === '') { if (key === '.' && a.includes('.')) { a += ''; out.textContent = a; } else { a += key; out.textContent = a; } } else if (a !== '' && b !== '' && finish) { b = key; finish = false; out.textContent = b; } else { if (key === '.' && b.includes('.')) { b += ''; out.textContent = b; } else { b += key; out.textContent = b; } } return; }

[@user-cu4cy2tv9l]

// удаление дубликатов точек duplicateDots: (arr) => { let doubleComma = arr.filter(item => item === '.').length; if (doubleComma > 0) { let commaIndex = arr.indexOf('.', 0); let firstComma = commaIndex; for (let i = 0; i

[@mephisto2226]

это делается легко в одну строку через условие if(num.includes(“.”)) return

[@mephisto2226]

@@mikhail_shokunспагетти код

[@user-vn3yl6er2u]

Ещё неплохо было бы, если б Вы объяснили код , что делает например onclik. Я начинающий и при просмотре не понятно. Опишите пару слов берёт это делает это и это и всё будет просто замечательно

[@mirzomok]

задался вопросом , гугли в ту же минуту

[@liqiliquooor3090]

о даа, еще больше if)

[@user-om6dx8rv4p]

А на php как это реализовать?

[@elfikhovhannisyan9098]

Как название zip файла в телеге?

[@user-cj5rq9dx9o]

Почему ошибка появляется с onclick (Uncaught TypeError: Cannot set properties of null (setting 'onclick') at calc.js:22)

[@davejonns3825]

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

[@andrewgrechukh3139]

в мене теж таке вийшло, то я забув в js написати крапку перед класом buttons :)

[@dlazder3937]

Вопросик, а 2+2+2 работать не будет? Как сделать это без eval?) (У меня с eval даже не получилось))))

[@nk-lg7vk]

Да, хотелось бы видео по проблеме со сложением/умножением дробных чисел, типа 0.1 + 0.2 , чтобы результат был как в настоящем калькуляторе.

[@glorglorsky7987]

(0,1 * 10 + 0,2 * 10) / 10 =0,3. Можно toFixed(2)

[@lol9tor]

можно использовать просто библиотеку типа BigInt

[@Tui3694]

@@lol9tor как ты дробные числа в bigint засунешь?

[@Tui3694]

@@glorglorsky7987 как ты решишь с 0.1*3?

[@lol9tor]

@@Tui3694вообще не вижу никакой проблемы

[@elizavetaeremenko6558]

Всем привет! У меня на строке const key = Event.target.textContent; выдает ошибку в браузере. Во-первых event с маленькой буквы зачеркивает, во-вторых в ошибке указано что нет возможности получить данные textContent...хотя файл к html подключен. Расстроилась, пошла искать другое видео. Первый раз пыталась сделать что то на JS)

[@user-nq6zu5lw2o]

В общем у меня получилось подключить calc.js к index.html только через После чего получил ошибку Uncaught TypeError: Cannot set properties of null (setting 'onclick') в строке document.querySelector('.ac').onclick = clearAll; Не пойму чего творить дальше. Поможите плиз. Винда 10 21H2 Хром Версия 96.0.4664.45

[@harrisonwinston2850]

у тебя в html файле нету блока с классом ac

[@harrisonwinston2850]

потому что в момент загрузки скрипта , html еще не загрузился, подключи правильно скрипт.

[@user-nq6zu5lw2o]

@@harrisonwinston2850 Спасибо огромное! Блок с классом ac в html eсть. Подключил calc.js в конце index.html в body. Заработало!!!)

[@user-ri8wv4ys4s]

@@user-nq6zu5lw2oакуеть!

[@destonshow4840]

а как скачать калькулятор, прост у меня не получилось написать

[@ankub7835]

Добрый день, спасибо вам большое. Не могу понять у меня onclick почему то не работает в уже все перешерстил не могу понять.

[@user-lu7mz8es6h]

у меня тоже не работает . нашел причину?

[@ankub7835]

@@user-lu7mz8es6h да, 1 не там подключил js (нужно в HTML ниже последнего , 2 проверь верно ли записан регистр:а именно там где в джава скрипте идёт блок с clearAll ниже две строки которые начинаются с if (! event.... У меня в этих строках list было написано с маленькой буквы

[@jssecrets]

Спасибо! Классическая отечественная школа преподавания). А как сделать, чтобы точку нельзя нажимать более одного раза?

[@wickedcode6338]

if (a.includes('.') ) return; // если есть точка в числе, ничего не делать

[@user-ex1yj6ub6i]

if(key == '.' && a.includes('.')) { console.log(a, b, sign); out.textContent = a; return}; // если нажата кнопка '. ' и уже есть точка в числе, ничего не делать

[@user-cu4cy2tv9l]

// удаление дубликатов точек duplicateDots: (arr) => { let doubleComma = arr.filter(item => item === '.').length; if (doubleComma > 0) { let commaIndex = arr.indexOf('.', 0); let firstComma = commaIndex; for (let i = 0; i

[@vladislavbokhan1265]

у меня CSS код не работает(. Просто все символы в столбик выстроились

[@golkhoplan6889]

есть пару ошибок. 1. если много напечатать цифры выходят за рамки 2. тот же баг когда цифры ответа не помешаются 3. позволяет несколько раз подряд поставить точку

[@user-cu4cy2tv9l]

пофиксил

[@mr_timuchin674]

привет, решил ошибку с нулем перед числами: добавил массив digitSecond, где оставил только числа в условия добавил пункт if (a === '0' && digitSecond.includes(key)) { a = ' '; }

[@mr_timuchin674]

забыл добавить, для b такое же условие следует написать :)

[@user-fg5cd3mv2z]

Здравствуйте! У меня ошибка calc.js:22 Uncaught ReferenceError: clearall is not defined at calc.js:22 Что не так я сделал?

[@tgfilmoweek]

Объявил функцию clearAll без скобочек, должно быть clearAll()

[@olezhonnv3215]

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

[@user-gk4ye4zh5x]

Если взять 3 числа (и более), то калькулятор уже не работает правильно. А ведь пользователь может работать с разным количеством чисел. Как тогда быть? Благодарю за урок!

[@dan9banan]

if (action.includes(btn)) { if (sign !== '') { // If yes, call the count() function count(); sign = btn; result.textContent = sign console.log(sign); } else { // If not, set sign to btn and update the result.textContent sign = btn; result.textContent = sign; console.log(sign); } }

[@user-zu7fl9oc9c]

@@dan9banan объясни поподробнее, пожалуйста 🙏🙏🙏🙏

[@lianguema6963]

Я вот подзависла на onclick, чем заменить и как ?

[@Andrii1728]

если проблема в том что не работает код и консоль ссылается на ошибку onclick, попробуйте добавить в подключение джаваскрипта defer. Будет:

[@penzienko]

Еще одна из стандартных функций базовых калькуляторов это если нажать 'число > умножить > равно' то число должно возвестись в квадрат '5 * =' 25

[@itgid]

Да. Так это и реализовано

[@Tui3694]

не знал

[@jamesborn89]

красава! но нолик так и не поправил в верстке=)

[@dmitry_kolom]

Я вот сделал этот калькулятор и у меня появился вопрос, почему нет никаких parseInt? как из строки получается число и почему нет бага джаваскрипта с вот этими 2+22 = 222

[@Fullconcentrate]

перед перемнной + стоит, что автоматически конвертирует ее в число

[@williamccommando7101]

После нажатия на = не принимает иных значений мелочь, а обидно

[@votemha]

А отрицательные числа работают?

[@Fullconcentrate]

да

[@user-mr9xf8dr8o]

А нужно папку какую то на рабочем столе создавать,что бы сонхронизировать между собой java и html,а то система ошибку в написании кода выдаёт,и в названии файла

[@mr_timuchin674]

напиши в ссылке ./свой-адрес

[@maxoftrading]

У меня проблема calc.js:18 Uncaught TypeError: Cannot set properties of null (setting 'onclick') at calc.js:18 , все подключено, названия правильные

[@pavelborodachev]

Оберни весь код скрипта в document.addEventListener("DOMContentLoaded", function(event) { ЗДЕСЬ КОД СКРИПТА }

[@user-uw1se5zl4c]

@@pavelborodachev и в самом конце, после фигурной скобки, закрывающуюся круглую скобку

[@amongushappy3789]

Как это понимать.....

[@Alexsey095]

Автор даже не объяснил, как добавить js в html. После добавления файла js в html, код все равно не работает. Не подскажите почему?

[@KalyaginVasiliy]

Я с такой же проблемой столкнулся. Посмотри, правильно ли написана у тебя функция "onclick". Мог по ошибке написать "oneclick"

[@user-ivan-pop]

Здравствуйте! Думаю проверка деления на 0 не совсем правильная, так так не ловит деление на 00, 000 и т.д.

[@itgid]

Согласен

[@user-uh1kh9lk2i]

Можно делать проверку на infinity, тогда все гуд будет

[@adeusexmachina]

@@itgid в данном случае можно вместо === 0 сделать == 0 и тогда текст '000' будет интерпретирован как 0 но лучше сразу ловить инфинити и нан

[@user-cu4cy2tv9l]

просто напишите функцию которая убирает дубли нулей и всё

[@muratjanyshov3445]

Заметил баг: Если при делении остаток больше 7 ячеек, нижние кнопки сдвигаются вместе с ними

[@Ramaario]

привет. есть калькулятор на java?

[@user-bm4sl7jq1e]

Напиши. Чё там сложно? Можно прям из этого перевести.

[@Ramaario]

@@user-bm4sl7jq1e так я и спрашиваю есть видео у автора по написанию на java. знал бы я как - написал не спрашивал

[@user-sy9gi3vg2e]

@@Ramaario автор пишет на js и php, то есть на java нет

[@jahongir11ganijanov12]

У меня не появился этот калькулятор чё делать? 😫

[@gmmips]

А если в результате штук 10 цифр? Они же вылезут за пределы калькулятора. Уменьшение цифр нужно сделать.

[@Tui3694]

так? var observer = new MutationObserver( function(mutations) { if (a.toString().length > 8) { out.style.fontSize = 500 / a.toString().length + 'px'; } else { out.style.fontSize = '4rem'; } } ); observer.observe(out, { childList: true });

[@gmmips]

Ох... мутации... При непонимании как они работают можно загеморроиться на весь день в поиске ощибки 😁 А по коду, наверное всё же нужно следить за characterData.

[@Tui3694]

@@gmmips так не работает observer.observe(out, { characterData: true });

[@mikhail_shokun]

@@Tui3694Спасибо тебе. Скопировал твой код и подправил для случаев, когда после короткого значения "а" идет длинное значение "b", и когда после длинного "а" идет длинное "b" const observer = new MutationObserver( function(mutations) { if (a.toString().length > 10) { out.style.fontSize = 400 / a.toString().length + 'px'; if (b.toString().length > 12) { out.style.fontSize = 400 / b.toString().length + 'px'; } } else if (b.toString().length > 10) { out.style.fontSize = 400 / b.toString().length + 'px'; } else { out.style.fontSize = '44px'; } } ); observer.observe(out, { childList: true });

[@mephisto2226]

function getReducedSizeOfNumber(){ let currentWidthOfNumber = Number.parseInt(getComputedStyle(output).width); let currentFontSizeOfNubmer = Number.parseInt(getComputedStyle(output).fontSize); while(currentWidthOfNumber > 270){ currentWidthOfNumber = Number.parseInt(getComputedStyle(output).width); output.style.fontSize = `${currentFontSizeOfNubmer--}px`; }; }; вот функция на уменьшение числа в outpute, только вместо outputa примите свой css класс

[@jerdo7917]

0.1 + 0.2 будет прикол, скорее всего)

[@ruslwhite]

Да решается просто же, *10/10

[@Tui3694]

@@ruslwhite это хрень же (0,1 * 10 + 0,2 * 10) / 10 =0,3 как ты решишь с 0.1*3?

[@volodymyrkharin2332]

вы правы, как так? Что это ха баг?

[@Tui3694]

@@volodymyrkharin2332 особенность float IEEE 754. Сделай округление

[@etozhezor]

Мда, у меня код получился на 180 строк… Мой затуп в том что я первое и второе число представлял в виде массивов 🥴 а потом в результате джойнил их) но зато прописал логику недопустимости двух запятых в одном числе, а тут её нет, как я понял

[@alexeyilin1527]

Почему не react?) Понимаю что просто инструмент, но всё же)

[@DraginAnatoliy]

это шутка?) ради калькулятора тянуть реакт?

[@Tui3694]

@@DraginAnatoliy а вообще можно же на чистом js написать такую же архитектуру как у реакт?

[@10sv93]

браузер ругается 9:35 не могу решить ошибку. 20 document.querySelector(".ac").onclick = clearAll; ругается на clearAll calc.js: 20 Uncaught TypeError: Cannot set properties of null (setting 'onclick')