Гайды по JavaScript | Программирование

<input
  defaultValue={…}
  onBlur={…}
  key={value}
/>

Базовый / Начальный уровень 1. Веб-страница Hello World с JS alert 2. Страница, показывающая текущую дату и время 3. Обратный отсчет 4. Цифровые часы 5. Генератор случайных цитат 6. Выбор цвета 7. Калькулятор чаевых 8. Простой список дел (добавление, удаление задач) 9. Игра угадай число 10. Камень, ножницы, бумага 11. Конвертер валют (статичный курс) 12. Конвертер температуры (Цельсий <-> Фаренгейт) 13. Калькулятор ИМТ 14. Калькулятор возраста (ввод даты рождения, показать возраст) 15. Проверка на палиндром 16. Простой калькулятор (сложение, вычитание, умножение, деление) 17. Проверка надежности пароля 18. Mad libs (заполнение пропусков в истории) 19. Валидация формы (email, обязательные поля) 20. Случайный цвет фона при нажатии кнопки Манипуляции с DOM / UI проекты 21. Карусель изображений 22. Модальное окно 23. Компонент вкладок 24. Аккордеон меню 25. Адаптивное навигационное меню (мобильное + десктоп) 26. Кнопка прокрутки вверх 27. Прилипший заголовок при скролле 28. Бесконечная прокрутка (подгрузка контента при скролле) 29. Компонент подсказки (tooltip) 30. Переключение светлой / темной темы 31. Галерея с подсказками (при наведении на изображение показывается описание) 32. Анимация появления при скролле 33. Прогресс-бар (например, процент прокрутки страницы) 34. Список с перетаскиванием 35. Сортировка колонок таблицы 36. Фильтр / поиск по списку элементов 37. Лупа / увеличение изображения 38. Таймер обратного отсчета с прогресс-баром 39. Эффект параллакса при прокрутке 40. Фотогалерея с лайтбоксом Проекты среднего уровня (API / данные / CRUD / Local Storage) 41. Приложение погоды (используя API погоды) 42. Новости (используя новостной API) 43. Генератор случайных профилей пользователей 44. Поиск фильмов (например, через OMDB) 45. Поиск рецептов (через API рецептов) 46. Поиск пользователей GitHub / просмотр профиля 47. Поиск изображений (например, Unsplash API) 48. Браузер данных по Покемонам 49. Страница информации о запусках SpaceX 50. Приложение цитат (через API цитат) 51. Чат-бот с простыми ответами 52. Трекер расходов (с сохранением в local storage) 53. Приложение заметок (CRUD + local storage) 54. Трекер привычек 55. Менеджер закладок 56. Список дел с категориями / виджетами 57. Приложение для покупок 58. Менеджер контактов 59. Викторина (множественный выбор) 60. Приложение с карточками для обучения Продвинутые / Full Stack или интеграционные проекты 61. Система аутентификации (вход / регистрация) 62. Панель управления (графики, статистика) 63. Каталог продуктов + корзина для e-commerce 64. Интеграция платежного шлюза (sandbox) 65. CMS блог (создание, редактирование, удаление постов) 66. Чат в реальном времени (websockets) 67. Форум / доска сообщений 68. Социальная лента (посты, лайки, комментарии) 69. Многопользовательская доска для рисования (canvas + socket) 70. Совместный редактор документов 71. Инструмент управления проектами (канбан-доска) 72. Сайт с объявлениями недвижимости 73. Платформа вакансий 74. Система бронирования событий / билетов 75. Календарь с планировщиком событий 76. Приложение планировщика путешествий 77. Приложение для управления задачами с напоминаниями 78. Трекер фитнеса с графиками прогресса 79. Музыкальный плеер с плейлистами 80. Подкаст-плеер Утилиты и продуктивность

191. Библиотека веб-компонентов 192. Создание UI компонента / дизайн-система 193. Библиотека микро-анимаций 194. SSR (Next.js) фронтенд проект 195. Генератор статических сайтов на JS 196. JAMstack сайт с headless CMS 197. GraphQL API + фронтенд 198. Совместная работа в реальном времени (документы, доски) 199. Взаимодействие с блокчейном (Web3 basics) 200. Машинное обучение на JS (TensorFlow.js / Brain.js demo)

81. Генератор PDF из формы 82. Конструктор резюме / CV 83. Генератор QR-кодов 84. Сканер штрих-кодов (через веб-камеру) 85. Редактор изображений (обрезка, поворот, фильтры) 86. Генератор цветовых палитр 87. Генератор CSS (например, box-shadow, градиенты) 88. Markdown превью 89. Форматтер / валидатор JSON 90. Конвертер CSV в JSON 91. Конвертер единиц (длина, вес, объем) 92. Таймер Помодоро 93. Таймер обратного отсчета для событий 94. Будильник 95. Таймер фокусировки с перерывами 96. Трекер бюджета с графиками 97. Генератор счетов 98. Загрузка и предпросмотр файлов 99. Drag & drop загрузчик файлов 100. Инструмент копирования/вставки в буфер обмена Визуализация данных и графики 101. Линейный график для отображения трендов 102. Столбчатая диаграмма для сравнения 103. Круговая / пончиковая диаграмма 104. График с данными в реальном времени 105. Геокарта с наложением данных 106. Тепловая карта 107. Сетевой граф 108. Дерево / иерархическая диаграмма 109. Радиальная диаграмма для метрик 110. График цен на акции Игры / интерактивные проекты 111. Крестики-нолики 112. Змейка 113. Сапер 114. Игра на запоминание (Memory) 115. Блэкджек или покер 116. Виселица 117. Генератор / решатель Судоку 118. Игра 2048 119. «Ударь крота» 120. Платформер (2D) 121. Космический шутер 122. Башенная защита (Tower Defense) 123. Пазл-слайдер (15-пазл) 124. Генератор + решатель лабиринта 125. Понг 126. Клон Flappy Bird 127. Клон Breakout 128. Игра Simon (запоминание паттернов) 129. Тест скорости печати 130. Тест реакции Мобильные / PWA / оффлайн 131. PWA погоды 132. Оффлайн список дел 133. PWA заметок с синхронизацией 134. Оффлайн новостной ридер 135. Трекер бюджета с оффлайн хранением 136. PWA список покупок 137. PWA для просмотра фильмов 138. PWA трекер привычек 139. PWA фитнес-программа 140. PWA для изучения языков (карточки) Бизнес / нишевые проекты 141. Система бронирования ресторанов 142. Фронтенд доставки еды 143. UI/UX бронирования отелей 144. Карта + бронирование для ride-sharing 145. Маркетплейс недвижимости 146. Сайт объявлений 147. Рынок аренды (авто, инструменты) 148. Платформа для репетиторов 149. Платформа фриланс-заданий 150. Аукционный сайт Разное / эксперименты 151. Распознавание речи 152. Чат с AI / интеграция с GPT-подобным API 153. Распознавание лиц 154. Сканер QR / штрих-кодов через камеру 155. Управление жестами 156. Основы AR / VR в Web (WebXR) 157. Рисование через WebGL или Canvas 158. Визуализатор музыки 159. Синтезатор / драм-машина 160. Аудио рекордер + редактор Полированные портфолио / капстоун проекты 161. Полный e-commerce сайт (фронт + бэк) 162. Многоарендная панель (multi-tenant) 163. MVP SaaS продукта 164. Многопользовательский чат + обмен файлами 165. LMS (Learning Management System) 166. Блог-платформа с темами и редактором 167. Соцсеть с лентой в реальном времени 168. UI видеостриминга (загрузка, воспроизведение) 169. Маркетплейс (физические или цифровые товары) 170. Приложение бронирования / расписания с оплатой Интеграции / DevOps / API / тестирование 171. Интеграция OAuth2 (Google, GitHub) 172. Push уведомления 173. Пример использования Webhooks 174. Подписки на платежи 175. Панель аналитики (графики + метрики) 176. Автотестирование фронтенда (Jest, Mocha) 177. Настройка CI/CD для фронтенда 178. Деплой через Docker + облачный хостинг 179. Пример микро-фронтендов 180. Серверлес функции + фронтенд Дополнительные идеи 181. Аггрегатор блогов 182. RSS ридер 183. Трекер цен (например, отслеживание изменения цен товаров) 184. Сервис уведомлений (например, при изменении чего-то) 185. Социальный вход + настройки профиля 186. Поддержка мультиязычности / i18n 187. Демонстрация доступности (клавиатурная навигация, экранный ридер) 188. Переключение тем с кастомными темами 189. Оптимизация производительности (lazy load изображений и т.д.) 190. SEO-дружелюбное JS приложение Современные технологии / бонус