H4S-FRIDGE-FRAMEWORK

FAST FRIDGE FRAMEWORK - Team 8/ATE!! Themes: sustainability and revamping your life.

// Prevents food waste, helps you keep track of items in your fridge and items you need to restock up on. You can add items to the fridge, set expiry dates, and remove them. You can also add items not currently in your fridge to a shopping list, which is interactive, so you can dynamically add, check off and remove items. There is also a calendar (not fully set up) that shows when items are expiring and when you are likely to restock on items (consumption rate theory). There is also a fact sheet about food waste and how it can be prevented.

To say that this project has been a learning curve would be an understatement. Out of our group, the most experience anyone had was making a function in JavaScript to add two numbers together, and the least experience anyone had was absolutely no prior experience doing HTML, CSS or JavaScript! Therefore, we split roles fairly - the person with the most experience focused more on the algorithms behind our website, and the person with the least experience focused on learning key skills, producing an amazing basic web page in HTML and CSS, after learning these skills in the Web Development Workshop. The person with some experience in web development, but no JavaScript focused on styling and making our website really come together.

Originally, we were going to build Fast Fridge Framework with Tkinter in Python. However, we wanted it to be more accessible (i.e. from a range of devices) and more aesthetically pleasing. We decided to use HTML, CSS and JavaScript to make the layout clearer for users, as styling with these languages is much easier and faster than with Tkinter, despite all of us not having much experience at all.

We think our problem is very understandable, and relatable to everyone (with a fridge)! Keeping track of items in the fridge and their expiry dates means that food is less likely to be wasted, which is a massive problem currently (read our fact sheet for more information!). It also makes life much easier for the stakeholder, as they will no longer struggle with overbuying groceries and having them go to waste, or with not having enough groceries. We also have many additional features, like the shopping list, which can be accessed on your mobile device and taken to the supermarket with you. Items can be added, checked off, and deleted. This list is currently not saved when the website is exited, but we can easily add to this in the future.

When accessing the fridge, the contents are first checked. An alert will appear if the fridge is empty, telling the user to restock. Items are successfully added (these items are added to an array, which is then written into a placeholder paragraph with getElementById). Originally, we used a parent paragraph and added items as children to the paragraph, but once this function is exited, can only add and not delete existing children (i.e. when switching between the adding function and the removing function). Additionally, JavaScript does not allow for 2d arrays, so in order to be able to connect items to their expiry dates, we used different arrays linked with their indexes. This is not the best method, so in the future, we would make an array of arrays. To test this works, we did thorough testing against different inputs, ensuring the program does not crash if an invalid input is entered. For example, erroneous data types would be white space (alerts "you haven't entered anything") and a variety of different expiry dates were tested (in the past, the present and the future). Again, the fridge's items and dates do not save after exiting, but we could easily add to this in the future.

Another function not currently set up is an 'items expiring' button, which opens up a modal to display items expiring within the next 7 days. In the future, we would move this to the main page and show items expiring today/tomorrow for easier access. We would also allow the user to add quantities of products, also calculating average consumption rates of different products. We would write an algorithm to track how fast an item is consumed, e.g. milk, and constantly be calculating when you're likely to need to restock. If this item was a new item, it would either use a default value (e.g. food/drink would be categorised, like liquids in general).

We faced many challenges when merging branches, due to one person styling unordered lists one way, and the other styling them a different way. We overcame this by adding individual IDs to different elements.

Additionally, we faced many challenges with basic commands, due to simply not knowing that they existed. We tried many complex methods (especially when writing algorithms in JavaScript), before eventually discovering a much simpler method. After many hours of team calls (we're now all gr8 team8s (great teammates (team ates))), we found our ideal ways to work collaboratively, despite time zones (Sun A is from Korea) and successfully made Fast Fridge Framework a project we're very proud of.

Built With

Share this project:

Updates