frood project showcase

The What

Frood is the first project I had build with web development technologies. It uses only front end technologies which are HTML, CSS and JavaScript.

The website is the online ordering system for a fictional fast food company named Frood. It requires the user to enter their delivery address as an initial step so that they may proceed onto the next screen. This address is then stored into the local storage and is later called upon by an API which marks the delivery address onto a map.

Once a user has entered their address, they are able to browse through the menu and add items to their basket. Once they are ready, they are able to proceed to the next page where they can amend their delivery address, edit their basket, go back to menu or submit their order.

what image
why image

The Why

I had just finished an online course on HTML, CSS and JavaScript and so I wanted to build a site to practice what I had learnt.

I intentionally refrained from using Bootstrap or any other libraries as it was important for me to understand and practice writing my own styling as supposed to using libraries as a crutch.

In addition, as this site includes a lot of buttons with a number of functions, I had to utilise a lot of JavaScript. Rather than setting just pop ups or single level loops, this project required me to work with a multitude of conditions which made it more challenging.

The How

Research

Front end revolves around the user and so I wanted to ensure that my site would be user-friendly and would be familiar. I therefore researched the popular JustEat site to gain a better understanding of how a user expects to interact with a website.

JavaScript

The website uses a lot of JavaScript, especially for the interaction between the menu and basket page where between the two pages, there are 4 scripts that serve different purposes.

Below is a table with the JavaScript files written in this project and each of their purpose along with a link to the code.

why image
File Purpose
index.js This script serves two main purposes.

The first of which is that it sets the size of the overlay where the user needs to enter their address. The script ensures that the size of the overlay is equal to the size of the top container. This meant that I did not have to write media queries for every possible height of the top-container.

The second purpose of the script is to stop the user progressing onto the next page unless they have at least completed the first line of address and the postcode.
menu.js This file contains all the menu items.
populateMenu.js This script files feeds the html content for the menu page by first populating the options for the sidebar (categories) and then by populating the actual menu.
addToBasket.js This first part of the script runs when the window is loaded.

When the window loads, the system will check if there is any data stored in local storage for the current total and basket items. Stored data will be loaded onto the basket. This is used for when the user chooses to come back to the menu from the basket page so that the data is not lost.

The second part of the script runs whenever a user tries to interact with the plus button on any of the menu items.

If the item is of a pizza category, it will show an overlay and will require the user to select the size and allow them to add any extras.

If the item is not of a pizza category but does require some additional option to be selected (e.g: ice-cream flavour) then it will display an overlay and require the user to select an option.

Finally, once the user has selected any options and has added the item to the basket, the item will appear in the basket and the price will update accordingly.
removeFromBasket.js The script runs whenever either a pizza topping or a entire menu item is removed from the basket. When this occurs, it updates the total accordingly as well as deleting the element from the parent element.
basket.js The script runs on the basket page where when the window loads it retrieves the menu content and total price to add to the basket element. It also retrieves the address entered in the homepage and passes this to the map API. This generates the map using the user's delivery address.

As the removeFromBasket.js script is also running on this page allowing users to remove items from their basket, the local storage does need to be updated should the user wish to go back to the menu page. The script therefore updates the current total and menu items when the user goes back to the menu page.
address.js The script runs if the user chooses to change the delivery address. If there is sufficient information for the API to run, it will generate a new map, otherwise it will display the new address as text and will hide the map element.