35 pet-projects на Javascript. Идеи для начинающих frontend-разработчиков. Как выбирать проекты?

В предыдущем видео был обзор на 14 полностью готовых проектов на JavaScript, процесс разработки которых я показываю у себя на YouTube канале.

В этом видео хочу показать вам для вашего вдохновения 35 новых идей для таких проектов.

Под видео в комментариях вы можете написать, какие проекты вам наиболее интересны, чтобы я в дальнейшем сделал по ним новый интенсив.

И в конце видео я поделюсь своим мнением, как и какие проекты стоит выбирать.

Начнем с квиза.

Квизы бывают двух видов.

Это опросники или викторины.

Поэтому здесь я выделю два отдельных проекта.

Первый это опросник.

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

Например, скидку или промокод.

То есть целью опросников является получение контактов, первая коммуникация и в дальнейшем продажа какой-то услуги или товара.

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

И в ближайшее время хочу записать по нему отдельное видео с подробным объяснением.

Здесь у нас есть шкала прогресса.

Справа от шкалы мы видим здесь текущий вопрос и сколько их всего.

Ниже у нас идет сам вопрос и еще ниже ответ.

И кнопки далее и назад.

Ответы могут быть в виде картинок с текстом или просто текст.

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

На такие вопросы, как есть ли у вас участок под строительство, ответ должен быть один.

Да, нет или купим в ближайшее время.

Соответственно здесь мы будем использовать радиокнопки.

С этажами и площадью ситуация та же.

А вот например для комнат мы уже можем использовать чекбоксы.

И на последнем шаге собираются контактные данные клиента.

Здесь уже вместо кнопки «Далее» появляется кнопка «Отправить» и по нажатию на нее все ответы будут отправляться в Telegram, в ту группу, которую мы укажем.

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

Достаточно будет поменять только фоновую картинку и сами вопросы и ответы.

Причем мы сделаем так, чтобы количество вопросов могло быть любым.

И еще одной разновидностью квиза является викторина.

Викторина это тест, который может быть как развлекательным, так и проверять какие-то знания.

Причем даже можно сделать сайт с викторинами на различные темы.

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

Причем можно сделать так, чтобы пользователь мог или выбирать из вариантов ответов, или вводить свои.

Следующий проект это ToDoList.

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

Это такое приложение, куда можно записывать свои цели, задачи, планы.

Здесь можно начать с простого.

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

И дальше уже можно расширять этот проект и сделать, например, клон Trello.

Trello это такой инструмент, который позволяет команде эффективно управлять какими-то проектами или процессами.

здесь уже мы можем добавить сохранение данных через Local Storage чтобы при обновлении страницы у нас все сохранялось помимо этого возможность добавления колонок или например сделать так чтобы можно было перетаскивать задачи из одной колонки в другую или менять их местами внутри одной колонки

Или из этого проекта можно еще сделать приложение закладок.

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

В другой все, что связано с учебой.

И вот так все разделить по темам.

Пятый проект это виртуальная клавиатура для набора символов или текста при помощи мышки.

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

Еще одной идеей для проекта может быть тест скорости печати.

Здесь можно подсчитывать количество ошибок, скорость печати, то есть количество набранных символов за единицу времени.

Причем можно добавить возможность выбора языка и выбора самого текста.

То есть он будет каким-то случайным или тем, который добавит сам пользователь.

Следующая идея это сделать тест скорости реакции.

Здесь за основу можно взять вот этот тест, где есть 5 попыток.

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

Единственное, в качестве результата для каждого значения можно было бы выводить какую-нибудь картинку и текст.

Например, здесь это пилот истребителя, где-нибудь здесь черепаха.

а вот здесь какая-нибудь улитка.

Еще мне когда-то попадался такой проект, как потратить состояние Илона Маска.

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

А внизу у нас что-то наподобие корзины, где показываются отдельные позиции, количество добавленных единиц, их общая стоимость и внизу итоговая стоимость.

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

И за счет этого смотрелось это все интереснее.

Следующей идеей может быть приложение погоды.

Здесь можно сделать поиск по городам.

Например, мы хотим посмотреть, какая сейчас погода в Москве.

И у нас появляются все данные на текущий момент.

Это какая температура, есть ли осадки, какая влажность, какая скорость ветра и прочее, прочее, прочее.

Только дизайн лучше делать поярче.

Например, таким или таким.

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

Следующий проект, который мне показался интересным, это вот такая солнечная система.

Ее здесь можно посмотреть в 2D и в 3D.

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

Возможно, если бы я делал этот проект, то при клике на определенную планету, лучше где-нибудь сбоку,

выводил бы всю интересную информацию по ней.

Еще мне попадался вот такой проект солнечной системы, чисто 3D.

Он сделан на JavaScript с использованием библиотеки 3GS.

Но смотрится, конечно, эффектно.

Здесь можно посмотреть от камеры общего вида или вид на какую-то отдельную планету.

Помимо этого, также можно отображать орбиты.

Еще в качестве проектов могут быть различные генераторы.

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

Еще в качестве проекта можно сделать генератор QR-кодов.

Здесь в качестве содержимого у нас может быть что угодно.

Это и URL-адрес, и текст, и электронная почта, и телефон, и много чего еще.

Еще одной идеей для проекта может быть помодоро таймер.

Есть такая техника помодоро.

Она позволяет эффективно управлять временем за счет интервальной работы.

Такими интервалами могут быть круги, где мы 25 минут работаем, потом 5 минут отдыхаем.

И таких несколько кругов.

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

И когда этот длинный отдых будет,

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

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

При этом еще можно сделать такой чат-бот, где отвечать нам будет в чат GPT.

В качестве следующего проекта я бы предложил вам сделать какое-то приложение для напоминаний.

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

Так вот, это приложение могло бы отправлять уведомление в сам этот день.

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

Оно же может предлагать какие-то оригинальные идеи для подарков и даже предлагать пожелания к поздравлению.

Еще можно сделать аналог кинопоиска, чтобы можно было найти фильм по поиску, по определенному жанру, любимым актерам и другим критериям.

Следующая идея для проекта это приложение с питанием или приложение с тренировками.

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

Можно было бы добавить отчет, цели и даже какие-нибудь программы по питанию или рецепты определенных блюд.

А с тренировками, соответственно, можно было бы в зависимости от целей пользователя...

предлагать ему различные программы тренировок.

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

Еще у меня был сохранен один вот такой интересный 3D проект, где воздушные шары реагируют на курсор мыши.

Выглядит на самом деле очень классно.

Отдельно я выделил несколько проектов, связанных с Canvas.

Первое, что можно сделать, это аналог Paint, где мы бы могли рисовать линии, фигуры, что-то лишнее стирать ластиком, задавать цвет для элементов и толщину для кисти.

Второй, тоже очень популярный проект с использованием Canvas, это вот такая анимация частиц.

И вот еще одно ее исполнение.

где элементы реагируют на курсор мыши еще один вот такой проект я его называю космическое путешествие где мы можем как бы перемещаться по вселенной и смотреть на вид перед собой и при этом по нажатию на кнопку мышки мы можем перемещаться если не со скоростью света то очень близкой к ней и на этой скорости мы увидим вот такой эффект и еще есть вот такие интересные проекты с эффектом курсора

Которые я объединил в один.

Здесь у нас осьминог перемещается сам по себе.

И если курсор перемещается, то он следует за ним.

Или есть еще вот такой эффект свечения дыма.

Или вот такой эффект.

Но здесь мы уже можем сами настраивать размер и цвет этого тянущегося следа.

И еще я бы игры выделил отдельной категорией.

И давайте назову самые популярные.

И начнем мы вот с такого симулятора.

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

Мне как-то попался аккаунт одного парня, где он выкладывал короткие видео только с такими симуляциями.

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

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

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

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

Еще можно сделать пинг-понг.

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

Только здесь необходимо, чтобы он попал на половину противника.

Здесь можно добавить режимы игры с компьютером и онлайн 1 на 1 с другом.

Следующая думаю всем знакомая вам игра Тетрис, где необходимо правильно вращать и располагать падающие фигуры, так чтобы заполнять все линии целиком.

Следующая игра Memory Game.

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

И необходимо это сделать за наименьшее количество ходов.

Следующая игра Asteroids.

Здесь необходимо управлять космическим кораблем и уничтожать и уклоняться от астероидов.

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

Если бы в нем добавить текстуры для астероидов, корабля и лазеров, то все бы смотрелось намного интереснее.

еще одна идея для проекта это игра жизнь хотя это даже больше похоже не на игру а на наблюдение за эволюцией поколения клеток но реализовывать ее правила и сценарии довольно интересно еще одна игра детства 2048 здесь необходимо складывать плитки с числами

чтобы получить плитку с числом 2048.

Еще одна игра с плитками это пятнашки, где необходимо переставить числа в правильном порядке, перемещая их по пустому квадратику.

И по итогу нужно собрать все числа в порядке возрастания.

Следующая головоломка судоку.

Здесь необходимо заполнить все ячейки числами от 1 до 9, так чтобы в каждой строке, в каждом столбце и в каждом блоке 3 на 3 присутствовало каждое число только один раз.

Еще можно сделать аналог морского боя, где необходимо уничтожить все корабли противника и не дать потопить своим.

Здесь также как и в пинг-понге можно сделать реализацию игры с компьютером или в режиме онлайн.

И последняя игра это Пакман.

Здесь необходимо съесть все точки и при этом не попасться призракам.

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

Я бы сам отталкивался от нескольких пунктов.

Первое и самое важное, это чтобы мне это самому было интересно.

Если испытывать кайф от процесса, то это помогает проект любой сложности довести до конца.

Второй момент – это непонимание, как что-то делается.

Хотя бы частичное.

Здесь оно перекликается с интересом.

То есть, если у меня есть полное представление, как это написать, то становится скучно.

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

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

Четвертое, что бы я выделил при выборе проектов, это то, что будут ли они полезны мне самому или кому-то еще.

И пятый момент связан с портфолио.

Можно даже сделать какой-нибудь проект, если он усилит портфолио и будет смотреться эффектно в нем.

Кстати, как составлять портфолио, у меня есть на курсе отдельный блок на максимальном тарифе.

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

И об этом я напишу у себя в телеграм канале отдельным постом.

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