Как создать калькулятор доставки на JavaScript | JS для начинающих

В этом видео создаём калькулятор стоимости доставки на JavaScript. Вводите сумму заказа - система автоматически определяет стоимость доставки через if, else if и else, подсвечивает активный тир через classList.add и выводит итоговую сумму через toFixed(2). ⏱ ТАЙМКОДЫ 0:00 - Демонстрация проекта - три тира доставки, подсветка активного блока 1:22 - Разбор разметки - атрибут oninput="calculate" на поле ввода 2:39 - Объявляем функцию calculate() 3:04 - Константа order через Number, getElementById и .value 4:33 - Константы tier1, tier2, tier3 через getElementById 5:53 - classList.remove("active") для всех трёх тиров - сбрасываем подсветку 7:14 - let shipping - почему let вместо const 8:02 - if: order - 100 - бесплатная доставка, tier3.classList.add("active") 9:47 - else if: order - 50 - доставка 4.99, tier2.classList.add("active") 11:05 - else: заказ до 50 - доставка 9.99, tier1.classList.add("active") 12:07 - Константа total = order + shipping 12:27 - Выводим order, shipping и total через textContent и toFixed(2) 15:28 - Проверка - вводим разные суммы, тиры подсвечиваются корректно 🔗 ИСХОДНЫЙ КОД https://www.patreon.com/TopchiyDev 📚 ПЛЕЙЛИСТЫ И КУРСЫ 📚 Полный курс JavaScript с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvBaTS0blaMBQYJb5GLaMXB 🚀 JS Практика - проекты с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9Uyv9Xo2A-WCT0D8c1Ret6bVu 📚 Полный курс HTML с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UytoWbG_xrleyom6NfiRLBDE 📚 Полный курс CSS с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyuznEWwwMmvjpG9V2GxG1DQ 🟦 Полный курс Flexbox CSS: 👉 https://www.patreon.com/collection/1320002 🌐 Уроки по хостингу - запуск сайта: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvrhTE4KC5sJK_NoeUX8ZMU 📦 Исходники кода (Patreon): 👉 https://www.patreon.com/c/topchiydev/membership 💬 СОЦИАЛЬНЫЕ СЕТИ 💬 Telegram: 👉 https://t.me/TopchiyDev 🎓 Patreon: 👉 https://www.patreon.com/TopchiyDev #javascript #elseif #jsпрактика #jsдлябегиннеров #webdev #frontend #программирование #калькулятор