Проекты на JavaScript для начинающих: начни создавать уже сегодня

Одно дело — читать туториал по JavaScript, и совсем другое — дописать его до конца.

Первое создает иллюзию продуктивности. Второе — это то, где вы действительно учитесь. Вы уже какое-то время усердно проходите уроки по JS, но ваш код всё ещё обитает исключительно в чужих упражнениях? Что ж, это ненадолго.

Знание циклов ничего не стоит, пока вы не примените их для решения реальной задачи. Туториалы учат вас словам. Проекты заставляют говорить на языке.

Поэтому мы подготовили для вас 18 проектов на JavaScript для начинающих, каждый с кратким руководством к действию, чтобы вы знали, с чего начать. Выбирайте один, создавайте, а затем переходите к следующему.

Сначала заложите фундамент JavaScript

Все проекты для новичков на JS строятся на переменных, функциях, условиях, циклах, массивах, объектах и нескольких методах DOM. Если они ещё не вошли у вас в привычку, вы будете тратить больше времени на борьбу с синтаксисом, чем на создание проектов.

Курс JavaScript от Coddy создан как раз для этого. Пятиминутные уроки шаг за шагом проведут вас по основам языка. Вы пишете и запускаете код прямо в браузере по ходу дела. Никаких сложных настроек, конфигураций окружения и требований в духе «сначала установите Node».

Багси, наш встроенный ИИ-помощник, всегда на связи в каждом уроке, если вам что-то непонятно.

Если вы можете без запинки прочитать, написать и объяснить следующие темы, то вы готовы. Если нет — пройдите основы JS на Coddy, пока не почувствуете уверенность.

• Переменные и примитивные типы данных (string, number, boolean)
• Условные операторы if/else и switch
• Циклы for, while и for...of
• Функции и стрелочные функции
• Массивы и их основные методы (push, pop, map, filter, find)
• Объекты и обращение к свойствам через точку или квадратные скобки
• Базовая работа с DOM (querySelector, addEventListener, textContent)

Разобрались с этим? Отлично. Пора кодить!

Проекты для старта: Привет, DOM!

Эти проекты намеренно сделаны небольшими. Они опираются всего на одну-две концепции, поэтому, если что-то сломается, вы быстро найдете причину. И не вздумайте пропускать их только потому, что они кажутся слишком простыми!

1. Классический счетчик

Что это: число на экране и две кнопки — «плюс» и «минус».

В чем польза: это минимально возможное приложение, объединяющее HTML, CSS и JavaScript. Вы поработаете с состоянием (переменной, которая меняется), обновлением DOM и обработчиками событий. Примерно двадцать строк кода, плюс-минус.

Как сделать: один тег span для числа и две кнопки. Объявите переменную let count = 0. Навесьте обработчики клика на каждую кнопку, чтобы увеличивать или уменьшать значение, а затем обновляйте textContent нашего span. Дополнительно: добавьте кнопку сброса и ограничение, чтобы счетчик не опускался ниже нуля.

2. Калькулятор чаевых

Что это: вы вводите сумму счета и процент чаевых, а приложение показывает размер чаевых и итоговую сумму к оплате.

В чем польза: знакомит с полями ввода (inputs) и функцией parseFloat, на которой поначалу спотыкаются почти все. Вы также поймете, как легко сломать математические расчеты, если забыть про NaN.

Как сделать: два поля ввода чисел (сумма счета и процент чаевых), одна кнопка и два span для вывода результатов. По клику считывайте значения из полей, делайте расчеты, округляйте до двух знаков после запятой с помощью .toFixed(2), выводите результат. Дополнительно: добавьте возможность разделить счет на компанию.

3. Генератор цветовой палитры

Что это: нажимаете кнопку и получаете случайный цвет, который отображается на экране вместе с его HEX-кодом.

В чем польза: случайные числа, шаблонные строки и инлайн-стили в одном крошечном приложении. Результат виден сразу, что делает процесс увлекательным.

Как сделать: напишите функцию, которая трижды генерирует случайное целое число от 0 до 255, а затем собирает их в строку вида rgb(${r}, ${g}, ${b}). Задайте это значение в качестве фонового цвета (background color) для элемента на странице. Дополнительно: генерируйте полноценную палитру из пяти цветов вместо одного.

4. Генератор случайных цитат

Что это: кнопка, которая меняет текущую цитату на случайную из вашего списка.

В чем польза: практика работы с массивами и Math.random, а также быстрый результат, которым не стыдно поделиться.

Как сделать: создайте массив объектов с цитатами, где у каждого объекта есть свойства text и author. По клику выбирайте случайный индекс массива и обновляйте два текстовых элемента на странице. Дополнительно: добавьте ссылку «Поделиться в Twitter», которая открывает окно создания твита с уже вписанным текстом цитаты.

5. Цифровые часы

Что это: текущее время на экране, которое обновляется каждую секунду.

В чем польза: здесь вы познакомитесь с setInterval и объектом Date, которые пригодятся вам еще не раз. А добавление ведущего нуля к однозначным минутам и секундам — это отличная мини-головоломка.

Как сделать: напишите функцию, которая получает new Date(), форматирует часы, минуты и секунды, а затем записывает их в span. Запустите её через setInterval(updateClock, 1000). Дополнительно: добавьте переключатель между 12-часовым и 24-часовым форматами времени.

6. Калькулятор ИМТ

Что это: вводите рост и вес, получаете значение индекса массы тела (ИМТ) и соответствующую категорию (например, «норма», «избыточный вес»).

В чем польза: реальный пример использования условий для выбора нужной категории. Кроме того, это отличный шанс попрактиковаться в верстке аккуратных форм.

Как сделать: сделайте поля ввода для роста (в см) и веса (в кг). При отправке формы рассчитывайте ИМТ по стандартной формуле, пропускайте результат через цепочку if/else для определения категории и выводите оба значения. Дополнительно: добавьте переключатель на имперскую систему мер (футы/дюймы и фунты).

Проекты среднего уровня: больше движущихся частей

Создав несколько простых проектов, вы заметите повторяющиеся паттерны. Клик по кнопке меняет переменную, функция обновляет интерфейс на основе этой переменной, и так по кругу. В этом и заключается большая часть фронтенд-разработки. В этих проектах вам придется жонглировать чуть большим объемом данных (состояний) одновременно.

7. Список задач (To-do List)

Что это: вводите задачу, нажимаете Enter, и она появляется в списке. Клик по задаче отмечает её как выполненную, а клик по крестику удаляет её.

В чем польза: это не зря называют «Hello World» в мире фронтенд-фреймворков. Вы будете работать с массивом, отрисовывать его в DOM и обрабатывать два-три разных события. Если вы сможете написать список задач с нуля самостоятельно, вы официально переросли уровень абсолютного новичка.

Как сделать: храните массив объектов задач со свойствами id, text и done. Перерисовывайте список <ul> при каждом изменении. При нажатии Enter добавляйте новую задачу в массив. При клике переключайте статус done или удаляйте элемент из массива с помощью splice. Дополнительно: сохраняйте данные в localStorage, чтобы список задач не пропадал при перезагрузке страницы.

8. Секундомер с кругами

Что это: секундомер с кнопками «Старт», «Стоп», «Сброс» и «Круг».

В чем польза: сложнее, чем обычные часы, потому что вы сами управляете переменной прошедшего времени, а не просто запрашиваете его у системы. Вы поработаете с Date.now(), интервалами и логикой паузы.

Как сделать: храните переменные startTime и аккумулятор elapsed. При старте задавайте startTime = Date.now() и запускайте интервал. При остановке прибавляйте разницу к пройденному времени: elapsed += Date.now() - startTime. При нажатии «Круг» добавляйте текущее время в массив и выводите его на экран. Дополнительно: красиво отформатируйте миллисекунды.

9. Таймер Помидора (Pomodoro)

Что это: 25 минут работы, 5 минут отдыха и так по кругу. Звуковой сигнал при смене режима.

В чем польза: знакомство с концепцией конечных автоматов (state machines) для начинающих. Приложение находится в одном из состояний: «работа», «отдых» или «пауза», и интерфейс меняется в зависимости от текущего режима.

Как сделать: используйте тот же паттерн с интервалами, что и в секундомере, но ведите обратный отсчет. Отслеживайте текущий режим. Когда таймер доходит до нуля, переключайте режим и воспроизводите короткий звук с помощью new Audio('beep.mp3').play(). Дополнительно: добавьте счетчик выполненных за день рабочих сессий.

10. Приложение-викторина (Quiz)

Что это: тест с вопросами и несколькими вариантами ответов, который в конце показывает ваш итоговый балл.

В чем польза: объединяет обход массивов, условия и простую концепцию «состояния экрана» (текущий вопрос, экран результатов).

Как сделать: создайте массив объектов вопросов со свойствами text, options и correctIndex. Показывайте по одному вопросу за раз. При клике на ответ сверяйте его с correctIndex, увеличивайте счетчик правильных ответов и переходите к следующему индексу. Когда вопросы закончатся, покажите экран с результатами. Дополнительно: добавьте таймер на каждый вопрос.

11. Генератор паролей

Что это: вы выбираете длину и типы символов, которые нужно использовать, и получаете случайный надежный пароль.

В чем польза: работа со строками, генерация случайных значений и обработка чекбоксов в одном флаконе. К тому же это действительно полезный инструмент, что редкость для учебных проектов.

Как сделать: подготовьте четыре набора символов (строчные, прописные, цифры, спецсимволы). Объединяйте активные наборы в зависимости от отмеченных чекбоксов. Запустите цикл N раз, выбирая случайный символ из получившегося общего пула. Дополнительно: добавьте индикатор надежности пароля, который оценивает результат.

12. Валидатор форм

Что это: форма регистрации, которая подсвечивает неверно заполненные поля красным цветом и выводит сообщение об ошибке под каждым из них.

В чем польза: в реальной веб-разработке это встречается постоянно. Вы попрактикуетесь в регулярных выражениях (Regex), событиях фокуса и манипуляциях с DOM на примере привычной формы.

Как сделать: напишите небольшие функции-валидаторы для каждого поля (проверка формата email, длины пароля, совпадения паролей). По событию blur (потеря фокуса) запускайте валидатор, переключайте класс у поля ввода и обновляйте текст ошибки в соответствующем span. При отправке формы разрешайте действие только в том случае, если все проверки пройдены. Дополнительно: сделайте «живую» валидацию (при вводе символов) после первой потери фокуса.

Мини-игры: когда становится по-настоящему весело

Игры выводят ваши навыки на новый уровень, потому что они требуют постоянного обновления состояния, работы со временем и активного взаимодействия с пользователем. Когда вы впервые заставите пиксели двигаться на холсте (canvas), в вашей голове наконец сложится пазл о том, что на самом деле представляет собой JavaScript.

13. Камень, ножницы, бумага

Что это: вы выбираете камень, ножницы или бумагу. Компьютер делает свой выбор. Игра определяет победителя.

В чем польза: отличная тренировка условий и генерации случайных чисел с наглядным результатом победы или поражения.

Как сделать: сделайте три кнопки для выбора игрока. По клику компьютер случайно выбирает один из трех вариантов. Используйте простой объект соответствий (или вложенные if/else), чтобы определить результат. Ведите учет побед и поражений. Дополнительно: сделайте игру до трех побед (best-of-five) с финальным экраном триумфа.

14. Крестики-нолики

Что это: классическая игра на поле 3х3, в которой два игрока ходят по очереди на одном экране.

В чем польза: знакомит с представлением двумерной сетки в виде одномерного массива из 9 элементов и логикой проверки условий победы. Приятно иметь в портфолио такую культовую игру.

Как сделать: отрисуйте девять ячеек. Отслеживайте, чей сейчас ход. При клике на ячейку ставьте символ текущего игрока и проверяйте все восемь выигрышных комбинаций на совпадение. При победе выводите поздравительный баннер. Дополнительно: добавьте простейший искусственный интеллект, который выбирает любую свободную ячейку случайным образом.

15. Игра на развитие памяти (Memory Match)

Что это: поле с перевернутыми рубашкой вверх картами. Вы кликаете по двум картам: если они совпадают, то остаются открытыми, если нет — переворачиваются обратно.

В чем польза: перемешивание массивов, работа с задержками времени и четкое условие победы. Когда вы впервые реализуете логику «перевернуть обратно через секунду», вы по-настоящему поймете, как работает setTimeout.

Как сделать: продублируйте массив значений, чтобы получились пары, и перемешайте его с помощью алгоритма Фишера-Йетса. Отрисуйте карты рубашкой вверх. При клике открывайте карту. Когда открыты две карты, сравнивайте их: если они совпали, зафиксируйте их открытыми; если нет — переверните обратно после небольшой задержки. Игра заканчивается, когда найдены все пары. Дополнительно: добавьте счетчик ходов и сохранение лучшего результата в localStorage.

16. Игра «Угадай число»

Что это: компьютер загадывает число от 1 до 100. Вы пытаетесь его угадать, а компьютер подсказывает «больше» или «меньше», пока вы не попадете в цель.

В чем польза: простая игра, которая отлично учит обработке ввода, сравнениям и паттерну «повторять, пока не будет верно», который встречается повсеместно.

Как сделать: сгенерируйте загаданное число один раз при старте. Ведите учет попыток. При каждой догадке сравнивайте её с загаданным числом и обновляйте текст подсказки. Как только число угадано, заблокируйте ввод. Дополнительно: ограничьте игрока семью попытками и показывайте экран проигрыша, если они закончатся.

17. Виселица

Что это: компьютер загадывает слово. Вы угадываете буквы по одной. Каждая ошибка дорисовывает часть виселицы.

В чем польза: проект, после которого вы перестанете бояться работы со строками. Создание отображения угаданных букв научит вас использовать split, map и join за один раз.

Как сделать: выберите случайное слово из массива. Покажите вместо букв символы подчеркивания. Когда игрок выбирает букву, открывайте её на нужных позициях или засчитывайте ошибку. Отрисовывайте виселицу поэтапно (обычно разрешается сделать до 6 ошибок) с помощью CSS или canvas. Дополнительно: загружайте слова из публичного API словарей.

18. Змейка

Что это: классическая игра, где нужно управлять змейкой, есть еду, расти и стараться не врезаться в стены или собственный хвост.

В чем польза: это финальный босс среди проектов для новичков. Вы поработаете с сеткой (canvas или CSS), событиями клавиатуры, игровым циклом (game loop), обнаружением столкновений и механикой роста змейки.

Как сделать: отрисуйте игровое поле с помощью CSS или <canvas>. Храните змейку в виде массива объектов с координатами. На каждом игровом такте сдвигайте змейку на одну ячейку в текущем направлении. Если голова змейки оказывается на клетке с едой, увеличивайте её длину и создавайте новую еду. Если голова врезается в стену или собственное тело — игра окончена. Отслеживайте нажатия клавиш-стрелок для смены направления. Дополнительно: увеличивайте скорость игры по мере роста счета.

Бонус: Приложение погоды

Что это: вводите название города и получаете текущую температуру и описание погоды.

В чем польза: первое реальное знакомство с публичными API и асинхронным кодом. Любого бесплатного API погоды будет более чем достаточно для старта.

Как сделать: получите бесплатный API-ключ. При отправке формы делайте запрос через fetch, подставляя город в URL. Дождитесь ответа, распарсите JSON и обновите DOM нужными данными. Оберните код в блок try/catch, чтобы неверно введенные города не ломали интерфейс. Дополнительно: добавьте прогноз погоды на 5 дней.

Как доводить начатые проекты до конца

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

• Выбирайте самый маленький проект, который вас зажигает. Интерес поможет начать, а небольшой объем — закончить. Затем повторяйте процесс.
• Ограничивайте время, а не объем работы. Выделите себе один-два часа сосредоточенной работы на простой проект. Если вы не успели закончить — это не провал, а ценная информация о том, на каком этапе вы буксуете.
• Сначала логика, потом красота. Сделайте работающую, пусть и неказистую версию, прежде чем браться за CSS. Красивый, но сломанный проект гораздо хуже, чем невзрачный, но полностью рабочий.
• Не прыгайте по туториалам. Просмотр трех разных руководств по одному и тому же проекту означает, что вы просто потратили время, так и не написав ни строчки кода. Делайте как умеете, пусть и неидеально, а затем точечно ищите ответы на конкретные вопросы.
• Повторяйте основы в те дни, когда нет времени на полноценную разработку. Пять минут занятий в Coddy по дороге на учебу или работу — это тоже полноценный шаг вперед. А серии дней будут мотивировать вас двигаться дальше.

Последний пункт связывает всё воедино. Проекты помогают почувствовать реальную пользу от знаний, но они целиком опираются на базу. Короткие ежедневные уроки — это то, что не дает сложным проектам казаться недостижимыми.

Какую роль здесь играет Coddy

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

Задача Coddy — помочь вам на более раннем этапе: заложить настолько прочный фундамент JavaScript, чтобы задача «создать викторину» не превращалась в двухчасовой поиск в Google на тему «как работает метод .map».

Coddy помог освоить JavaScript миллионам пользователей на веб-платформе, iOS и Android. Те же уроки, тот же прогресс и тот же Багси — на любом вашем устройстве.

Бесплатный тариф открывает доступ ко всем урокам по JS без каких-либо настроек. Единственное ограничение — система энергии, которая восстанавливается каждые несколько часов.

Хотите заниматься без ограничений и иметь доступ к Багси при любом вопросе? Платные тарифы стоят примерно вдвое дешевле, чем на аналогичных платформах. В любом случае помните: сначала основы, а проекты — потом.