Week 4 Assignment

Create the Folder and Files

Create the folder /app/week-4 and create files page.tsx and new-item.tsx inside it.

Edit page.tsx to be a Next.js page component that renders the NewItem component.

Setup NewItem Component

• Add the "use client" directive to the top of the file.
• Import the useState hook from React.

Initialize State Variables

Name Field

• Use the useState hook to create a state variable called name and a setter function called setName.
• The initial value of name should be an empty string (""), indicating that the name field is initially blank.

Quantity Field

• Use the useState hook to create a state variable called quantity and a setter function called setQuantity.
• The initial value of quantity should be 1, indicating that the quantity field is initially set to 1.

Category Field

• Use the useState hook to create a state variable called category and a setter function called setCategory.
• The initial value of category should be "produce", indicating that the category field is initially set to "Produce".

Create a Form Submission Handler

Create a handleSubmit function. This function should:

• Prevent the form's default submission behavior.
• Create an item object with the current values of name, quantity, and category.
• Log the item object to the console.
• Display an alert with the current state of name, quantity, and category.
• Reset the state variables to their initial values.

Render the Component

In the return statement of your function, create a form that includes:

Name Field

• Create an input field of type text.
• The value of the input field should be tied to the name state variable, meaning that it displays the current value of name.
• Use the setName function in an onChange event handler to update the state of name as the user types into the field.
• Add required attribute to the input field to ensure that the user cannot submit the form without providing a name.

Quantity Field

• Create an input field of type number.
• Set the min attribute to "1" and the max attribute to "99" to limit the range of valid quantities.
• The value of the input field should be tied to the quantity state variable.
• Use the setQuantity function in an onChange event handler to update the state of quantity as the user types into the field. Make sure to convert the input to a Number before setting the state.
• Add required attribute to the input field to ensure that the user cannot submit the form without providing a quantity.

Category Field

• Create a select element for the category.
• The value of the select element should be tied to the category state variable.
• Use the setCategory function in an onChange event handler to update the state of category as the user selects a different option.
• Create various option elements within the select for each possible category ("Produce", "Dairy", "Bakery", "Meat", "Frozen Foods", "Canned Goods", "Dry Goods", "Beverages", "Snacks", "Household", "Other"). Each option should have a value that matches the category it represents.

Submit Button

• Create a submit button that triggers the handleSubmit function when clicked.

Style the Component

Style the component using Tailwind CSS. You do not need to match the example output, but your component should be styled in a way that is visually appealing and easy to use.

Implement Advanced Validation Logic

To make the form more robust and user-friendly, add a manual validation layer that provides immediate feedback.

Create Validation State

Add a new state variable to track if the user has interacted with the name field (often called a "touched" state). This prevents error messages from showing up before the user even starts typing.

• Create a state variable nameTouched and a setter setNameTouched, initialized to false.

Update the Name Field Input

Modify your Name input field to trigger the "touched" state and apply conditional styling:

• Add an onBlur event handler that sets setNameTouched(true) when the user clicks out of the field.
• Use a template literal for the className to change the border color to red if name is empty and nameTouched is true.

Add Conditional Error Message

Add a logic-based message below the Name input:

• Render a <p> tag with a red text color (e.g., text-red-500) that only appears if the name is empty and nameTouched is true.

Strengthen the Submission Handler

Update your handleSubmit function to ensure no invalid data is processed:

• Before creating the item object, add a check: if (!name || name.length < 2).
• If the check fails, prevent the rest of the function from running (e.g., using return;) and notify the user via a specific error message.

Disable the Submit Button

Improve the User Experience (UX) by preventing clicks on invalid forms:

• Add the disabled attribute to your submit button.
• The button should be disabled if name is empty or if the form is otherwise incomplete.
• Use Tailwind classes like disabled:bg-gray-400 and disabled:cursor-not-allowed to visually indicate the button is inactive.

Test Your Component

Ensure that when the form is filled and submitted, an alert is displayed with the correct information and the form fields are reset.