We have seen many students at UWaterloo create tools to make their lives easier, and as future students, we also wanted to contribute. As future students, one of our sources of stress is heading into a new environment without knowing where amenities are, so we decided to create Where Is Loo, to show others where washrooms are in all the school buildings, as well as display comments regarding the quality and issues of the washroom.

What it does

WhereIsLoo displays the location of washrooms in each building, including which type of washrooms are available, e.g. accessible, unisex... etc.

How we built it

We used HTML, CSS, and Javascript, as well as Autodesk Fusion 360 to create the images.

Challenges we ran into

We wanted to create an interactive map, however, we found that the buttons that are supposed to be positioned on specific buildings shifted with dimensions of the screen, and resulted in buttons not positioned on the correct building. To solve this, we attempted several different methods, including using Javascript to find screen dimensions, using css positioning functions... etc. Eventually, we found that by using in html instead of putting it as a background image, the buttons will remain on the current buildings.

Accomplishments that we're proud of

We are proud of the web design element of the website, the color scheme, as well as the buttons which are placed on the specific buildings.

What we learned

We have learned the basics of Autodesk Fusion 360, which was interesting to use, and we hope to use it in the future for Hackathons and class projects. We also learned more about web design, and in examining other websites with interactive maps, we hope to learn from them and improve our techniques in the future.

What's next for WhereIsLoo?

First, we hope to expand the map to include the entire campus, and to provide directions based on the shortest route. We also hope to implement a fully functional comment and rating system using PHP and SQL. Finally, learning from other websites, we want to turn this page into an animated interactive map.

Share this project: