-
-
Home Page
-
Resources Page - this page tells you where you can donate and get updates on your area
-
Hurricane Page - information about the impact that it has had on people and how to prepare for it
-
COVID Page - information about the impact of COVID and ways to prevent contracting it.
-
Storm Page - information about the impact of storms and how to prepare for them
-
Submit Page - this is where you'll post what you need and what you're willing to give.
-
Post Page - users will be able to find people that need an item or are able to give them the item that they need.
-
Javascript code - it creates a new entry for a person who wants to give or needs an item
-
JSON code - holds the data that the user submits.
-
HTML code - this includes the code for the navigation bar and home page
-
CSS code
Inspiration
Our inspiration for our website was Covid-19 since we noticed that a lot of necessities were going out of stock quickly. We wanted to create a website which helps locals look for food and resources within their communities to reduce the scarcity.
What it does
Our website has 3 pages that inform people how people were affected and how they can prepare for certain natural disasters like hurricanes, storms, and the pandemic we are currently enduring. We also have a page where you can submit a trade. How that works is you fill out a google form with the item that you need and the item you are willing to trade. After you submit, you can go to the find trade tab, and you can see if anyone has what you need. All you have to do is contact someone once they have the item you are looking for.
How we built it
We used glitch as the editor. In order to create the web pages, we first created a base html index page that we would be able to work off of. For example, the skeleton of the html page that we used consisted of the header (Trade Texas) and the navigation bar. We eventually started building the Resources, Hurricane, COVID, and Storm pages. During this process, we also added the CSS and created a blue hue color scheme. After that, we wrote code for javascript that would take JSON data and output in an assigned html file. For this, we used sample JSON data (with inspiration from the BabySitters Club). We made a google form and linked it to a google spreadsheet. Then, we used google api to convert the google spreadsheet data to a json data format. We were able to moderate, retrieve, and input the JSON data into the JSON file to update the html website.
Challenges we ran into
We ran into challenges with the css since sometimes we would type it in, but it would not always work so we would have to figure out if we did something wrong before that. Initially, we were planning on web scraping. local stores to analyze if there were specific items available. Then, we ran into the ethics of web scraping, so we decided to web scrape a weather website with non-commercial use data. However, we ran into the issue of copy-right, and we decided not to use web scraping all together because of all of the possible issues that could be encountered during the process. While not using web scraping and altering our idea to something completely different was difficult, we were able to avoid possible dangerous challenges.
Accomplishments that we're proud of
We are proud that we were able to figure out how to create JSON data from google sheets using Google API. We are also proud that we were able to figure out how to use class in css correctly to differentiate the different links as we needed to change color. While it may seem like a small task, it was a great deal for us because we were consistently failing. However, we were able to resolve this problem and were ecstatic to find out that our code was doing what we wanted it to do.
What we learned
We learned how to use multiple languages to create one product. An example of this would be using Google API to convert the google spreadsheet to JSON data. Another example of this would be using Javascript to output the JSON data on the html page. We also broadened our understanding of scarcity of food and resources in our communities.
What's next for Trade Texas
We want to expand our website to different states since we want to be able to help more communities. We would also like to eventually start fundraising, and be able serve more people’s needs on this website. Additionally, we would expand to becoming a phone app using Android Studio as we think that an app would be useful in terms of usability on mobile devices (for mobility).
Log in or sign up for Devpost to join the conversation.