Kitchen Collection Manager with Filtering and Ratings

video1.0<iframe src="https://www.loom.com/embed/9323c246d83c41e5b46ee18f0945b3b9" frameborder="0" width="1728" height="1296" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>12961728Loomhttps://www.loom.com12961728https://cdn.loom.com/os/loom-media-content/loom/4603b977-1068-4b7d-ad00-ceece299230e/249408cd-b5df-4fc5-8a24-8c6efa8d74dc/sessions-thumbnails-9323c246d83c41e5b46ee18f0945b3b9-66946b2d4926caff.gif/binary?authToken=eyJraWQiOiJtaWNyb3MtZ3JvdXAvdGRwLW9zLWFyY2hldHlwZS9xOXVsZGNqYTRwbnE3Y2N1IiwiYWxnIjoiUlMyNTYifQ.eyJicyI6Imxvb20tbWVkaWEtY29udGVudCIsImF1ZCI6InRkcC1vcy1hcmNoZXR5cGUiLCJuYmYiOjE3OTM4MTYyMzAsInRpIjoiZmNkZTExMTQtOTZmOS00ZTMyLWE4YWEtNDVmZTQzZjc4ZGQ5IiwiYWRpIjoibG9vbS9sb29tIiwiaXNzIjoibWljcm9zLWdyb3VwL3RkcC1vcy1hcmNoZXR5cGUiLCJwaWQiOiJjYjkxYzljNi03MmM1LTRiNmEtYTNjNS03MzIwMDBkY2ExYjUiLCJ3YSI6ImZhbHNlIiwib2lkIjoic2Vzc2lvbnMtdGh1bWJuYWlscy05MzIzYzI0NmQ4M2M0MWU1YjQ2ZWUxOGYwOTQ1YjNiOS02Njk0NmIyZDQ5MjZjYWZmLmdpZiIsImV4cCI6MTc5MzgxNjgzMCwiaWF0IjoxNzkzODE2MjMwLCJqdGkiOiI0NmY2NTI3YS1mZjFjLTQ0YTItOTY3YS04NWU2NThjYjAyZDYifQ.hjgevRU8vyUrOaByn-AZ_AA-pCQ-46JCk_JnjC_zYP3p_8_-9SWVO8xzea5evXgG540725qdjiC6Q6USBnFiOn27Nhknw6CxdWD6M1DvDqvUS1f8eHUO_MV6cqj3SSW4niswZH45YjheGL_4J5Gb1L_36TaJA5tQ3svJuC_FcwtX8L2F53mTiNHTIU4vHxkejxBSepyjqRNfJKPvkc1M3nYFVhJU87eoIkyTfZlWFRfhQ9xBPJppy8iELNDT2stnE5ZGcAGoRBo-cqxYWoFpiX0wG29TrXl45DcB4nsH3yXUyX9X2HKriW2Nl7lec65OkUcY1lNKwJtHRYJsT64B1g&Expires=1793816831&Signature=SHsPGVkLAx7Oe-UT-dntl3QuPO1vvfxQy3i%7Ex3qEe%7EFo08Zn6RhOF5VP5oVTxn3V9iik84o3F5-oppbjpWzC96NBAiIa9ua4fH5MtIdQgR4yhj1Xhp2p2WdaTlBu1wJ8zLnJvi9lzsu2A2JywPLEeNZQM49abm%7E1CQcnqs%7EF%7EeP81-UWVJ7WGPaiqn0QU7D0VEM5jxc3nNLzwAotSI1VDHYyu5g0RvR4NGrRx4PDf36ouHR6HZsV7E9f5mir07B7ls2uec5r72HQIOsA3biHIRD5obmdcd15RvURmuUJgGjeMfrN1tFK7EHIsm4BzLWbLkiVmYyD5GxwbzjPKkIVTg__&Key-Pair-Id=KQOSYIR44AIC0709.107Kitchen Collection Manager with Filtering and RatingsThis Loom demonstrates a kitchen collection manager web app that helps users track groceries by filtering and dynamically adding and removing items. The presenter explains the HTML and JavaScript structure, including how item cards are created in JavaScript (not pre-rendered in HTML) and appended to the item grid using logic for the current location and type, with a VisibleItem approach. They also cover adding item functionality via a form with validation, including restricting stock to whole numbers and price to two decimal places, and handling optional images. Finally, they implement a “wife approval factor” rating input (1 to 5 stars) with a default of 5 and render the star count in each item card.