From 4f7cec3f4546d0e830400276a04b41a12269802c Mon Sep 17 00:00:00 2001
From: BrotherlyHamlet16 <80749000+Clever-Niwagaba@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:14:36 +0300
Subject: [PATCH] done
---
src/App.css | 91 +++--
src/App.js | 106 ++++--
src/App.test.js | 16 +-
src/contacts.json | 838 ++++++++++++++++++++---------------------
src/index.css | 26 +-
src/index.js | 34 +-
src/reportWebVitals.js | 26 +-
src/setupTests.js | 10 +-
8 files changed, 609 insertions(+), 538 deletions(-)
diff --git a/src/App.css b/src/App.css
index 74b5e05..6ab7cf4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,53 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+.App {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-family: "Courier New", Courier, monospace;
+ font-weight: 700;
+}
+
+.single-contact img {
+ width: 80px;
+ height: auto;
+ border: 2px solid #ffd700;
+ margin: 2px;
+}
+
+table {
+ border-collapse: collapse;
+ border: 2px solid #ffd700;
+ margin: 20px;
+}
+table th {
+ background-color: #ffd700;
+ color: #ffffff;
+ padding: 10px 20px;
+ font-size: 24px;
+}
+
+h1 {
+ color: #ffd700;
+}
+
+.buttons button {
+ color: #ffffff;
+ background-color: #ffd700;
+ padding: 10px;
+ margin: 10px;
+ border-radius: 15px;
+ border: none;
+ font-family: "Courier New", Courier, monospace;
+ font-weight: 900;
+ font-size: 20px;
+ cursor: pointer;
+}
+
+.del-button {
+ padding: 10px;
+ border-radius: 15px;
+ border: none;
+ font-family: "Courier New", Courier, monospace;
+ font-weight: 900;
+ cursor: pointer;
+}
diff --git a/src/App.js b/src/App.js
index 3784575..09076a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,81 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
- return (
-
- );
-}
-
-export default App;
+import './App.css';
+import contactsData from "./contacts.json";
+import { useState } from "react";
+
+function App() {
+ const [contacts, setContacts] = useState(contactsData.slice(0, 5));
+
+ let contactList = contacts.map((contact) => (
+
+
+ 
+ |
+ {contact.name} |
+ {contact.popularity.toFixed(2)} |
+ {contact.wonOscar ? "🏆" : "-"} |
+ {contact.wonEmmy ? "🏆" : "-"} |
+
+
+ |
+
+ ));
+
+ let addRandomContact = () => {
+ let contactsID = contacts.map((contact) => contact.id);
+ let otherContacts = contactsData.filter(
+ (contact) => !contactsID.includes(contact.id)
+ );
+ let randomIndex = Math.floor(Math.random() * otherContacts.length);
+ setContacts([...contacts, otherContacts[randomIndex]]);
+ };
+
+ let sortByPopularity = () => {
+ let contactList = [...contacts];
+ contactList.sort((a, b) => b.popularity - a.popularity);
+ setContacts(contactList);
+ };
+
+ let sortByName = () => {
+ let contactList = [...contacts];
+ contactList.sort((a, b) => {
+ if (b.name > a.name) return -1;
+ if (b.name < a.name) return 1;
+ return 0;
+ });
+ setContacts(contactList);
+ };
+
+ function contactDelete(e) {
+ let cID = e.target.parentNode.id;
+ let contactList = contacts.filter((contact) => contact.id !== cID);
+ setContacts(contactList);
+ }
+ return (
+
+
🌟CONTACTS🌟
+
+
+
+
+
+
+
+
+ | Picture |
+ Name |
+ Popularity |
+ Won-Oscar |
+ Won-Emmy |
+ Actions |
+
+
+ {contactList}
+
+
+