From 52b5b47af3152934f181c4b79a8d81c8bb5667d5 Mon Sep 17 00:00:00 2001 From: saqhibbilal Date: Tue, 3 Dec 2024 02:37:20 +0530 Subject: [PATCH] Done with the lab --- package-lock.json | 16 ++++++++++ package.json | 1 + src/App.css | 52 ++++++++++++++++---------------- src/App.js | 77 ++++++++++++++++++++++++++++++++++++++--------- src/contacts.json | 16 +++++----- 5 files changed, 113 insertions(+), 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index 37cdec8..d3cb453 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.3.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -13963,6 +13964,15 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26584,6 +26594,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 216788b..fc7d2eb 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.3.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 74b5e05..e80fa43 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,38 @@ .App { text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + margin-top: 10px; } -.App-logo { - height: 40vmin; - pointer-events: none; -} +.contacts-table { + width: 100%; -@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; +.contacts-table thead { + background-color: grey; + height: 3rem; + margin-bottom: 1rem; + position: sticky; + top: 0; } -.App-link { - color: #61dafb; +.contact-row { + font-weight: bold; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.btn-container { + display: flex; + justify-content: space-around; + align-items: center; + gap: 10px; } + +.btn { + width: 200px; + height: 35px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..c487c74 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,70 @@ -import logo from './logo.svg'; import './App.css'; +import data from './contacts.json'; +import { useState } from 'react'; +import { FaTrophy, FaTrash } from 'react-icons/fa'; function App() { + const [contacts,setContacts] = useState(data.slice(0,5)); + + const handleAddContact = ()=>{ + const randomIndex = Math.floor(Math.random() * data.length) + 4; + const newContact = data[randomIndex]; + setContacts([...contacts,newContact]); + } + + const handleSortPopularity = ()=>{ + const sortedContacts= [...contacts].sort((a,b) => b.popularity - a.popularity); + setContacts(sortedContacts); + } + + const handleSortName = ()=>{ + const sortedContacts=[...contacts].sort((a,b) => a.name.localeCompare(b.name)); + setContacts(sortedContacts); + } + + + const handleDelete = (id)=>{ + setContacts(contacts.filter((contact)=>(contact.id !== id))); + } return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+ + + + +
+ + + + + + + + + + + + + + {contacts.map((contact)=>{ + return ( + + + + + + + + + ); + })} + +
PictureNamePopularityWon OscarWon EmmyActions
+ {contact.name} + {contact.name}{contact.popularity}{contact.wonOscar? : ""} {contact.wonEmmy? : ""} handleDelete(contact.id)}>
+ +
); } diff --git a/src/contacts.json b/src/contacts.json index f8551e5..510c8d8 100644 --- a/src/contacts.json +++ b/src/contacts.json @@ -2,10 +2,10 @@ { "name": "Idris Elba", "pictureUrl": "https://image.tmdb.org/t/p/w500/d9NkfCwczP0TjgrjpF94jF67SK8.jpg", - "popularity": 11.622713, + "popularity": 24.622713, "id": "11731993-0604-4bee-80d5-67ad845d0a38", - "wonOscar": false, - "wonEmmy": false + "wonOscar": true, + "wonEmmy": true }, { "name": "Johnny Depp", @@ -13,18 +13,18 @@ "popularity": 15.656534, "id": "7dad00f7-3949-477d-a7e2-1467fd2cfc06", "wonOscar": false, - "wonEmmy": false + "wonEmmy": true }, { "name": "Monica Bellucci", "pictureUrl": "https://image.tmdb.org/t/p/w500/qlT4904d8oi2NIs28RrgnIZDFZB.jpg", "popularity": 16.096436, "id": "0ad5e441-3084-47a1-9e9b-b917539bba71", - "wonOscar": false, + "wonOscar": true, "wonEmmy": false }, { - "name": "Gal Gadot", + "name": "Thanos' Grandma", "pictureUrl": "https://image.tmdb.org/t/p/w500/34kHAyBaBhq2kUrmhM15paEBuuI.jpg", "popularity": 10.049256, "id": "b497e3c4-50bb-4ae2-912f-eb36802c5bc2", @@ -76,8 +76,8 @@ "pictureUrl": "https://image.tmdb.org/t/p/w500/h1co81QaT2nJA41Sb7eZwmWl1L2.jpg", "popularity": 9.457546, "id": "56792412-8fda-4e10-b5ec-9cade83b167d", - "wonOscar": false, - "wonEmmy": false + "wonOscar": true, + "wonEmmy": true }, { "name": "Lauren Cohan",