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. Verify that the link to the recording works.

Also, deploy your project using Surge and include this link on your README.md. Verify that the link works.

Submit your code: https://classroom.github.com/a/kZhg4KNi

If you're having problems uploading to GitHub, please zip up your project and email it to the instructor and TA. Be sure to exclude the node_modules folder from your zip file. Please include the Zoom recording URL in the email. You can also zip up your project, put it in Google Drive or Dropbox, make the link sharable, and email that link to us.

Points will be deducted for the following:

1. Surge link is missing or doesn't work
2. Zoom link is missing or doesn't work
3. You push up node_modules to GitHub or include node_modules in your zip file if you submit it via email

You will get a 0 on the assignment if:

1. Code isn't pushed up to GitHub
2. Code is submitted after the deadline