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.