From 536716102587eba66634efaa7ef2e5c9658de10f Mon Sep 17 00:00:00 2001
From: keriarmstrong <khetto@live.com>
Date: Wed, 1 Feb 2023 21:03:12 -0500
Subject: [PATCH] completed Lab-React-Props

---
 src/App.js                        |  9 +++++---
 src/Components/DonationForm.js    | 35 +++++++++++++++++++++++++++++--
 src/Components/Progress.js        | 20 ++++++++++++++++--
 src/Components/RecentDonations.js | 16 ++++++++++++--
 src/Components/TopBar.js          |  1 +
 5 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index e7258b7..229a4a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,9 @@
 import React from "react";
 import TopBar from "./Components/TopBar";
 import "./App.css";
+import DonationForm from "./Components/DonationForm";
+import Progress from "./Components/Progress";
+import RecentDonations from "./Components/RecentDonations";
 
 const targetAmount = 1000;
 const donations = [
@@ -41,10 +44,10 @@ function App() {
     <>
       <TopBar />
       <main className="container">
-        <section className="sidebar">{/* Recent Donations */}</section>
+        <section className="sidebar">{<RecentDonations donations={donations}/>}</section>
         <section className="">
-          {/* Progress */}
-          {/* Donation Form */}
+          <Progress donations={donations} targetAmount={targetAmount}/>
+          <DonationForm donations={donations}/>
         </section>
       </main>
     </>
diff --git a/src/Components/DonationForm.js b/src/Components/DonationForm.js
index 7504746..9fca94d 100644
--- a/src/Components/DonationForm.js
+++ b/src/Components/DonationForm.js
@@ -1,3 +1,34 @@
-export default function DonationForm() {
-  return null;
+ 
+export default function DonationForm(props) {
+
+  return (
+
+    <section className="donation">
+  <h3>You could be donation <span class="secondary">#{props.donations.length+1}!</span></h3>
+  <form>
+    <label htmlFor="name"
+      >Name<input
+        id="name"
+        name="name"
+        type="text"
+        placeholder="Your name..." /></label>
+        <label htmlFor="caption"
+      >Caption<input
+        id="caption"
+        name="caption"
+        type="text"
+        placeholder="Add a brief message..." /></label>
+        <label htmlFor="amount"
+      >Amount<input
+        id="amount"
+        name="amount"
+        type="number"
+        placeholder="0" /></label>
+        <button>Donate!</button>
+  </form>
+</section>
+
+
+)
 }
+
diff --git a/src/Components/Progress.js b/src/Components/Progress.js
index 7476709..6075a8e 100644
--- a/src/Components/Progress.js
+++ b/src/Components/Progress.js
@@ -1,3 +1,19 @@
-export default function Progress() {
-  return null;
+export default function Progress(props) {
+  let amount = 0
+  // let donations= props.donations
+    
+  // for (let i=0; i< props.donations.length; i++) {
+  //   amount += props.donations[i].amount
+  // }
+  props.donations.forEach(donation => {
+    amount += donation.amount
+  })
+  return (
+    <section className="progress">
+  <h2>
+    Raised <span className="secondary">${amount}</span> of <span className="secondary">${props.targetAmount}</span>
+  </h2>
+</section>
+   
+  )
 }
diff --git a/src/Components/RecentDonations.js b/src/Components/RecentDonations.js
index 7d74bf6..ff356ed 100644
--- a/src/Components/RecentDonations.js
+++ b/src/Components/RecentDonations.js
@@ -1,3 +1,15 @@
-export default function RecentDonations() {
-  return null;
+export default function RecentDonations(props) {
+  
+  const listItem = props.donations.map(donation =>{
+    return(
+      <li><span>{donation.name} ${donation.amount}</span>{donation.caption}.</li>
+    )
+  })
+  return (
+  <section>
+    <h2>Recent Donations</h2>
+    <ul>
+     {listItem}
+    </ul>
+  </section>)
 }
diff --git a/src/Components/TopBar.js b/src/Components/TopBar.js
index 8272c37..e61e6a1 100644
--- a/src/Components/TopBar.js
+++ b/src/Components/TopBar.js
@@ -6,5 +6,6 @@ export default function TopBar() {
       </h1>
       <p>Help me go on a vacation to a beach somewhere!</p>
     </header>
+    
   );
 }