- Сверстать заготовку будущего веб-приложения.
- В процессе можно пользоваться презентацией.
- Написать стили для веб-приложения. Не обязательно, чтоб было как на картинке, главное сам процесс.
- Постараться отцентрировать весь блок горизонтально и вертикально.
- Будет плюсом, если сам список можно будет прокручивать без прокручивания самой страницы.
- В процессе можно пользоваться презентацией.
- Добавить возможность добавления новых элементов.
- Добавить возможность удаления элементов.
- Задание со звёздочкой: Сохранить элементы в localstorage.
- Сделать нажимаемыми ссылки внизу. Нажимаешь на ссылку, она становится жирной. Так устанавливается режим фильтрации. Можно реализовать это с помощью радиокнопок.
- Сделать фильтрацию в соответствии с выбранным режимом. Нажали на ссылку, список обновился.
- Рефакторинг: вынос кода, обновляющего список, в отдельную функцию render().
- Список интересных API,
- 7 публичных API
- Проверенные:
- Google Books.
- Погода по названию города.
- Погода по координатам.
- arXive.
- Орбиты спутников в космосе.
- Землетрясения.
- Координаты самолётов (и не только).
- Поиск городов.
- Еда.
- Динозавры.
- Fake users.
- NASA.
- Покемоны.
- Чат.
- TODO list.
- НСКГорТранс:
- VK.
- HeadHunter.
- Dadata.
- Поиск мест по запросу.
- Самодельное API городов.
- При отправке должен отображаться спиннер, который исчезает при получении результатов.
- Типовой вид формы:
- Сортировку по какому-либо полю.
- Фильтрация по категории.
- Ограничение количества результатов на странице.
- Типовой вид формы:
- Введение в React.js
- Функциональные компоненты и хуки
- Как работать с формами и контролами
- Тестирование с помощью testing-library
- Добавление стилей
- Маршрутизация
- Запросы в сеть
- TypeScript + React
Сделать 1 и 2 лабораторные на React.js.
На странице отображается чёрное сердечко 🖤. Когда на него кликнули дважды (задержка <= 800 ms),
сердечко становится красным ❤️. По техническим причинам нельзя пользоваться встроенным событием
onDoubleClick.
Написать кликер с возможностью уменьшения и увеличения:
Если число нечётное, то оно красное, иначе зелёное.
Страница показывает красную кнопку. На неё пока нельзя нажимать. Через случайное время (1-10 с) цвет кнопки меняется на зелёный и на неё надо нажать. После нажатия компонент пишет время между изменением цвета и нажатием (время реакции среднего человека 0.1-0.2 с).
Таймер при нажатии кнопки "старт" идёт до 0 и останавливается. Можно остановить кнопкой "стоп".
Многострочное поле ввода, а снизу выводится список слов и сколько раз это слово встретилось. Обновляется автоматически при изменении поля.
Калькулятор для перевода в другие системы счисления (2, 8, 16). Результат меняется при изменении полей.
Сделать калькулятор перевода температур из Цельсия в Фаренгейты и обратно. При изменении одного поля меняется другое и наоборот.
Сверстать виджет нотификаций. Он показывает, сколько пришло новых сообщений.
Колокольчик можно отобразить с помощью эмодзи 🔔. Число отображается в виде текста
в круглом <div>.
Сверстать модную кнопку с круглыми краями, белым текстом и оранжевым фоном. При нажатии на кнопку цвет фона меняется на зелёный.
Реализовать светофор, меняющийся раз в секунду. Задача со ✨: сделать светофор с показом секунд, как здесь.
