Inspiration

This is my first Hackathon, so I wanted a project that was interesting, but attainable!

When people go out to eat, they generally check Yelp or Google Reviews first. But do they check to see if a restaurant has passed recent food inspections? Generally, no. Though the data is publicly available, it's not convenient to look up. I wanted to create a simple web interface that would allow a user to search for potentially unsafe restaurants in their area.

Along the way, I was appalled by some of the violations reported in the data! Examples include:

"observed live rodent in the basement area which was sitting on top of a stair"

"found approximately 4 live roaches in front food prep area"

"observed black mold-like substance inside ice machine dripping into ice"

"observed evidence of rodents through approximately 13 rat droppings on greasy floor behind front service counter"

Gross! This kind of information shouldn't be kept under wraps. It's time someone ratted these guys out.

(Yes, pun intended...)

What it does

Simple: users enter a Chicago ZIP code and the site will query the Chicago Data Portal and return a list of restaurants that failed a 2017 food inspection. Users can click on the restaurant name to see detailed comments recorded by the health inspector.

How I built it

Three files: one HTML file, one CSS file, and one JavaScript file. I used Sublime as my text editor and worked with the Chicago Data Portal API to obtain and filter food inspection data.

Challenges I ran into

Toggling the specific violation data (hidden to visible and vice versa) was a bit tricky since I was using a variable inside an anonymous function that was bound to a variable outside of the function. At one point, I was toggling off all of the text on the page!

Accomplishments that I'm proud of

This was my first time using JavaScript and jQuery. It was more difficult than I thought it would be! It was also one of the first times I've built a webpage with HTML and CSS.

What I learned

I learned how to access information from the Chicago Data Portal via JSON and display it in a webpage. That was another first--the Chicago Data Portal's API is very user-friendly and their documentation was pretty helpful.

What's next for Chicago Restaurant Watch

I'd like to alphabetize the list, make the page more responsive, and also add the ability to search by restaurant name or address. I'm also considering using Google's map API to present the data. That said, I want to keep the page clean, simple, and easy to use--there are other interfaces out there that offer a more complex look at the data if users want that!

Share this project:

Updates