Калькулятор на чистом JavaScript и Grid CSS с нуля | Верстка, скрипт и его безопасность

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 63

  • @CodeQuestRu
    @CodeQuestRu  3 года назад +4

    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 - Подведение итогов

  • @steelso2273
    @steelso2273 3 года назад +4

    Дружище! Не останавливайся, ты добьёшься больших успехов, спасибо за качественный контент!

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Благодарю за поддержку! Пока это действительно кому-то помогает и есть такие комментарии, буду продолжать =)

  • @badi-kuba
    @badi-kuba 3 года назад +2

    Очень качественно.Голос топ для учения 😅 без препинаний и всяких мыканий.Спасибо и продолжай в том же духе!

    • @CodeQuestRu
      @CodeQuestRu  3 года назад +1

      Благодарю за поддержку!
      Буду стараться =)

  • @turembekov
    @turembekov 3 года назад +2

    Как всегда,все коротко и понятно. Супер. Молодец! Так держать.

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Спасибо за поддержку!
      Дальше больше, еще очень много тем нужно обсудить =)

  • @podpalmoi
    @podpalmoi 2 года назад +1

    Автор, благодарю за видео. Без него я бы так и не осилил калькулятор) Я только учусь и он у меня вышел подлиннее вашего, я писал каждую кнопку. Желаю счастливой и долгой жизни.

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Все с чего-то начинают =)

  • @atoomotr
    @atoomotr 2 года назад

    Супер представление материала! Редко таких найдёшь.
    Подписываюсь.

  • @turembekov
    @turembekov 3 года назад +3

    Дружище, ты очень круто объяснил про FlexBox CSS, но ждём такие же видео про CSS GRID.

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Спасибо! Все будет =)

  • @GE888
    @GE888 Год назад

    Почему при нажатии кнопок, отображается двойной символ?

  • @rda715
    @rda715 3 года назад +1

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

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Приветствую, рад каждому в наших рядах!
      Надеюсь, что не подведу и действительно дам пользы =)

    • @vanyg4786
      @vanyg4786 4 месяца назад

      Выучил?

  • @Полезныетоварыисоветы

    Подача материала суперская! Спасибо!

  • @AishaJo
    @AishaJo 10 месяцев назад

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

  • @ТурсунайКарабаева-ж8п

    Все супер! Спасибо за подробную информацию

  • @karisbayerdaulet5546
    @karisbayerdaulet5546 2 года назад

    Как сделать воспроизведение в степень в этом калькуляторе

  • @host9580
    @host9580 Год назад

    Как в этом коде можно заменить функцию eval?))

  • @Kazuma000
    @Kazuma000 2 года назад

    Парень ты крут!
    Спасибо большое👍

  • @АлексейКомлев-т4с
    @АлексейКомлев-т4с 2 года назад

    Крутая вёрстка)

  • @AnatolyGradovoy
    @AnatolyGradovoy 2 года назад

    Подписался, скажи , а почему ты используешь 2 нижних подчеркивания в названиях классов? у многих замечаю, п мне так симпотичней одно

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Это наименование элементов по методологии БЭМ: блок__элемент_модификатор

  • @ganjackal
    @ganjackal 3 года назад +1

    Круть, круть , а реально такие приложения как то сохранять у себя на компе не как файл веб страницы , а как приложение desktop?

    • @CodeQuestRu
      @CodeQuestRu  3 года назад +2

      Реально, но это нужно копать в сторону electronjs и других подобных решений. Загугли, если интересно =)
      Если не забуду, как-нибудь запишу про это отдельный урок!

  • @preaton8751
    @preaton8751 2 года назад

    Спасибо вам огромное

  • @atoomotr
    @atoomotr 2 года назад

    Но ссылка в телеге не работает, пишет, что не найден.

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Странно, нужно проверить

  • @ИльяЛоскутов-я4у
    @ИльяЛоскутов-я4у 2 года назад

    Очень полезный урок !

  • @u-kob
    @u-kob 2 года назад

    А как же директива "use strict" в начале документа? :)

    • @CodeQuestRu
      @CodeQuestRu  2 года назад +1

      Можете добавить =)

    • @u-kob
      @u-kob 2 года назад

      @@CodeQuestRu благодарю, я знал, что Вы добрый :)

  • @augen2488
    @augen2488 2 года назад

    Видео топ, но как ограничить количество вводимых символов, чтоб они не вылезали за калькулятор?

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Можно округлять или обрезать лишнее =)

  • @VagonFactov
    @VagonFactov 3 года назад

    мне урок зашел, лайк

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Супер, спасибо за поддержку

  • @ЕвгенийЕгунов-и3ч
    @ЕвгенийЕгунов-и3ч 2 года назад

    Привет супер !очень полезно

  • @ВремяКук
    @ВремяКук 2 года назад

    Очень круто!!!!!

  • @sauleoichieva7148
    @sauleoichieva7148 3 года назад

    Спасибо, полезно!

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Супер! Рад, что понравилось =)

  • @IlyaKuznetsov1983
    @IlyaKuznetsov1983 2 года назад

    Получилась иллюзия ! ))) на экране смартфона , я вижу белые точки между кнопок. Серый фон и белые кнопки.

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Да, есть такое =)

  • @verny_dreva
    @verny_dreva 3 года назад

    Помоги пожалуйста! У меня цифры в столбик, а не в линию пишет. Уже несколько раз пересмотрел видео, все правильно вроде написал. Помоги пожалуйста!

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Хорошо, можешь отправить свой код через какую-нибудь песочницу, например codepen.io?
      либо просто скинь их мне в ВК, гляну =)

    • @verny_dreva
      @verny_dreva 3 года назад

      @@CodeQuestRu хорошо

    • @verny_dreva
      @verny_dreva 3 года назад

      @@CodeQuestRu Посмотрите, пожалуйста

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Смотри ответ =)

    • @АнтонГримов-д9ь
      @АнтонГримов-д9ь 3 года назад

      У меня то же самое, помоги пожалуйста дружище

  • @BrestSouth
    @BrestSouth 3 года назад

    Спасибо интересное решение

  • @ДимаБатраков-и3ъ
    @ДимаБатраков-и3ъ 10 месяцев назад

    0 объяснений, очень сухо, для новичков будет вообще непонятно