Users need to be able to add items to their shopping lists. To do this, the AddItem view should present them with a form that allows them to enter two things:
The name of the item, and
An estimate of when they think they’ll need to buy the item again.
[x] The ManageList view displays a form that allows them to enter the name of the item and select how soon they anticipate needing to buy it again. There should be 3 choices for this:
“Soon”, corresponding to 7 days
“Kind of soon”, corresponding to 14 days
“Not soon”, corresponding to 30 days
[x] The input that accepts the name of the item has a semantic label element associated with it
[x] The user can submit this form with both the mouse and the Enter key
[x] When the user submits the form, they see a message indicating that the item either was or was not saved to the database.
Data-related tasks:
[x] The console.log in the addItem function in src/api/firebase.js is replaced with a function that adds the new document to the Firestore database. That function will be imported from the firebase/firestore module.
[x] The user’s soon/not soon/kind of soon choice is used to calculate nextPurchasedDate
Notes
When this feature is implemented correctly, new items will automatically show up in the list view because streamListItem gets new data from Firestore every time there’s a change.
You will know your <label> is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on <label> for more info.
Users will be able to submit the form with the Enter key if you listen for the right JavaScript event on the right element! If you're adding an onKeyDown listener anywhere, you might be overcomplicating things.
The add item form has the potential to be a lot of scope. Stick to the Acceptance Criteria.
Summary
Users need to be able to add items to their shopping lists. To do this, the
AddItemview should present them with a form that allows them to enter two things:The README file for the shopping list API will be helpful as you work on this feature.
Acceptance criteria
UI-related tasks:
ManageListview displays a form that allows them to enter the name of the item and select how soon they anticipate needing to buy it again. There should be 3 choices for this:labelelement associated with itEnterkeyData-related tasks:
console.login theaddItemfunction insrc/api/firebase.jsis replaced with a function that adds the new document to the Firestore database. That function will be imported from thefirebase/firestoremodule.nextPurchasedDateNotes
streamListItemgets new data from Firestore every time there’s a change.<label>is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on<label>for more info.Enterkey if you listen for the right JavaScript event on the right element! If you're adding anonKeyDownlistener anywhere, you might be overcomplicating things.