https://github.com/dm-zhuk/goit-react-woolf-hw-02-phonebook

ReactJS.Topic IV-Forms
https://github.com/dm-zhuk/goit-react-woolf-hw-02-phonebook

components css-in-js react styled-components

Last synced: about 6 hours ago
JSON representation

ReactJS.Topic IV-Forms

• Host: GitHub
• URL: https://github.com/dm-zhuk/goit-react-woolf-hw-02-phonebook
• Owner: dm-zhuk
• Created: 2024-04-04T16:08:31.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-10T17:19:35.000Z (7 months ago)
• Last Synced: 2024-04-10T21:15:44.431Z (7 months ago)
• Topics: components, css-in-js, react, styled-components
• Language: JavaScript
• Homepage: https://dm-zhuk.github.io/goit-react-woolf-hw-02-phonebook/
• Size: 2.75 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.RO.md

Awesome Lists containing this project

README

        
Книга контактів Напиши застосунок зберігання контактів телефонної книги.

Крок 1 Застосунок повинен складатися з форми і списку контактів. На поточному

кроці реалізуй додавання імені контакту та відображення списку контактів.

Застосунок не повинен зберігати контакти між різними сесіями (оновлення

сторінки).

Використовуйте цю розмітку інпуту з вбудованою валідацією для імені контакту.

Стан, що зберігається в батьківському компоненті , обов'язково повинен бути

наступного вигляду, додавати нові властивості не можна.

state = { contacts: [], name: '' }

Кожен контакт повинен бути об'єктом з властивостями name та id. Для генерації

ідентифікаторів використовуй будь-який відповідний пакет, наприклад nanoid.

Після завершення цього кроку, застосунок повинен виглядати приблизно так.

component preview Крок 2 Розшир функціонал застосунку, дозволивши користувачам

додавати номери телефонів. Для цього додай  у форму і

властивість для зберігання його значення в стані.

state = { contacts: [], name: '', number: '' }

Використовуй цю розмітку інпуту з вбудованою валідацією для номеру контакту.

Після завершення цього кроку, застосунок повинен виглядати приблизно так.

component preview Крок 3 Додай поле пошуку, яке можна використовувати для

фільтрації списку контактів за ім'ям.

Поле пошуку – це інпут без форми, значення якого записується у стан

(контрольований елемент). Логіка фільтрації повинна бути нечутливою до регістру.

state = { contacts: [], filter: '', name: '', number: '' }

component preview Коли ми працюємо над новим функціоналом, буває зручно жорстко

закодувати деякі дані у стан. Це позбавить необхідності вручну вводити дані в

інтерфейсі для тестування роботи нового функціоналу. Наприклад, можна

використовувати такий початковий стан.

state = { contacts: [ {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},

{id: 'id-2', name: 'Hermione Kline', number: '443-89-12'}, {id: 'id-3', name:

'Eden Clements', number: '645-17-79'}, {id: 'id-4', name: 'Annie Copeland',

number: '227-91-26'}, ], filter: '', name: '', number: '' }

Крок 4 Якщо твій застосунок реалізований в одному компоненті , виконай

рефакторинг, виділивши відповідні частини в окремі компоненти. У стані

кореневого компонента  залишаться тільки властивості contacts і filter.

state = { contacts: [], filter: '' }

Достатньо виділити чотири компоненти: форма додавання контактів, список

контактів, елемент списку контактів та фільтр пошуку.

Після рефакторингу кореневий компонент застосунку виглядатиме так.



  
Phonebook

  


  
Contacts

  

  



Крок 5 Заборони користувачеві можливість додавати контакти, імена яких вже

присутні у телефонній книзі. При спробі виконати таку дію виведи alert із

попередженням.

component preview Крок 6 Розшир функціонал застосунку, дозволивши користувачеві

видаляти раніше збережені контакти.

component preview