Javascript: Form state

JS: Frontend architecture
Last update: 24 Jan 23:20
0
Students

app.js

Implement the form logic for adding new todo entries:

  • the form supports input validation (mandatory field, minimum 3, maximum 30 characters)
  • while loading a new record, the form fields and the submit button should be blocked

The application has a server that accepts POST requests with the body { todo: { name } } to /todos. Define the server response format yourself.

view.js

Implement the logic responsible for the view layer in the application.

Examples

Initial 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>

When you try to send an entry that is too short:

<form id="todo-form" class="form-inline mb-3">
  <div class="form-group">
    <input id="todo-input" type="text" class="form-control mr-2 is-invalid" 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>

After successful submission:

<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>

Hints

  • to handle application errors (for example, network errors), you can use the toast component, there is a stub in the markup.
  • yup validation functions are asynchronous, but their synchronous versions can be used.
  • onchange

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests