5 мини-проектов, чтобы улучшить свои навыки фронтенд-разработки

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

Большинство уроков начинаются либо с приложения To Do list, либо со счетчика. Это лучшие примеры, чтобы охватить основы во время обучения, но они также очень часто повторяются. И так, давайте посмотрим на несколько забавных и актуальных для реальной жизни проектов, чтобы попрактиковаться в любой интерфейсной среде. В этой статье я поделился 5 забавными проектами, вдохновленными реальными примерами использования, чтобы укрепить ваши навыки работы с интерфейсом.

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

Вы можете строить эти проекты в любом фреймворке. Я также создал репозиторий на github для хранения всех этих проектных идей. Вы также можете внести свой вклад в эти списки проблем или поделиться своими решениями.

Smart Textarea

Twitter как текстовое поле с количеством символов

Если вы когда-либо использовали twitter, вы должны знать, что ваш твит будет иметь ограничение на количество символов в 280 символов, и как только вы пересечете это ограничение, твиттер начнет отмечать ваши символы красным фоном, и вы увидите, что количество символов будет отрицательным! Вот и все, это задача. Вы можете создать такое же текстовое поле с настраиваемым ограничением количества символов.

Требования:

1. Создайте простое текстовое поле и добавьте необходимый стиль.
2. В вашем текстовом поле должно быть настраиваемое ограничение на количество символов.
3. Показать этот предел под текстовым полем. Улучшение - Вы можете добавить круг прогресса, показывающий счетчик.
4. Если количество символов превышает лимит, выделите их, уменьшите счетчик до отрицательного значения и отключите кнопку отправки.
5. Вы также можете добавить предупреждения, когда осталось только 10% символов.
6. Если пользователь добавляет символы, такие как @или #сделал их в виде ссылки с соответствующим href.
7. После кнопки отправки отобразите этот абзац.

Компонент дропдауна (выпадающий список)

Компонент с функцией выбора / множественного выбора, аналогичный React Select

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

Требования:

1. Компонент раскрывающегося списка, в котором список открывается при нажатии раскрывающегося списка.
2. Этот список должен закрываться при повторном щелчке раскрывающегося списка, при нажатии escклавиши, при щелчке снаружи и после выбора любого элемента.
3. Также включите опцию множественного выбора.
4. Бонусом будет функция поиска по типу.

Автозаполнение ввода

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

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

Требования:

1. Поисковый ввод с опцией автоматического предложения.
2. Включите функцию debouncing, чтобы сохранить лишние вызовы API.
3. Используйте любой список api или json для отображения предложений

Всплывающее окно управления файлами cookie

Вы когда-нибудь открывали веб-сайт и видели раздражающее всплывающее окно с просьбой принять файлы cookie или изменить свои настройки? Нам нужно это построить! Настраиваемый всплывающий компонент для создания файлов cookie и управления ими в приложении.

Требования:

1. После загрузки страницы должно появиться всплывающее окно с просьбой принять файлы cookie.
2. У пользователей должны быть предпочтения относительно приема всех / некоторых файлов cookie или их отсутствия.
3. Такие же предпочтения должны работать в вашем приложении.
4. Через 10-15 секунд всплывающее окно должно быть скрыто с состоянием по умолчанию.

Индикатор

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

1. Полоса прогресса, показывающая прогресс прокрутки страницы, в самом верху страницы.
2. Индикатор выполнения показывает прогресс в соответствии с переданным значением в процентах.
3. Круговой вариант того же индикатора выполнения.

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