Start by accepting the assignment at https://classroom.github.com/a/KHKILnNf and cloning the repository. This is a React application created with Create React App. Next, cd into your project run npm install. You can now start it with npm start.

In this assignment, you will build this t-shirt order form: https://t-shirt-order-form.surge.sh.

Requirements

1. When the form is submitted, hide the form and display a confirmation message with all of the data that was submitted. Feel free to format the submitted data however you'd like.
2. If the terms and conditions checkbox is checked, you'll see a message in green. If it isn't checked, you'll see a message in red.
3. A Reset button. This should reset the entire form to the default state. Don't use <button type="reset"> or <input type="reset"> for this. Instead, add an onClick handler to a button that changes all of the state properties back to the initial values.
4. For accessibility, every form control must have a <label>. Clicking on a label should put focus on the corresponding form control.
5. All form controls must be controlled components.
6. Implement at least two of the following reusable components for form controls

<Select
  label="Size"
  value={size}
  options={[
    { value: "", label: "--Select Size--" },
    { value: "small", label: "Small" },
    { value: "medium", label: "Medium" },
    { value: "large", label: "Large" },
  ]}
  onChange={(updatedSize) => {
    setSize(updatedSize);
  }}
/>

<RadioButtons
  name="sleeve-length"
  options={[
    { value: "long", label: "Long" },
    { value: "short", label: "Short" },
    { value: "sleeveless", label: "Sleeveless" },
  ]}
  value={sleeveLength}
  onChange={(updatedSleeveLength) => {
    setSleeveLength(updatedSleeveLength);
  }}
/>

<Checkbox
  id="terms"
  label="I accept terms & conditions"
  checked={isTermsChecked}
  onChange={(updatedIsTermsChecked) => {
    setIsTermsChecked(updatedIsTermsChecked);
  }}
/>

<Textarea
  label="Comments"
  id="comments"
  rows="3"
  value={comment}
  onChange={(updatedComment) => {
    setComment(updatedComment);
  }}
/>

Other Requirements

1. You are not allowed to use any libraries. Your implementation should only use React and optionally Bootstrap.
2. Your implementation must only use the techniques, patterns, and concepts that we covered in class.
3. Your implementation should not have any direct DOM manipulation or have any references to document or window. All rendering should be done by React via state changes.
4. There shouldn't be any console warnings or errors when running locally or when deployed to Surge.

Submission

Create a video with audio using Zoom where you demo your assignment and explain where you fulfilled or did not fulfill each requirement. Put a link to this recording in the README.md file at the root of your project.

Also, deploy your project using Surge and include this link on your README.md.

Make a commit and push up all your changes. Visit your repo in the browser and verify all of your changes were pushed to GitHub.