Проєкти з рівнями складності
Кожен проєкт — окрема практична вправа, яку можна зробити самостійно, крок за кроком.
Легко
Симулятор банківського вкладу
Рахуємо зростання вкладу по роках з урахуванням процентної ставки. Практика з числами і
Math.round.Легко
Resize Ball
Змінюємо розмір елемента на сторінці по кліку. Перше знайомство зі зміною стилів з коду.
Легко
Конвертер одиниць вимірювання
Переводимо метри у фути, кілограми у фунти і назад. Практика з
switch.Легко
Генератор таблиці множення
Будуємо таблицю множення за введеним числом. Практика з циклом
for.Середньо
Генератор карток товарів
Динамічно створюємо картки товарів на сторінці в циклі. Ближче до реальної верстки.
Середньо
Генератор зірок рейтингу
Малюємо рейтинг зірками за числом від 1 до 5. Практика з циклами і умовами разом.
Середньо
Emoji Generator
Генеруємо візерунок з емодзі за вводом користувача. Забавна практика з циклами і рядками.
Середньо
Price Matrix
Будуємо таблицю цін вкладеними циклами
for. Хороше тренування мислення вкладеністю.Складніше
Міні інтернет-магазин
Власна дисконтна програма, розрахунок знижок і підсумкової суми. Вже схоже на справжню задачу.
Середньо
Калькулятор ваги рюкзака
Рахуємо підсумкову вагу спорядження за списком предметів. Практика роботи з кількома змінними одразу.
Складніше
Taxi Fare Calculator
Рахуємо вартість поїздки на таксі через окремі функції. Практика архітектури коду з кількох функцій.
Складніше
Battle HP Bar
Смужка здоров'я персонажа з кнопками атаки, реген і таймінгом. Ігрова механіка на чистому JavaScript.
Ще ідеї для самостійної практики
Без готового рішення — чудова нагода потренуватися гуглити і розбиратися самому.
To-Do ListСписок задач з можливістю додати, відмітити і видалити пункт.
Годинник у реальному часіПоточний час на сторінці, оновлюється щосекунди.
Генератор випадкового пароляПароль заданої довжини з літер, цифр і символів.
Калькулятор вікуЗа датою народження — скільки повних років виповнилося.
Простий квізКілька питань з варіантами відповіді і підрахунком результату.
Конвертер валютПерерахунок суми за заданим курсом між двома валютами.
Що далі
Хочеш проходити проєкти по порядку з поясненням?
У безкоштовному курсі JavaScript подібні проєкти розібрані покроково, з теорією перед кожним завданням.