app.js

Реализуйте логику работы формы для добавления новых todo записей:

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

В приложении есть сервер, принимающий POST-запросы c телом { todo: { name } } на /todos. Определите формат ответа сервера самостоятельно.

view.js

Реализуйте логику, отвечающую за слой view в приложении.

Примеры

Начальный HTML:

<form id="todo-form" class="form-inline mb-3">
  <div class="form-group">
    <input id="todo-input" type="text" class="form-control mr-2" name="name" placeholder="New todo">
  </div>
  <button id="todo-submit" class="btn btn-primary" type="submit">Save</button>
</form>
<ul id="todos" class="list-group">
</ul>

При попытке отправки слишком короткой записи:

<form id="todo-form" class="form-inline mb-3">
  <div class="form-group">
    <input id="todo-input" type="text" class="form-control mr-2" name="name" placeholder="New todo">
    <div class="invalid-feedback">this must be at least 3 characters</div>
  </div>
  <button id="todo-submit" class="btn btn-primary" type="submit">Save</button>
</form>
<ul id="todos" class="list-group">
</ul>

После успешной отправки:

<form id="todo-form" class="form-inline mb-3">
  <div class="form-group">
    <input id="todo-input" type="text" class="form-control mr-2" name="name" placeholder="New todo">
  </div>
  <button id="todo-submit" class="btn btn-primary" type="submit">Save</button>
</form>
<ul id="todos" class="list-group">
  <li>read books</li>
</ul>

Подсказки

  • для обработки ошибок приложения (например, сетевые ошибки) можно использовать компонент toast, в разметке есть заготовка.
  • yup
  • onchange
Успешных завершений: 43%

Для полного доступа к испытанию нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Последние код-ревью

Автор Дата обновления Версий
alekseyvlivanov 13 авг., 11:42 1
romezzz 08 авг., 15:00 2
irkin 01 авг., 16:17 1