change readme

README.md

@@ -1,34 +1,61 @@
-Критерії приймання
+## Критерії приймання
 Використовуй цей шаблон React-проекту як стартову точку своєї програми.
 
-Створений репозиторій goit-react-hw-01-components.
-Компоненти всіх завдань рендеряться на одній сторінці, всередині загального контейнера - кореневого компонента <App>.
-При здачі домашньої роботи є посилання на репозиторій з вихідним кодом проекту.
-У шапці репозиторія є посилання на живу сторінку на GitHub pages.
-Під час відвідування робочої сторінки (GitHub pages) завдання, в консолі відсутні помилки і попередження.
-Для кожного компонента є окрема папка з файлом React-компонента та файлом стилів.
-Для всіх компонентів описані propTypes.
-Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.
-Імена компонентів зрозумілі та описові.
-JS-код чистий та зрозумілий, використовується Prettier.
-Стилізація виконана CSS-модулями або Styled Components, тому класи в результуючому DOM відрізнятимуться від прикладів.
-Достатньо базової стилізації застосунку, насамперед він повинен працювати, а вже потім бути гарним. Приділяй 20% часу на CSS і 80% на JS.
-1 - Профіль соціальної мережі
-Необхідно створити компонент <Profile>, за допомогою якого ми могли б відображати інформацію про користувача соціальної мережі. Дані про користувача лежать у файлі user.json.
-
-component preview
-Опис компонента <Profile>
+* Створений репозиторій goit-react-hw-01-components.
+* Компоненти всіх завдань рендеряться на одній сторінці, всередині загального контейнера - кореневого компонента ```<App>```.
+* При здачі домашньої роботи є посилання на репозиторій з вихідним кодом проекту.
+* У шапці репозиторія є посилання на живу сторінку на GitHub pages.
+* Під час відвідування робочої сторінки (GitHub pages) завдання, в консолі відсутні помилки і попередження.
+* Для кожного компонента є окрема папка з файлом React-компонента та файлом стилів.
+* Для всіх компонентів описані propTypes.
+* Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.
+* Імена компонентів зрозумілі та описові.
+* JS-код чистий та зрозумілий, використовується Prettier.
+* Стилізація виконана CSS-модулями або Styled Components, тому класи в результуючому DOM відрізнятимуться від прикладів.
+* Достатньо базової стилізації застосунку, насамперед він повинен працювати, а вже потім бути гарним. Приділяй 20% часу на CSS і 80% на JS.
+## 1 - Профіль соціальної мережі
+Необхідно створити компонент ```<Profile>```, за допомогою якого ми могли б відображати інформацію про користувача соціальної мережі. Дані про користувача лежать у файлі [user.json](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fgoitacademy%2Freact-homework%2Fblob%2Fmaster%2Fhomework-01%2Fsocial-profile%2Fuser.json).
+
+### Опис компонента ```<Profile>```
 Компонент повинен приймати кілька пропсів з інформацією про користувача:
 
-username — ім'я користувача
-tag — тег в соціальній мережі без @
-location — місто і країна
-avatar — посилання на зображення
-stats — об'єкт з інформацією про активності
+* username — ім'я користувача
+* tag — тег в соціальній мережі без @
+* location — місто і країна
+* avatar — посилання на зображення
+* stats — об'єкт з інформацією про активності.
 Компонент повинен створювати DOM елемент наступної структури.
-
-
-Приклад використання
+```
+<div class="profile">
+  <div class="description">
+    <img
+      src="https://cdn-icons-png.flaticon.com/512/1077/1077012.png"
+      alt="User avatar"
+      class="avatar"
+    />
+    <p class="name">Petra Marica</p>
+    <p class="tag">@pmarica</p>
+    <p class="location">Salvador, Brasil</p>
+  </div>
+
+  <ul class="stats">
+    <li>
+      <span class="label">Followers</span>
+      <span class="quantity">1000</span>
+    </li>
+    <li>
+      <span class="label">Views</span>
+      <span class="quantity">2000</span>
+    </li>
+    <li>
+      <span class="label">Likes</span>
+      <span class="quantity">3000</span>
+    </li>
+  </ul>
+</div>
+```
+### Приклад використання
+```
 import user from 'path/to/user.json;
 
 <Profile
@@ -38,19 +65,20 @@ import user from 'path/to/user.json;
   avatar={user.avatar}
   stats={user.stats}
 />
+```
+## 2- Секція статистики
+Створити компонент ```<Statistics>```, який би відображав статистику з переданих пропсів. Наприклад, завантаження у хмару за типом файлів, відвідування веб-сторінки користувачами різних країн, фінансові витрати тощо. Дані про статистику лежать у файлі [data.json](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fgoitacademy%2Freact-homework%2Fblob%2Fmaster%2Fhomework-01%2Fstatistics%2Fdata.json).
 
-2- Секція статистики
-Створити компонент <Statistics>, який би відображав статистику з переданих пропсів. Наприклад, завантаження у хмару за типом файлів, відвідування веб-сторінки користувачами різних країн, фінансові витрати тощо. Дані про статистику лежать у файлі data.json.
 
-component preview
-Опис компонента <Statistics>
+Опис компонента ```<Statistics>```
 Компонент повинен приймати два пропи title і stats, в яких вказується заголовок та об'єкт статистики.
 
-title – не обов'язковий, і якщо він не переданий, не повинна рендеритись розмітка заголовка .
-stats – масив об'єктів, що містять інформацію про елемент статистики. Може мати довільну кількість елементів.
-Колір фону елемента статистики в оформленні можна пропустити або створити функцію для генерації випадкового кольору.
+* title – не обов'язковий, і якщо він не переданий, не повинна рендеритись розмітка заголовка .
+* stats – масив об'єктів, що містять інформацію про елемент статистики. Може мати довільну кількість елементів.
+* Колір фону елемента статистики в оформленні можна пропустити або створити функцію для генерації випадкового кольору.
+
 Компонент повинен створювати DOM елемент наступної структури.
-
+```
 <section class="statistics">
   <h2 class="title">Upload stats</h2>
 
@@ -73,60 +101,63 @@ stats – масив об'єктів, що містять інформацію 
     </li>
   </ul>
 </section>
-
-Приклад використання
+```
+### Приклад використання
+```
 import data from '/path/to/data.json';
 
 <Statistics title="Upload stats" stats={data} />
 <Statistics stats={data} />
+```
+## 3 - Список друзів
+Необхідно створити компонент ```<FriendList>```, за допомогою якого ми могли б відображати інформацію про друзів користувача. Інформація про друзів зберігається у файлі [friends.json](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fgoitacademy%2Freact-homework%2Fblob%2Fmaster%2Fhomework-01%2Ffriend-list%2Ffriends.json).
 
-3 - Список друзів
-Необхідно створити компонент <FriendList>, за допомогою якого ми могли б відображати інформацію про друзів користувача. Інформація про друзів зберігається у файлі friends.json.
 
-component preview
-Опис компонента <FriendList>
+Опис компонента ```<FriendList>```
+
 Компонент повинен приймати один проп friends – масив об'єктів друзів.
 
 Компонент повинен створювати DOM наступної структури.
-
+```
 <ul class="friend-list">
   <!-- Довільна кіл-сть FriendListItem -->
 </ul>
-
-Опис компонента <FriendListItem>
+```
+### Опис компонента ```<FriendListItem>```
 Компонент повинен приймати кілька пропів:
 
-avatar - посилання на аватар
-name - ім'я друга
-isOnline - буль, що сигналізує про стан друга: в мережі або ні.
+* avatar - посилання на аватар
+* name - ім'я друга
+* isOnline - буль, що сигналізує про стан друга: в мережі або ні.
 Залежно від пропа isOnline, повинен змінюватися колір фону span.status. Це можна зробити за допомогою різних CSS-класів або Styled Components.
 
 Компонент повинен створювати DOM наступної структури.
-
+```
 <li class="item">
   <span class="status"></span>
   <img class="avatar" src="" alt="User avatar" width="48" />
   <p class="name"></p>
 </li>
-
-Приклад використання
+```
+### Приклад використання
+```
 import friends from 'path/to/friends.json';
 
 <FriendList friends={friends} />;
+```
 
-4 - Історія транзакцій
+## 4 - Історія транзакцій
 Необхідно створити компонент історії транзакцій в особистому кабінеті інтернет-банку.
 
-component preview
-Дані для списку доступні у форматі JSON у файлі transactions.json. Це масив об'єктів, де кожен об'єкт описує одну транзакцію з наступними властивостями:
-
-id — унікальний ідентифікатор транзакції
-type — тип транзакції
-amount - сума транзакції
-currency - тип валюти
-Опис компонента <TransactionHistory>
-Необхідно створити компонент <TransactionHistory>, який приймає один проп items – масив об'єктів транзакцій з transactions.json. Компонент створює розмітку таблиці. Кожна транзакція – це рядок таблиці. У прикладі наведена розмітка двох транзакцій.
+Дані для списку доступні у форматі JSON у файлі [transactions.json](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fgoitacademy%2Freact-homework%2Fblob%2Fmaster%2Fhomework-01%2Ftransaction-history%2Ftransactions.json). Це масив об'єктів, де кожен об'єкт описує одну транзакцію з наступними властивостями:
 
+* id — унікальний ідентифікатор транзакції
+* type — тип транзакції
+* amount - сума транзакції
+* currency - тип валюти
+### Опис компонента ```<TransactionHistory>```
+Необхідно створити компонент ```<TransactionHistory>```, який приймає один проп items – масив об'єктів транзакцій з transactions.json. Компонент створює розмітку таблиці. Кожна транзакція – це рядок таблиці. У прикладі наведена розмітка двох транзакцій.
+```
 <table class="transaction-history">
   <thead>
     <tr>
@@ -149,8 +180,10 @@ currency - тип валюти
     </tr>
   </tbody>
 </table>
-
-Приклад використання
-import transactions from 'path/to/transactions.json';
+```
+### Приклад використання
+```
+<TransactionHistory items={transactions} />;
+```