src/BandForm.js

@@ -1,96 +1,28 @@
-import { useState, useRef } from 'react';
-
-const CentsInADollar = 100;
-const DefaultTotal = 0;
-
 function costToReadable(cost) {
-  return cost / CentsInADollar;
+  const centsInADollar = 100;
+  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" action={purchase} ref={formRef}>
+    <form className="form">
       <h2>Select Tickets</h2>
 
-      {band.ticketTypes.map(({type, name, description, cost}, index) => (
+      {band.ticketTypes.map(({type, name, description, cost}) => (
         <div className="ticketWrapper" key={name}>
           <div className="ticket">
             <div className="ticketDetails">
-              <h3 id={name}>{name}</h3>
+              <h3>{name}</h3>
               <p>{description}</p>
               <h4>${costToReadable(cost)}</h4>
             </div>
             <div>
-              {/* TODO: describedby cost and description */}
-              <input
-                labelledby={name}
-                defaultValue="0"
-                name="ticketQuantity"
-                id={name}
-                type="number"
-                step="1"
-                onChange={ticketQuantityChanged}
-              />
+              <input type="number" step="1" />
             </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,10 +1,6 @@
 @import "./reset.css";
 @import "./variables.css";
 
-* {
-  box-sizing: border-box;
-}
-
 html {
   color: var(--color-text);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -16,12 +12,6 @@ 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;
@@ -94,23 +84,4 @@ 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);
-  }
 }