personal info form

src/BandForm.js

@@ -1,28 +1,96 @@
+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 aria-live="polite">${costToReadable(total)}</p>
+      </div>
+
+      <div className="information">
+        <div className="form-row">
+          <input
+            name="first_name"
+            label="First Name"
+            placeholder="First Name"
+            type="text"
+          />
+          <input
+            name="last_name"
+            label="Last Name"
+            placeholder="Last Name"
+            type="text"
+          />
+        </div>
+        <input
+          name="address"
+          label="Address"
+          placeholder="Address"
+          type="text"
+        />
+      </div>
+
+      <fieldset className="payment">
+        <legend>Payment Details</legend>
+      </fieldset>
+
+      <button type="submit" disabled={formIsPending}>Get Tickets</button>
     </form>
   );
 }

src/index.css

@@ -1,6 +1,10 @@
 @import "./reset.css";
 @import "./variables.css";
 
+* {
+  box-sizing: border-box;
+}
+
 html {
   color: var(--color-text);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -12,6 +16,12 @@ html {
   font-size: var(--font-base);
 }
 
+input {
+  width: 100%;
+  padding: 1rem;
+  font-size: var(--font-base);
+}
+
 hr {
   border-color: var(--color-text);
   border-width: 1px;
@@ -84,4 +94,23 @@ h4 {
     flex-direction: column;
     gap: var(--spacing-md);
   }
+
+  .total {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: var(--font-lg);
+  }
+
+  .form-row {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-md);
+  }
+
+  .information, .payment {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
 }