Interactive Culver's Menu

As an individual project for a web design class, I was tasked with creating an interactive Culver's menu that would be displayed in a browser. The users should be able to search for foods by entering the food name in the search bar, using the drop down box to search for a food type, and filter all the foods by allergens. The actions the users have should update the web browser in real time and not have the user do anything else manually. Given a JavaScript file that contained all the information, the information must be taken from that file and cards had to be created for each individual menu item that displays the name of the food, the food type, and list the allergens within the food. We were given two weeks to complete this project. One major challenge that I had to overcome was learning React.JS, which is a key component of this project, at the same time as coding this project. It was difficult to learn and program a coding element simultaneously. 

​

​

​

The project worked as intended and all its functionality was present and working. The organization within the code was very neat and clean. React.JS allows for elements to fit inside one another. The menu grid, that holds all the cards, holds references to the individual cards within the grid. The cards then hold references to the JavaScript file that contains all the information. This type of organization allowed for easy to read code that was very effective. Each class was not more than 100 lines of code, which allows for easily readability and quick corrections within the code. 

The project was a new way to use HTML, CSS and JavaScript to create a program that did not use HTML elements and JavaScript in a way that was familiar. The functionality in this program was nested into the HTML and React elements rather than in methods or classes as other projects involving JavaScript have. Learning React.JS syntax helped to understand how JavaScript and HTML elements can work in an alternative but effective way.

Learning React.JS is extremely helpful for backend website creation. Using React.JS allows for user interactions on a website to be seamless and very fluid. Using React.JS in future website projects would allow myself the freedom and creativity to create backend functionalities alongside front end design that I have learned.