Чтобы быть лучшим разработчиком, очень важно что-то создавать. Потом еще кое-что. А потом еще кое-что! Но вначале бывает трудно понять, что на самом деле построить. Итак, вот 10 советов по созданию проектов с использованием ванильного JavaScript:

# 1 - Список дел

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

# 2 - Приложение Book Marker

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

  • проверка формы
  • используйте регулярное выражение, чтобы проверить, начинается ли вводимый пользователем URL с «http» или «https».

# 3 - Часы JavaScript

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

# 4 - Таймер Помидора

Ну, как я только что сказал - экземпляр Date очень полезен при создании таймера Pomodoro. Мне нравится использовать pomodoro, чтобы отслеживать мое кодирование, и еще интереснее делать это с вашим собственным приложением Pomodoro.

# 5 - Страница смешных звуков

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

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

И все, что вы действительно можете придумать!

# 6 - Игра на память

Игра памяти, которая использует свойство набора данных для сохранения значения карты, чтобы мы могли проверить, щелкнул ли пользователь по паре карт. Это не очень красиво… Я видел, что у FCC есть руководство на Youtube о том, как написать игру на запоминание, которая выглядит действительно хорошо, так что стоит проверить это!

# 7 - Генератор случайных цитат

По этому поводу есть много руководств. Это хорошие проекты для начинающих.

# 8 - Калькулятор

Как всегда, когда дело касается разработки, есть много способов решить одну и ту же проблему. То же самое и с калькулятором. Я просмотрел несколько руководств, и все они имели очень разные подходы к структуре кода и способам решения этой проблемы. В учебнике со структурой логики, которая имела для меня наибольший смысл, использовался jQuery. Я следовал руководству, но вместо этого использовал ванильный JavaScript. Учебник сделан Диланом Израэлем для FCC, и вы можете найти его здесь.

# 9 - Воспроизведение мыши над холстом

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

# 10 - Программа для рисования

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

Когда я был ребенком, я рисовал с помощью Paint. Так что это действительно крутое чувство - иметь возможность написать подобную программу самостоятельно. Этот, конечно, очень упрощенный. Наслаждайтесь произведением искусства! ;)