Lab Assigment-16

src/App.css

@@ -1,38 +1,53 @@
 .App {
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: "Courier New", Courier, monospace;
+  font-weight: 700;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.single-contact img {
+  width: 80px;
+  height: auto;
+  border: 2px solid #ffd700;
+  margin: 2px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+table {
+  border-collapse: collapse;
+  border: 2px solid #ffd700;
+  margin: 20px;
+}
+table th {
+  background-color: #ffd700;
+  color: #ffffff;
+  padding: 10px 20px;
+  font-size: 24px;
 }
 
-.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;
+h1 {
+  color: #ffd700;
 }
 
-.App-link {
-  color: #61dafb;
+.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;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.del-button {
+  padding: 10px;
+  border-radius: 15px;
+  border: none;
+  font-family: "Courier New", Courier, monospace;
+  font-weight: 900;
+  cursor: pointer;
 }

src/App.js

@@ -1,23 +1,79 @@
-import logo from './logo.svg';
 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) => (
+    <tr key={contact.id} className="single-contact">
+      <td>
+        <img src={contact.pictureUrl} alt={contact.name} />
+      </td>
+      <td>{contact.name}</td>
+      <td>{contact.popularity.toFixed(2)}</td>
+      <td>{contact.wonOscar ? "🏆" : "-"}</td>
+      <td>{contact.wonEmmy ? "🏆" : "-"}</td>
+      <td id={contact.id}>
+        <button onClick={contactDelete} className="del-button">
+          Delete
+        </button>
+      </td>
+    </tr>
+  ));
+
+  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 (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>🌟CONTACTS🌟</h1>
+      <div className="buttons">
+        <button onClick={addRandomContact}>Add Random Contact</button>
+        <button onClick={sortByPopularity}>Sort by popularity</button>
+        <button onClick={sortByName}>Sort by name</button>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>Picture</th>
+            <th>Name</th>
+            <th>Popularity</th>
+            <th>Won-Oscar</th>
+            <th>Won-Emmy</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>{contactList}</tbody>
+      </table>
+
     </div>
   );
 }