Finished Homework 1

Author: svwoodhouse

Sections/Section 3/01-starting-setup/src/App.js

@@ -1,4 +1,4 @@
-import ExpenseItem from "./components/ExpenseItem";
+import Expenses from "./components/Expenses";
 
 function App() {
   const expenses = [
@@ -26,10 +26,7 @@ function App() {
   return (
     <div>
       <h2>Let's get started!</h2>
-      <ExpenseItem title={expenses[0].title} amount={expenses[0].amount} date={expenses[0].date}></ExpenseItem>
-      <ExpenseItem title={expenses[1].title} amount={expenses[1].amount} date={expenses[1].date}></ExpenseItem>
-      <ExpenseItem title={expenses[2].title} amount={expenses[2].amount} date={expenses[2].date}></ExpenseItem>
-      <ExpenseItem title={expenses[3].title} amount={expenses[3].amount} date={expenses[3].date}></ExpenseItem>
+      <Expenses {...expenses}></Expenses>
     </div>
   );
 }

Sections/Section 3/01-starting-setup/src/components/Expenses.css

@@ -0,0 +1,9 @@
+.expenses {
+    padding: 1rem;
+    background-color: rgb(31, 31, 31);
+    margin: 2rem auto;
+    width: 50rem;
+    max-width: 95%;
+    border-radius: 12px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
+  }

Sections/Section 3/01-starting-setup/src/components/Expenses.js

@@ -0,0 +1,16 @@
+import './Expenses.css'
+import ExpenseItem from './ExpenseItem'
+
+function Expenses (props) {
+
+    return(
+        <div className='expenses'>
+            <ExpenseItem title={props[0].title} amount={props[0].amount} date={props[0].date}></ExpenseItem>
+            <ExpenseItem title={props[1].title} amount={props[1].amount} date={props[1].date}></ExpenseItem>
+            <ExpenseItem title={props[2].title} amount={props[2].amount} date={props[2].date}></ExpenseItem>
+            <ExpenseItem title={props[3].title} amount={props[3].amount} date={props[3].date}></ExpenseItem>
+        </div>
+    )
+}
+
+export default Expenses