In order to learn the sorcery that is CSS element positioning, I constructed a mostly-accurate map of my current workplace, complete with aisle numbers to help with navigation. With this already constructed, I realized that a To-Do List – re-imagined as a Shopping List – and merged with the store map – could be something incredibly beneficial to many shoppers and businesses. All that would need to be done is merge the two projects into one, and create a way to search the map using your list.
Because at the time I was not making use of any databases, I created a CSS file with the co-ordinates for almost 400 items on the map, and each item name would be labelled as a class name in the CSS file. Once the list item is clicked, the page creates a new element directly overtop of where the item is in the store by calling the CSS class of the item name on the list.
Of course, only having a desktop version of this wouldn’t work too well in a store environment where you would be using a mobile device, so when the project was made responsive, the look changes – when held up in portrait view on your phone, only the list itself appears, and once the button to find the item is clicked, the user would turn the phone to landscape view, where the page view would change from a list to a map – with the arrow directly above the item. Once the user finds the item, they merely rotate the phone back to portrait orientation, cross out the item off their list, and continue on.
As an additional functionality for businesses – the page makes suggestions for products to add to the list, which change based on seasonality, day of the week, and month of the year. The user can dismiss these suggestions, or add them directly to the list.
This project also differs from any tutorial as it builds out the list from an array, rather than creating an element with each list item directly in the HTML code. It was my first somewhat-big endeavor in the web development field. It could use some upgrades, but I’m very proud of this piece, and if you shop at the store this is modeled after, I hope you find it useful.