Иногда хочется написать что-то эдакое, а идей нет. Сайт proglib.io опубликовал перевод статьи с подборкой классных идей для веб-проектов на любой случай и вкус.
Данные приложения поспособствуют:
- поднятию уровня знаний по программированию;
- изучению новых технологий;
- созданию нового проекта в портфолио;
- созданию продукта, который можно легко расширить доп. возможностями.
Список идей разделен на три базовых уровня сложности:
- Beginner – разработчики на ранних этапах своего учебного путешествия, которые обычно сосредоточены на создании простых веб-проектов.
- Intermediate – разработчики с определенным количеством опыта. Они себя хорошо чувствуют в создании UI/UX, в использовании инструментов разработки и написании приложений, использующих API.
- Advanced – программисты, имеющие все вышеперечисленное и создающие более продвинутые штуки, такие как бэкенд и службы БД.
1. Блокнот
Уровень: beginner
Описание: создание и сохранение заметок.
Возможности:
- сохранение;
- редактирование;
- удаление;
- при закрытии окна / браузера данные должны сохраняться, а при «возвращении» пользователя – динамически подгружаться.
Бонус:
- пользователь может редактировать заметку в Markdown-формате; при сохранении результат конвертируется в HTML;
- пользователю видна дата последнего изменения заметки.
Полезные ссылки:
See the Pen AngularJS Markdown Notes App by Nick Moreton (@nickmoreton) on CodePen.
2. Рождественские огни
Уровень: beginner
Описание: ваша задача нарисовать в ряд семь цветных окружностей и по таймеру изменять интенсивность свечения каждого из них. После прохода нескольких рядов «лампочек» последовательность подсвечивания меняется.
Возможности:
- пользователь может нажать кнопку для включения/выключения огней;
- пользователь может изменить время между интервалами свечения.
Бонус:
- выбор цвета заполнения каждой окружности;
- указание значения интенсивности;
- изменение размера любого круга в ряду;
- указание количества строк (от 1 до 7).
See the Pen Pure CSS Christmas Lights by Toby (@tobyj) on CodePen.
Следующий вариант из списка веб-проектов часто приходится реализовывать на практике.
3. Тестирование
Уровень: beginner
Описание: создайте приложение-опрос для тестирования навыков программирования разработчиков.
Возможности:
- запуск теста по кнопке;
- отображение 4 вариантов ответа на вопрос;
- после выбора ответа необходимо показывать следующий вопрос до конца теста;
- в конце пользователю оглашается результат тестирования (общее время прохождения теста, количество правильных ответов, сообщение статуса прохождения теста).
Бонус:
- пользователь может поделиться результатами в социальных сетях;
- выбор нескольких направлений для проверки;
- личный кабинет юзера, в котором хранится информация по всем тестам;
- тест можно проходить несколько раз.
Полезные ссылки:
See the Pen Quiz app interface by Florin Pop (@FlorinPop17) on CodePen.
4. Конвертер римских чисел в десятичные
Уровень: beginner
Описание: римские цифры включают в себя семь символов, каждый с фиксированным целым значением:
- I – 1
- V – 5
- X – 10
- L – 50
- C – 100
- D – 500
- M – 1000
Возможности:
- возможность ввода римских цифр в поле ввода;
- отображение результата в другом поле после нажатия на кнопку;
- если введен неправильный символ, юзер должен увидеть ошибку.
Бонус:
- автоматическое преобразование во время ввода;
- возможность конвертирования в «обе стороны».
Полезные ссылки:
5. Поиск книг
Уровень: intermediate
Описание: приложение для поиска книги по запросу (название, автор и т. д.). Список книг отображается со всей информацией о них.
Возможности:
- пользователь может ввести поисковой запрос в поле ввода;
- юзер может отправить запрос, который обращается к API, возвращающей массив с книгами и дополнительной информацией (название, автор, дата публикации и т. д).
Бонус:
- для каждого элемента в списке добавьте ссылку, перенаправляющую на сайт с дополнительной информацией о книге;
- реализовать адаптивный дизайн;
- добавить анимацию загрузки.
Полезные ссылки:
See the Pen Vue, Axios and Google Books by Chase (@chasebank) on CodePen.
6. Карточная игра
Уровень: intermediate
Описание: эта игра на время, в которой после клика по карточке, появляется изображение. Необходимо найти такую же картинку среди других карточек.
Возможности:
- пользователь видит сетку из n x n карточек, которые изначально скрыты;
- юзер нажимает на кнопку начала игры, и запускается таймер;
- открытая карточка будет отображаться до тех пор, пока пользователь не нажмет на вторую;
- если нашлись две одинаковые карточки, то они исчезают из списка, а если нет – переворачиваются в исходное положение;
- когда нашлись все совпадения – пользователю выводится сообщение.
Бонус:
- юзер может выбирать между несколькими уровнями сложности; увеличение сложности означает: уменьшение времени и/или увеличение количества карточек;
- пользовательская статистика (количество выигрышей/проигрышей, лучшее время).
7. Markdown-генератор
Уровень: intermediate
Описание: данное приложение преобразует обычную таблицу с данными в форматированную Markdown-таблицу.
Возможности:
- пользователь может создать HTML- таблицу с заданным количеством строк и столбцов;
- юзер может вставлять текст в каждую ячейку таблицы;
- можно генерировать Markdown-таблицу, содержащую данные из HTML-таблицы;
- можно просматривать форматированную таблицу Markdown-таблицу.
Бонус:
- реализовать возможность копирования форматированной таблицы в буфер обмена;
- реализовать возможность вставить новую строку или столбец в определенное место;
- добавить возможность полностью удалить строку или столбец.
Полезные ссылки:
8. Линии
Данный кандидат из списка веб-проектов уже реализован много раз, но его необходимо выполнить для тренировки своих навыков.
Уровень: intermediate
Описание: приложение автоматически рисует разноцветные линии. Когда линия касается края окна, она меняет свое направление. Полосы постепенно исчезают. Библиотеки анимации не используются. Применяйте только Vanilla HTML/CSS/язык JavaScript.
Возможности:
- линии появляются в рандомном положении в пределах границы ее окружающего окна;
- каждые 20 мс отображается новая копия линии в новом положении на основе траектории предыдущей линии;
- когда конечная точка линии касается границы окна, ее направление и угол меняется случайным образом;
- после отрисовки 10-20 линий «старые» линии постепенно исчезают.
Бонус:
- пользователь может указывать длину линии и скорость ее движения;
- юзер имеет возможность установить появление нескольких линий и указать их траекторию и скорость.
Полезные ссылки:
9. Список дел
Уровень: intermediate
Описание: классическое приложение, где пользователь может записать все мысли, задачи и цели, чтобы не забыть.
Возможности:
- ввод задачи в специальное поле;
- сохранение и появление в списке новой задачи по нажатию на кнопку;
- возможность выделять выполненный пункт;
- удаление из списка любого пункта.
Бонус:
- возможность редактировать любой пункт;
- просмотр выполненных и активных задач, даты их создания;
- при закрытии окна/браузера данные должны сохраняться, а при «возвращении» пользователя динамически подгружены.
Полезные ссылки:
See the Pen To Do List by Burak Kaya (@yesilfasulye) on CodePen.
10. Морской бой
Уровень: advanced
Описание: текстовый вариант графической версии игры. Игра состоит из движка (BGE) и консольной части.
Возможности:
BGE
- для запуска используется функция startGame(), чтобы начать игру с 1 игроком: функция создаст игровую доску 8×8, состоящую из 3 кораблей, размещенных рандомно;
- для выстрела используется функция shoot(), передающая координаты пересечения строки и столбца на игровом поле. Функция вернет информацию о статусе (попадание или промах), количестве оставшихся кораблей, а также массивы размещения кораблей, попаданий и промахов.
Консольная часть
- пользователь может видеть массив выстрелов, отображаемый в двумерном виде, возвращаемый функцией startGame();
- юзеру предлагается ввести координаты целевой ячейки;
- все попадания и промахи, а также сообщения о результате выстрела и поздравление отображаются после выстрела;
- в конце игры предлагается повторить раунд.
Полезные ссылки:
11. Чат
Это приложение самое интересное из подборки веб-проектов и самое популярное на данные момент.
Уровень: advanced
Описание: классический мессенджер.
Возможности:
- пользователю предлагается ввести свой ник при входе (он будет сохранен в приложении);
- присутствует поле для ввода сообщения и кнопка отправки. Отправленное сообщение появится в окне чата рядом с ником.
Бонус:
- сообщения должны быть видны всем пользователям чата (WebSockets);
- когда новый пользователь присоединяется к чату, всем юзерам приходит сообщение;
- сообщения хранятся в БД;
- в чат можно посылать смайлы, изображения, видео и ссылки;
- есть возможность создать приватную комнату.
Полезные ссылки:
See the Pen Simple chat app using firebase by Irem Lopsum (@iremlopsum) on CodePen.
Следующий в списке веб-проектов – классная полезность для Git-а. Зацените!
12. GitHub Timeline
Уровень: advanced
Описание: приложение должно показывать всю историю создания репозиториев, их имена и даты создания по конкретному юзеру. График можно расшарить. Используются только публичные репозитории.
Возможности:
- ввод имени пользователя GitHub;
- по нажатию на кнопку генерируется график активности данного пользователя;
- если такого юзера не существует – выводится сообщение об ошибке.
Бонус:
- возможность просматривать репозитории по году создания.
Полезные ссылки:
See the Pen CSS Timeline by Nils Wittler (@NilsWe) on CodePen.
13. Spell-It
Уровень: advanced
Описание: приложение Spell-It помогает пользователям практиковать свое правописание, воспроизводя слова в аудиозаписи, которые пользователь затем должен написать. Применяется углубленное программирование JavaScript.
Возможности:
- по нажатию на кнопку «Play» воспроизводится слово, которое должно быть введено;
- кнопка «Enter» отправляет введенное слово на проверку;
- при правильном/неправильном вводе слова появляется сообщение об ошибке или успехе.
Бонус:
- реализовать звуковое оповещение, когда слово правильно написано;
- реализовать подачу предупреждающего сигнала при неправильном написании;
- создать кнопку, «подчеркивающую» ошибки в слове.
Полезные ссылки:
Вторую статью, со следующими 9 идеями проектов и детально прописанными user stories можно почитать здесь.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
