Теории скучны.
Когда доходит до изучения новых навыков, я предпочитаю практическую часть.
Конечно, вам нужна теория, прежде чем вы сможете практиковать. Но не тратьте все свое время на одну теорию, а затем на другую. Вы наверняка все это забудете.
Ниже приведены 13 идей проектов JavaScript для начинающих, чтобы максимально использовать ваш учебный процесс.
1. Карточная игра памяти
Я всегда с энтузиазмом отношусь к разработке игр. Карточная игра - одна из них.
Вы ведь знаете правило? Карты на доске обращены вниз. Когда вы щелкаете две карты, вы оставляете их, если они совпадают, в противном случае они снова переворачиваются лицевой стороной вниз. Вы продолжаете играть, пока не соберете все карты.
2. Всплывающее окно
Всплывающее окно, такое как alert () или prompt (), имеет ограничения. Они простые. Вашим проектам всегда требуется больше функций, таких как большее количество полей для отображения, обработка сложных действий или усовершенствованный пользовательский интерфейс.
Итак, давайте построим его.
3. Фотогалерея
На каждом веб-сайте электронной коммерции есть фотогалерея на странице сведений о продукте. Вы можете создать его с такими функциями, как масштабирование, просмотр следующей или предыдущей фотографии.
4. Калькулятор
Это первый проект, который я реализовал, когда изучаю JavaScript.
Это достаточно просто, чтобы вы поняли, как работать с JavaScript, HTML и CSS в определенной степени.
Вы можете начать с некоторых простых операторов, таких как сложение, вычитание, умножение и деление. Затем сделайте свой калькулятор более профессиональным, добавив несколько сложных функций.
5. Список задач
Вместо того, чтобы использовать другие приложения со списком дел, почему бы не создать его для себя?
Основные функции списка дел включают добавление, удаление, редактирование и проверку элемента. Чтобы получить больше удовольствия, вы можете добавить анимацию, например, медленно ударять по предмету, когда вы его завершите.
6. Проверка формы
Вы получаете форму, состоящую в основном из трех элементов - имени пользователя, пароля и кнопки входа.
Пользователи должны ввести имя пользователя и пароль, а затем нажать кнопку входа в систему. Ваша миссия - проверка имени пользователя и пароля после нажатия кнопки. Если данные действительны, предоставление пользователям разрешения на доступ к следующему шагу.
7. Часы
Какие часы тебе нравятся? Аналоговый или цифровой? Вы можете создавать и то, и другое, используя JavaScript, HTML и CSS. Чтобы было круто, добавьте плавную анимацию.
8. Мотивационные цитаты
Каждый раз, когда вы садитесь за стол, включаете компьютер, открываете браузер, вы видите мотивационную цитату, вдохновляющую вас на весь рабочий день.
Вы можете создать это приложение, создав расширение Chrome.
9. Музыкальные инструменты
Люблю играть музыку. Почему бы не построить инструмент самому? Это может быть пианино, гитара или ударная установка?
Вы можете смоделировать каждую клавишу на клавиатуре как звук того инструмента, который вы хотите создать.
Поверьте мне. Это очень весело!
10. Индикатор выполнения
Этот индикатор выполнения будет отображаться, когда пользователи ждут загрузки данных.
Вы можете сделать это простой анимацией или сложной с некоторыми фантастическими эффектами, такими как изменение цвета.
11. Конвертеры
Сколько видов конвертеров вы используете?
Для меня это doc в pdf, mp4 в mp3, png в jpeg или конвертер единиц измерения и т. Д.
А теперь давайте создадим собственный конвертер.
12. Примечание.
Этот для того, чтобы делать заметки и записывать свои идеи как можно быстрее.
Для простой версии просто разрешите пользователям создавать, редактировать и удалять заметки.
Чтобы сделать его более интересным, давайте добавим функцию, позволяющую форматировать заметки, например изменять цвет текста, отображать формат HTML / Markdown и т. Д.
13. Викторина
Вы знаете, «Кто такой миллионер?» Показать. С технической точки зрения это не более чем приложение-викторина.
Пользователи запускают любые викторины по любым направлениям. Затем они видят вопрос с 4 вариантами (может быть больше или меньше) на выбор. После выбора и отправки они увидят другой вопрос. Пользователи продолжают отвечать до последнего вопроса.
На экране результатов они увидят, сколько очков они набрали и на сколько вопросов не смогли ответить.
Заключение
Опять же, практика ведет к совершенству. Имея все вышеперечисленные идеи, вы, скорее всего, сможете отточить свои навыки JavaScript.
Надеюсь, что вы найдете ее полезной!
Дальнейшее чтение
JavaScript на простом английском языке
Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал на YouTube в Decoded!
