total calc

src/BandForm.js

@@ -1,28 +1,69 @@
+import { useState, useRef } from 'react';
+
+const CentsInADollar = 100;
+const DefaultTotal = 0;
+
 function costToReadable(cost) {
-  const centsInADollar = 100;
-  return cost / centsInADollar;
+  return cost / CentsInADollar;
 }
 
 function BandForm({ band }) {
+  const formRef = useRef(null);
+  const [total, setTotal] = useState(DefaultTotal);
+  const [formIsPending, setFormIsPending] = useState(false);
+
+  function purchase(formData) {
+    console.log(formData);
+    setFormIsPending(true);
+  }
+
+  function ticketQuantityChanged() {
+    const formData = new FormData(formRef.current);
+    const ticketQuantities = formData.getAll('ticketQuantity');
+
+
+    setTotal(
+      ticketQuantities.reduce((total, quantity, index) => {
+        return total += (band.ticketTypes[index].cost * quantity);
+      }, 0)
+    )
+  }
+
   return (
-    <form className="form">
+    <form className="form" action={purchase} ref={formRef}>
       <h2>Select Tickets</h2>
 
-      {band.ticketTypes.map(({type, name, description, cost}) => (
+      {band.ticketTypes.map(({type, name, description, cost}, index) => (
         <div className="ticketWrapper" key={name}>
           <div className="ticket">
             <div className="ticketDetails">
-              <h3>{name}</h3>
+              <h3 id={name}>{name}</h3>
               <p>{description}</p>
               <h4>${costToReadable(cost)}</h4>
             </div>
             <div>
-              <input type="number" step="1" />
+              {/* TODO: describedby cost and description */}
+              <input
+                labelledby={name}
+                defaultValue="0"
+                name="ticketQuantity"
+                id={name}
+                type="number"
+                step="1"
+                onChange={ticketQuantityChanged}
+              />
             </div>
           </div>
           <hr />
         </div>
       ))}
+
+      <div className="total">
+        <h3>Total</h3>
+        <p>${costToReadable(total)}</p>
+      </div>
+
+      <button type="submit" disabled={formIsPending}>Get Tickets</button>
     </form>
   );
 }

src/index.css

@@ -84,4 +84,11 @@ h4 {
     flex-direction: column;
     gap: var(--spacing-md);
   }
+
+  .total {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: var(--font-lg);
+  }
 }