5 идей приложений для новичков!

06.05.2020
Posted in blog-article
06.05.2020 admin

5 идей приложений для новичков!

В этой статье собрали 5 идей приложений для новичков. Каждое описание включает в себя:
✅ Четкую и описательную цель;
✅ Список пользовательских историй, которые должны быть реализованы;
✅ Список бонусных, опциональных функций, но “хорошо бы их иметь”;
✅ Все ресурсы и ссылки для завершения проекта

1. Таймер обратного отсчета

У всех нас есть важные события, которые мы с нетерпением ждем в жизни: дни рождения, юбилеи и пр. Разве не было бы здорово иметь приложение, которое отсчитывает месяцы, дни, часы, минуты и секунды до события? Таймер обратного отсчета — это именно такое приложение!

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

Ограничения

Используйте только встроенные языковые функции для своих вычислений, а не полагайтесь на библиотеку или пакет, такие как MomentJS. Это, конечно, предполагает, что язык по вашему выбору имеет адекватные функции манипуляции датой и временем, встроенные в него.

Вы не можете использовать какие-либо генераторы кода, такие как обратный отсчет до сайта. Вы должны разработать свою собственную оригинальную реализацию.

Для пользователей

— Пользователь может видеть поле ввода события, содержащее поле имени события, поле даты, необязательное время и кнопку «Пуск».

— Пользователь может определить событие, введя его название, дату, когда оно должно состояться, и необязательное время проведения события. Если время опущено, то предполагается, что оно находится в полночь на дату события в местном часовом поясе.

— Пользователь может увидеть предупреждающее сообщение, если имя события пустое.

— Пользователь может увидеть предупреждающее сообщение, если дата или время события введены неправильно.

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

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

— Пользователь может видеть, что элементы в таймере обратного отсчета автоматически уменьшаются. Например, когда количество оставшихся секунд достигнет 0, количество оставшихся минут уменьшится на 1, и секунды начнут обратный отсчет с 59. Это прогрессирование должно происходить от секунд до позиции оставшихся дней на дисплее обратного отсчета.

Бонус

1) Пользователь может сохранить событие так, чтобы оно сохранялось в разных сеансах

2) Пользователь может видеть оповещение при достижении события

3) Пользователь может указать более одного события.

4) Пользователь может видеть таймеры обратного отсчета для каждого события, которое было определено.

Полезные ссылки и ресурсы

Изображения аналоговых ламповых таймеров обратного отсчета можно найти здесь

clearInterval MDN

setInterval MDN

Data MDN

Примеры проектов

Таймер обратного отсчета построенный с реактом

Простые Часы / Таймер Обратного Отсчета

2. FlipImage

Для веб-разработчиков важно понимать основы манипулирования изображениями, поскольку богатые веб-приложения полагаются на изображения для повышения ценности UI/UX.

FlipImage исследует один из аспектов манипуляции изображениями — вращение изображения. Это приложение отображает квадратную панель, содержащую одно изображение, представленное в матрице 2х2. Используя набор стрелок вверх, вниз, влево и вправо, расположенных рядом с каждым из изображений, пользователь может перевернуть их вертикально или горизонтально.

Вы должны использовать только собственный HTML, CSS и Javascript для реализации этого приложения. Пакеты изображений и библиотеки не допускаются.

Заметки пользователей

— Пользователь может видеть панель, содержащую одно изображение, повторяющееся в матрице 2×2

— Пользователь может перевернуть любое из изображений вертикально или горизонтально, используя набор стрелок вверх, вниз, влево и вправо рядом с изображением

Бонус

1) Пользователь может изменить изображение по умолчанию, введя URL-адрес другого изображения в поле ввода

2) Пользователь может отобразить новое изображение, нажав кнопку «Показать» рядом с полем ввода

3) Пользователь может увидеть сообщение об ошибке, если новый URL-адрес изображения не найден

Полезные ссылки и ресурсы

Как перевернуть изображение

Создайте CSS листая Аниматин

Примеры проектов

Графические эффекты от bennettfeely

3. Приложение Для Заметок

Создавайте и храните свои заметки для отложенных целей!

Для пользователей

— Пользователь может создать заметку

— Пользователь может редактировать заметку

— Пользователь может удалить заметку

— При закрытии окна браузера заметки будут сохранены, а когда пользователь вернется, данные будут извлечены

Бонус

1) Пользователь может создавать и редактировать заметку в формате Markdown. При сохранении он преобразует Markdown в HTML

2) Пользователь может видеть дату, когда он создал заметку

Полезные ссылки и ресурсы

локальное хранилище

Руководство по уценке

Маркированный парсер Markdown

Примеры проектов

Заметки Markdown, построенные с помощью Angular на Codepen

Заметки Markdown, построенные с помощью React

Заметки Markdown, построенные с помощью Angular 7 и bootstrap 4

4. Рецепт

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

Цель приложения Recipe состоит в том, чтобы помочь пользователю управлять рецептами таким образом, чтобы они были легки в исполнении.

Ограничения

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

Для пользователей

— Пользователь может видеть список названий рецептов

— Пользователь может нажать на название рецепта, чтобы отобразить карточку рецепта, содержащую название рецепта, тип еды (завтрак, обед, ужин или закуска), количество людей, которых он обслуживает, его уровень сложности (начинающий, средний, продвинутый), список ингредиентов (включая их количество) и этапы приготовления.

— Пользователь нажимает на новый заголовок рецепта, чтобы заменить текущую карточку новым рецептом.

Бонус

1) Пользователь может увидеть фотографию, показывающую, как выглядит готовое блюдо.

2) Пользователь может искать рецепт не только в списке названий рецептов при вводе названия блюда в поле поиска и нажав кнопку «Поиск». В качестве источника рецептов можно использовать любой API рецептов с открытым исходным кодом (см. MealDB ниже).

3) Пользователь может видеть список рецептов, соответствующих поисковым запросам

4) Пользователь может нажать на название рецепта, чтобы отобразить его карточку рецепта.

5) Пользователь может увидеть предупреждающее сообщение, если соответствующий рецепт не был найден.

6) Пользователь может нажать кнопку «Сохранить» на карточках для рецептов, расположенных через API, чтобы сохранить копию в этот файл рецептов приложений или базу данных.

Полезные ссылки и ресурсы

Использование выборки

Аксиос

API-интерфейс MealDB

Примеры проектов

Recipe Box —бесплатный код Camp Project (FCC)

Recipe Box на React

5. Приложение Для Викторины

Практикуйтесь и проверяйте свои знания, отвечая на вопросы в приложении для викторин.

Как разработчик вы можете создать приложение-викторину для тестирования навыков кодирования других разработчиков. (HTML, CSS, JavaScript, Python, PHP и т. д…)

Для пользователей

— Пользователь может начать тест, нажав на кнопку

— Пользователь может увидеть вопрос с 4 возможными ответами

— После выбора ответа отобразите пользователю следующий вопрос. Делайте это до тех пор, пока тест не будет закончен

— В конце концов, пользователь может увидеть следующую статистику:

1) Время, которое потребовалось, чтобы закончить тест

2) Сколько правильных ответов он получил

3) Сообщение, показывающее, прошел ли он тест или провалился

Бонус

1) Пользователь может поделиться результатом викторины в социальных сетях

2) Добавьте в приложение несколько викторин. Пользователь может выбрать, в какой из них поучаствовать

3) Пользователь может создать учетную запись и сохранить все результаты в своей панели мониторинга. Пользователь может пройти тест несколько раз

Полезные ссылки и ресурсы

Open Trivia Database

Примеры проектов

Викторина, созданная с помощью React (ждите его загрузки, так как он хранится на Heroku)

Интерфейс приложения викторины

Счастливого кодирования!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Contact

Давайте работать вместе!

Пишите нам и найдем точки соприкосновения, может станем партнерами, а может поможем вам зайти в нашу чудесную нишу

Вы разработчик?

Пишите! Нам постоянно нужны новые кадры, либо можем помочь в продвижении вашего приложения

Новичок?

Поможем быстро войти в нишу, не тратя годы на понимание

Давно в нише?

Рады будем пообщаться как на темы whitehat, так и blackhat тематики ^_^ + всегда есть что обсудить по поводу рекламных сетей

ПИШИ В TELEGRAM!

Contact