App.jsx
Реализуйте и экспортируйте по умолчанию компонент, который реализует приложение "записная книжка".
В этом приложении можно добавлять, удалять и редактировать задачи с помощью модальных окон. На любое действие возникает модальное окно, внутри которого можно выполнять разные действия.
Примеры
Начальный HTML:
<div class="mb-3">
<button data-testid="item-add" class="btn btn-secondary">add</button>
</div>
После клика на добавление:
<div class="mb-3">
<button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title h4">Add</div>
<button class="close" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" data-testid="input-body" name="body" required="" value="" />
</div>
<input class="btn btn-primary" type="submit" value="submit" />
</form>
</div>
</div>
</div>
После добавления первой задачи:
<div class="mb-3">
<button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div>
<span class="mr-3">first task!</span>
<button type="button" class="border-0 btn-link mr-3 p-0" data-testid="item-rename">rename</button>
<button type="button" class="border-0 btn-link p-0" data-testid="item-remove">remove</button>
</div>
Клик по переименованию:
<div class="mb-3">
<button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div>
<span class="mr-3">first task!</span>
<button type="button" class="border-0 btn-link mr-3 p-0" data-testid="item-rename">rename</button>
<button type="button" class="border-0 btn-link p-0" data-testid="item-remove">remove</button>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title h4">Rename</div>
<button class="close" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" data-testid="input-body" name="body" required="" value="first task!" />
</div>
<input class="btn btn-primary" type="submit" value="submit" />
</form>
</div>
</div>
</div>
После переименования все возвращается к предыдущему HTML, но с новым именем.
Клик по удалению:
<div class="mb-3">
<button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div>
<span class="mr-3">changed name!</span>
<button type="button" class="border-0 btn-link mr-3 p-0" data-testid="item-rename">rename</button>
<button type="button" class="border-0 btn-link p-0" data-testid="item-remove">remove</button>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title h4">Remove</div>
<button class="close" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="btn btn-danger" type="submit" value="remove" />
</div>
</form>
</div>
</div>
</div>
После удаления, запись пропадает.
modals/Add.jsx
Реализуйте модальное окно для добавления задачи. Сделайте так, чтобы при появлении окна происходила фокусировка на поле для ввода. Это важно с точки зрения удобства.
modals/Rename.jsx
Реализуйте модальное окно для обновления названия задачи. Сделайте так, чтобы при появлении окна происходила фокусировка на поле для ввода и при этом выделялся весь текст. Это важно с точки зрения удобства.
modals/Remove.jsx
Реализуйте модальное окно для удаления задачи.
Для полного доступа к испытанию нужна профессиональная подписка
Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.