Inspiration
A pizza night for the weekend seems to be a tempting idea. After all, who doesn't like pizza? However, the aftermath pizza cleaning doesn't seem to be as nice as we often find ourselves strapped into the situation of whether or not put the pizza box into the recycle bin. Pizza box is made of carton, so it is recyclable, but the box is dirty, so does it make the pizza box unrecyclable? After being stuck in the situation for several times, we were determined to make our life easier. Throw it my way thus came in to help us decide which items are recyclable and how we can recycle them.
What it does
Throw it my way is a website that allows users to type in an object’s name into a search bar to find out if the item is recyclable and how we can recycle it. There is also a side bar on top of the page that includes several categories such as “About”, “Recycle”, and “Contact” to give users information about the importance of recycling, and the nearest recycling location from users’ location.
How we built it
We programmed the website using mainly HTML, CSS, JavaScript, jQuery, and JSON. HTML was used to create a basic frame for the website, then we used CSS to make the website layout prettier. JavaScript and jQuery were used to search through the database, which was a JSON file. The search function was implemented by first reading through the JSON file and store data in an array of objects. Then we compare user’s input and the title attribute of each object in the array. A for loop was used to go through every element in the array, and if the key word that users type in is found, the description (how to recycle the item) is displayed to the screen.
Challenges we ran into
We ran into several challenges since we didn’t have a lot of experiences with web development. The first challenge was finding an appropriate database and where to store the data. We planned to use Google Firebase to store the data but we had trouble in retrieving database from it. Eventually, we decided to store the data locally and use jQuery to retrieve it. Our second challenge was searching through the JSON file.
Accomplishments that we're proud of
We managed to finish the main part of the project, which is storing data, retrieving data, reading and finding users’ input, and displaying it on the screen. We were also able to have some design for the user interface.
What we learned
We learned more about JavaScript and we also learned some back-end development knowledge. Initially, we didn’t know anything about database but now, we gained some basic understandings of how back-end development works. We also learned more about CSS and Firebase.
What's next for Throw It My Way
In the future, we will use real time database instead of local database to update and change the data easier. We will also use Google Maps API to show users the nearest recycling location. In addition, we will improve our search function to make it search more accurate and improve user interface to make it prettier.
Log in or sign up for Devpost to join the conversation.