+
-
-### Iteration 6 | Bonus | Styling
+Check image inside
+See Expected Result
+ +### Bonus: Iteration 6 | Styling Unfortunately, this contact list isn't production-ready. We are in the movie business! It has to sparkle! Add some beautiful CSS to make the app "pop". diff --git a/index.html b/index.html new file mode 100644 index 0000000000..307d66e80e --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + +
-
- 
-
-
- );
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000000..c76fb3a219
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,84 @@
+import { useState } from "react";
+import "./App.css";
+import rawContacts from "./contacts.json";
+
+function App() {
+ const slicedContacts = rawContacts.slice(0, 5);
+
+ const [contacts, setContacts] = useState(slicedContacts);
+
+ const randomContactArray = rawContacts.slice(5);
+
+ const randomContact = randomContactArray[Math.floor(Math.random() * 47)];
+
+ const fullRandomContact = rawContacts[Math.floor(Math.random() * 52)];
+
+ function handleDelete(id) {
+ console.log(id);
+ const arrayWithoutCard = contacts.filter((contact) => contact.id !== id);
+
+ setContacts(arrayWithoutCard);
+ }
+
+ function handleClick() {
+ const contactExists = contacts.some(
+ (contact) => contact.id === randomContact.id
+ );
+ if (!contactExists) {
+ setContacts((prevContacts) => [...prevContacts, randomContact]);
+ }
+ }
+
+ function sortByName() {
+ const sortedContacts = [...contacts].sort((a, b) =>
+ a.name.localeCompare(b.name)
+ );
+ setContacts(sortedContacts);
+ }
+
+ function sortByPop() {
+ const sortedPopularity = [...contacts].sort(
+ (a, b) => b.popularity - a.popularity
+ );
+ setContacts(sortedPopularity);
+ }
+
+ return (
+
- Edit src/App.js and save to reload.
-
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afeece..0000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(LAB | React IronContacts
+| Picture | +Name | +Popularity | +Won an Oscar | +Won an Emmy | +Actions | +
|---|---|---|---|---|---|
|
+ |
+ {contact.name} | +{contact.popularity.toFixed(1)} | +{contact.wonOscar ? "🏆" : null} | +{contact.wonEmmy ? "🌟" : null} | ++ + | +