commit

src/App.js

@@ -1,23 +1,27 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import Expenses from "./components/Expenses/Expenses";
+import NewExpense from "./components/NewExpense/NewExpense";
+
+const DUMMY_EXPENSES = [
+  {
+    id: "e1",
+    title: "Toilet Paper",
+    amount: 94.12,
+    date: new Date(2023, 7, 10),
+  },
+];
 
 function App() {
+  const [expenses, setExpenses] = useState(DUMMY_EXPENSES);
+
+  const addExpenseHandler = (expense) => {
+    setExpenses((prevState) => [expense, ...prevState]);
+  };
+
   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>
+      <NewExpense onAddExpense={addExpenseHandler} />
+      <Expenses item={expenses} />
     </div>
   );
 }

src/components/Chart/Chart.css

@@ -0,0 +1,9 @@
+.chart {
+    padding: 1rem;
+    border-radius: 12px;
+    background-color: #f8dfff;
+    text-align: center;
+    display: flex;
+    justify-content: space-around;
+    height: 10rem;
+  }

src/components/Chart/Chart.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import "./Chart.css";
+import Chartbar from "./Chartbar";
+
+export default function Chart(props) {
+  const dataPointValue = props.dataPoints.map(dataPoint => dataPoint.value)
+  console.log(dataPointValue)
+  const totalMaximum = Math.max(...dataPointValue)
+  return (
+    <div className="chart">
+      {props.dataPoints.map((dataPoint) => (
+        <Chartbar 
+        key={dataPoint.label}
+        value={dataPoint.value} 
+        maxValue={totalMaximum}
+        label={dataPoint.label}
+        />
+      ))}
+    </div>
+  );
+}

src/components/Chart/Chartbar.css

@@ -0,0 +1,30 @@
+.chart-bar {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .chart-bar__inner {
+    height: 100%;
+    width: 100%;
+    border: 1px solid #313131;
+    border-radius: 12px;
+    background-color: #c3b4f3;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .chart-bar__fill {
+    background-color: #4826b9;
+    width: 100%;
+    transition: all 0.3s ease-out;
+  }
+
+  .chart-bar__label {
+    font-weight: bold;
+    font-size: 0.5rem;
+    text-align: center;
+  }

src/components/Chart/Chartbar.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import "./Chartbar.css";
+
+export default function Chartbar(props) {
+  let barFilledHeight = "0% ";
+
+  if (props.maxValue > 0) {
+    barFilledHeight = Math.round((props.value / props.maxValue) * 100) + "%";
+  }
+  return (
+    <div className="chart-bar">
+      <div className="chart-bar__inner">
+        <div
+          className="chart-bar__fill"
+          style={{ height: barFilledHeight }}
+        ></div>
+      </div>
+      <div className="chart-bar__label">{props.label}</div>
+    </div>
+  );
+}

src/components/Expenses/ExpenseDate.css

@@ -0,0 +1,26 @@
+.expense-date {
+    display: flex;
+    flex-direction: column;
+    width: 5.5rem;
+    height: 5.5rem;
+    border: 1px solid #ececec;
+    background-color: #2a2a2a;
+    color: white;
+    border-radius: 12px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .expense-date__month {
+    font-size: 0.75rem;
+    font-weight: bold;
+  }
+
+  .expense-date__year {
+    font-size: 0.75rem;
+  }
+
+  .expense-date__day {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }

src/components/Expenses/ExpenseDate.jsx

@@ -0,0 +1,16 @@
+import './ExpenseDate.css'
+
+export default function ExpenseDate(props) {
+
+const month = props.date.toLocaleString("en-US", { month: "long" });
+const day = props.date.toLocaleString("en-US", { day: "2-digit" });
+const year = props.date.getFullYear();
+
+  return (
+    <div className='expense-date'>
+        <div className='expense-date__month'>{month}</div>
+        <div className='expense-date__day'>{day}</div>
+        <div className='expense-date__year'>{year}</div>
+      </div>
+  )
+}

src/components/Expenses/ExpenseFilter.css

@@ -0,0 +1,24 @@
+.expenses-filter {
+    color: white;
+    padding: 0 1rem;
+  }
+
+  .expenses-filter__control {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1rem 0;
+  }
+
+  .expenses-filter label {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  .expenses-filter select {
+    font: inherit;
+    padding: 0.5rem 3rem;
+    font-weight: bold;
+    border-radius: 6px;
+  }

src/components/Expenses/ExpenseFilter.jsx

@@ -0,0 +1,24 @@
+import "./ExpenseFilter.css";
+
+const ExpensesFilter = (props) => {
+	const dropdownChangeHandler = (event) => {
+		props.onChangeFilter(event.target.value);
+	};
+
+	return (
+		<div className="expenses-filter">
+			<div className="expenses-filter__control">
+				<label>Filter by year</label>
+				<select value={props.selected} onChange={dropdownChangeHandler}>
+                    <option value="2023">2023</option>
+					<option value="2022">2022</option>
+					<option value="2021">2021</option>
+					<option value="2020">2020</option>
+					<option value="2019">2019</option>
+				</select>
+			</div>
+		</div>
+	);
+};
+
+export default ExpensesFilter;

src/components/Expenses/ExpenseItem.css

@@ -0,0 +1,54 @@
+.expense-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+    margin: 1rem 0;
+    background-color: #4b4b4b;
+  }
+
+  .expense-item__description {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-end;
+    flex-flow: column-reverse;
+    justify-content: flex-start;
+    flex: 1;
+  }
+
+  .expense-item h2 {
+    color: #3a3a3a;
+    font-size: 1rem;
+    flex: 1;
+    margin: 0 1rem;
+    color: white;
+  }
+
+  .expense-item__price {
+    font-size: 1rem;
+    font-weight: bold;
+    color: white;
+    background-color: #40005d;
+    border: 1px solid white;
+    padding: 0.5rem;
+    border-radius: 12px;
+  }
+
+  @media (min-width: 580px) {
+    .expense-item__description {
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      flex: 1;
+    }
+
+    .expense-item__description h2 {
+      font-size: 1.25rem;
+    }
+
+    .expense-item__price {
+      font-size: 1.25rem;
+      padding: 0.5rem 1.5rem;
+    }
+  }

src/components/Expenses/ExpenseItem.jsx

@@ -0,0 +1,16 @@
+import Card from "../UI/Card";
+import ExpenseDate from "./ExpenseDate";
+import "./ExpenseItem.css";
+
+export default function ExpenseItem(props) {
+
+  return (
+    <Card className="expense-item">
+      <ExpenseDate date={props.date}/>
+      <div className="expense-item__description">
+        <h2>{props.title}</h2>
+        <div className="expense-item__price ">${props.amount}</div>
+      </div>
+    </Card>
+  );
+}

src/components/Expenses/Expenses.css

@@ -0,0 +1,7 @@
+.expenses {
+    padding: 1rem;
+    background-color: rgb(31, 31, 31);
+    margin: 2rem auto;
+    width: 50rem;
+    max-width: 95%;
+  }

src/components/Expenses/Expenses.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import Card from "../UI/Card";
+import ExpensesFilter from "./ExpenseFilter";
+
+import "./Expenses.css";
+import ExpensesChart from "./ExpensesChart";
+import ExpensesList from "./ExpensesList";
+
+export default function Expenses(props) {
+  const [filteredYear, setFilteredYear] = useState("2021");
+  const filterChangeHandler = (selectedYear) => {
+    setFilteredYear(selectedYear);
+  };
+  const filteredExpenses = props.item.filter((expense) => {
+    return expense.date.getFullYear().toString() === filteredYear;
+  });
+
+  return (
+    <li>
+      <Card className="expenses">
+        <ExpensesFilter
+          selected={filteredYear}
+          onChangeFilter={filterChangeHandler}
+        />
+        <ExpensesChart expenses={filteredExpenses}/>
+        <ExpensesList item={filteredExpenses} />
+      </Card>
+    </li>
+  );
+}