Калькулятор на чистом JavaScript и Grid CSS с нуля | Верстка, скрипт и его безопасность
Рет қаралды 18,107
Күн бұрынИсходники к видео:
boosty.to/codequest/posts/8ce...
Подписывайся на альтернативные каналы:
- codequest
- t.me/codequest
В этом практическом уроке я хочу показать вам реализацию калькулятора на чистом JavaScript.
Также в ходе работы мы будем использовать Grid CSS и немного поговорим о безопасности нашего скрипта.
0:00 - Вступление
0:29 - Настройка проекта
1:08 - Разметка калькулятора
2:55 - Оформление разметки
3:21 - Grid CSS
4:12 - Центрирование
4:39 - Блок результатов
5:42 - Кнопки калькулятора
6:55 - Выделение операторов
8:14 - Подключение JavaScript
8:46 - Делегирование событий
10:25 - Значение кнопок
10:46 - Вывод в блоке результатов
11:10 - Логика работы операторов
12:29 - Функция eval() и безопасность
13:20 - Дополнительная защита
14:25 - Подведение итогов
Надеюсь на вашу поддержку и интересные вопросы! До скорых встреч!
@CodeQuestRu 2 жыл бұрын
0:00 - Вступление 0:29 - Настройка проекта 1:08 - Разметка калькулятора 2:55 - Оформление разметки 3:21 - Grid CSS 4:12 - Центрирование 4:39 - Блок результатов 5:42 - Кнопки калькулятора 6:55 - Выделение операторов 8:14 - Подключение JavaScript 8:46 - Делегирование событий 10:25 - Значение кнопок 10:46 - Вывод в блоке результатов 11:10 - Логика работы операторов 12:29 - Функция eval() и безопасность 13:20 - Дополнительная защита 14:25 - Подведение итогов
@turembekov 2 жыл бұрын
Как всегда,все коротко и понятно. Супер. Молодец! Так держать.
@CodeQuestRu 2 жыл бұрын
Спасибо за поддержку! Дальше больше, еще очень много тем нужно обсудить =)
@steelso2273 2 жыл бұрын
Дружище! Не останавливайся, ты добьёшься больших успехов, спасибо за качественный контент!
@CodeQuestRu 2 жыл бұрын
Благодарю за поддержку! Пока это действительно кому-то помогает и есть такие комментарии, буду продолжать =)
@user-ob2fr8sz9v 2 жыл бұрын
Очень качественно.Голос топ для учения 😅 без препинаний и всяких мыканий.Спасибо и продолжай в том же духе!
@CodeQuestRu 2 жыл бұрын
Благодарю за поддержку! Буду стараться =)
@user-tj7iu8bl7c Жыл бұрын
Все супер! Спасибо за подробную информацию
@user-ni3hn8ry9d Жыл бұрын
Подача материала суперская! Спасибо!
@rda715 2 жыл бұрын
привет, очень рад, что наткнулся на твой канал, как раз начал учить JS... Надеюсь будет много годноты, спасибо
@CodeQuestRu 2 жыл бұрын
Приветствую, рад каждому в наших рядах! Надеюсь, что не подведу и действительно дам пользы =)
@atoomotr3553 Жыл бұрын
Супер представление материала! Редко таких найдёшь. Подписываюсь.
@CodeQuestRu Жыл бұрын
Спасибо)
@Kazuma000 Жыл бұрын
Парень ты крут! Спасибо большое👍
@AishaJo 4 ай бұрын
Надо бы еще рассмотреть проблемку: если вписать большое число цифры заходят на обочину самого калькулятора .
@turembekov 2 жыл бұрын
Дружище, ты очень круто объяснил про FlexBox CSS, но ждём такие же видео про CSS GRID.
@CodeQuestRu 2 жыл бұрын
Спасибо! Все будет =)
@podpalmoi Жыл бұрын
Автор, благодарю за видео. Без него я бы так и не осилил калькулятор) Я только учусь и он у меня вышел подлиннее вашего, я писал каждую кнопку. Желаю счастливой и долгой жизни.
@CodeQuestRu Жыл бұрын
Все с чего-то начинают =)
@user-vs1it4no2v Жыл бұрын
Привет супер !очень полезно
@user-ik2ur8rz7o 2 жыл бұрын
Очень полезный урок !
@CodeQuestRu 2 жыл бұрын
Спасибо =)
@preaton8751 Жыл бұрын
Спасибо вам огромное
@sauleoichieva7148 2 жыл бұрын
Спасибо, полезно!
@CodeQuestRu 2 жыл бұрын
Супер! Рад, что понравилось =)
@VagonFactov 2 жыл бұрын
мне урок зашел, лайк
@CodeQuestRu 2 жыл бұрын
Супер, спасибо за поддержку
@user-uf2vs6gp7i 2 жыл бұрын
Очень круто!!!!!
@CodeQuestRu 2 жыл бұрын
Спасибо =)
@user-bn7ij8cr1i 2 жыл бұрын
Крутая вёрстка)
@CodeQuestRu 2 жыл бұрын
Спасибо =)
@GE888 Жыл бұрын
Почему при нажатии кнопок, отображается двойной символ?
@karisbayerdaulet5546 Жыл бұрын
Как сделать воспроизведение в степень в этом калькуляторе
@BrestSouth 2 жыл бұрын
Спасибо интересное решение
@CodeQuestRu 2 жыл бұрын
Благодарю =)
@host9580 Жыл бұрын
Как в этом коде можно заменить функцию eval?))
@ganjackal 2 жыл бұрын
Круть, круть , а реально такие приложения как то сохранять у себя на компе не как файл веб страницы , а как приложение desktop?
@CodeQuestRu 2 жыл бұрын
Реально, но это нужно копать в сторону electronjs и других подобных решений. Загугли, если интересно =) Если не забуду, как-нибудь запишу про это отдельный урок!
@IlyaKuznetsov1983 2 жыл бұрын
Получилась иллюзия ! ))) на экране смартфона , я вижу белые точки между кнопок. Серый фон и белые кнопки.
@CodeQuestRu 2 жыл бұрын
Да, есть такое =)
@AnatolyGradovoy Жыл бұрын
Подписался, скажи , а почему ты используешь 2 нижних подчеркивания в названиях классов? у многих замечаю, п мне так симпотичней одно
@CodeQuestRu Жыл бұрын
Это наименование элементов по методологии БЭМ: блок__элемент_модификатор
@reactnext13 2 жыл бұрын
Интересное видео, JS сила
@CodeQuestRu 2 жыл бұрын
Благодарю! Дальше больше =)
@augen2488 Жыл бұрын
Видео топ, но как ограничить количество вводимых символов, чтоб они не вылезали за калькулятор?
@CodeQuestRu Жыл бұрын
Можно округлять или обрезать лишнее =)
@u-kob 2 жыл бұрын
А как же директива "use strict" в начале документа? :)
@CodeQuestRu 2 жыл бұрын
Можете добавить =)
@u-kob 2 жыл бұрын
@@CodeQuestRu благодарю, я знал, что Вы добрый :)
@atoomotr3553 Жыл бұрын
Но ссылка в телеге не работает, пишет, что не найден.
@CodeQuestRu Жыл бұрын
Странно, нужно проверить
@verny_dreva 2 жыл бұрын
Помоги пожалуйста! У меня цифры в столбик, а не в линию пишет. Уже несколько раз пересмотрел видео, все правильно вроде написал. Помоги пожалуйста!
@CodeQuestRu 2 жыл бұрын
Хорошо, можешь отправить свой код через какую-нибудь песочницу, например codepen.io? либо просто скинь их мне в ВК, гляну =)
@verny_dreva 2 жыл бұрын
@@CodeQuestRu хорошо
@verny_dreva 2 жыл бұрын
@@CodeQuestRu Посмотрите, пожалуйста
@CodeQuestRu 2 жыл бұрын
Смотри ответ =)
@user-hr7rr2cx9s 2 жыл бұрын
У меня то же самое, помоги пожалуйста дружище
@user-cx9fu4if2f 4 ай бұрын
0 объяснений, очень сухо, для новичков будет вообще непонятно
@CodeQuestRu 4 ай бұрын
Бывает
ITDoctor
Рет қаралды 13 М.
Фрілансер по життю
Рет қаралды 270 М.