Сокращенный перевод статьи «9 Javascript project ideas for beginners, that help you to build an amazing coding portfolio».
Каждый фронтенд-разработчик должен приобрести определенный набор навыков. Очевидно, что нужно знать HTML и CSS: без этого не обойтись. Когда этот шаг будет пройден, нужно научиться писать код шаблонов, используя CSS-фреймворки, такие как Bootstrap. После этого следует перейти на новую стадию.
Обычно новой стадией является изучение JavaScript. Но кроме чисто теоретических знаний, вам нужна и практика. Здесь вам и пригодится наш список. Итак, давайте рассмотрим идеи проектов, которые вы можете реализовать, будучи новичком в JavaScript.
1. Часы
Один из самых простых и базовых проектов, с которых можно начать, это обычные часы. Они должны показывать текущее время (часы и минуты, а возможно и секунды). Если хотите усложнить задачу, сделайте так, чтобы на экран выводилась также текущая дата. Занимаясь этим проектом, вы можете отработать на практике применение JavaScript-метода setInterval().
Если захотите продолжить работу над этим проектом, можно добавить к нему таймер. Дайте возможность пользователю устанавливать время, с которого должен начинаться обратный отсчет.
Возможно, вы не представляете, как это может выглядеть, так что вот вам пример:
2. Простой слайдер с изображениями
Еще одна отличная идея для начинающих — создание простого слайдера. Вы можете сказать, что есть много готовых слайдеров, которые можно использовать в своих проектах совершенно бесплатно. Это правда. Но всегда лучше понимать, как что-то работает, а не только пользоваться, и самый лучший способ хорошенько разобраться в работе слайдера — создать собственный с нуля.
Готовый слайдер вы сможете поместить в свой репозиторий и использовать в дальнейшем в других проектах.
3. Форма с валидацией
Еще один полезный проект, который позволит вам попрактиковаться в использовании языка.
Реализуйте форму и проверку значений, которые вводятся в ее поля, например, email-адреса или телефонного номера. Для валидации используйте регулярные выражения.
Также вы можете реализовать вывод предупреждений о том, что информация введена неверно.
Не сдерживайте свою творческую энергию: сделайте свою форму привлекательной, чтобы можно было смело показывать ее в своем портфолио.
4. Индикатор загрузки
Следующая идея проекта для начинающих — создать индикатор загрузки. Например, это может быть анимированная полоска, вид которой обновляется каждые несколько миллисекунд. По мере загрузки индикатор может менять цвета.
Вы можете попробовать добавить какие-нибудь интересные эффекты, которые будут проявляться при 100% загрузки.
Имейте в виду, что вы сможете использовать этот скрипт в других проектах или превратить его в компонент фреймворка для многократного использования в готовом виде.
5. Простой калькулятор для подсчета налогов
Это приложение должно иметь поле, куда пользователь сможет ввести сумму своего дохода. Также в нем должна быть кнопка, при нажатии которой будет запускаться функция, подсчитывающая налоги. Используйте ставки налогов своей страны.
Вот пример такого калькулятора:
6. Шутка дня
Создайте приложение, которое ежедневно выводило бы случайным образом одну шутку из набора (в наборе, допустим, будет 50 шуток).
Такое приложение можно сделать со многими вариациями. Можно выводить фото дня, гифку дня или новость дня. Основная идея — потренироваться отбирать что-либо случайным образом и выводить на экран.
7. Викторина
Создайте программу, которая выводила бы набор вопросов с вариантами ответа. Вопросы должны выбираться рандомным образом из большего набора данных. Учитывайте ответы пользователя и подсчитывайте его общий результат (например, давайте 1 очко, если ответ правильный, и 0 — если пользователь ошибся).
Вам нужно продумать сброс состояния викторины в конце и отображение результата для каждого отдельного пользователя.
8. Система голосования
Систему голосования можно создать двумя способами.
Можно вывести на экран вопрос, который ставится на голосование, и два варианта ответа: ДА и НЕТ. Пользователи смогут голосовать, выбирая какую-то одну из опций, после чего вы выведете результат.
А можно вывести на экран несколько объектов голосования, которые одновременно будут вариантами выбора. Скажем, вывести три картинки и клик по любой из них считать волеизъявлением пользователя. Здесь также можно вывести результаты голосования на экран.
9. «Виселица»
Еще один вариант приложения, подходящий для начинающих, хотя и немного более сложный.
В игре должно быть поле, куда пользователь сможет вводить свой вариант буквы или слова. Пользователю должно предоставляться ограниченное количество попыток угадывания, например, 10.
Если использована последняя попытка, но пользователь не ввел правильное слово, значит, он проиграл. В противном случае пользователь выигрывает и получает очки.
Заключение
Мы рассмотрели девять проектов, которые могут создать на JavaScript начинающие программисты. Не забудьте также завести себе репозиторий на GitHub и добавить туда эти проекты, чтобы потенциальные работодатели имели возможность посмотреть ваш код.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]