Whether it's you very first day at a new school or you're a lost parent during back to school night, Mapped has got your back. As our ideas orbited the hemispheres of our brains during the first ten hours, we were indecisive about potential applications since some were impossible to accomplish due to our limited programming experience and the inability to craft a project that could be used practically. As we lost each other in the masses of the hackathon, we remembered the days as freshmen in our high school and how intimidating and perplexing the layout of the school was. We then realized that we should create a web application that would guide people throughout our school to provide a visual presentation that they could interaction with.

How it works

We created a map of EVHS using JavaScript and stored the class numbers and their corresponding coordinates in arrays in an object which we used to convert the room numbers that the user inputted to coordinates (using a form- HTML). We then drew colored boxes on those coordinates! (Try putting in "small gym" or "P100" in case you don't know any room numbers)

Challenges I ran into

Throughout the hacking process, we encountered a myriad of complications. We learned to create graphics by using KhanAcademy but were unsure how to use this code on our web app (with the help of a mentor, we learned we had to download p5.js). We also were not sure how to get our program to connect room numbers with the coordinates on our map without doing a lengthy if else statement (a mentor was able to help us again).

Accomplishments that I'm proud of

Not a single person on our team had coded in html/css before yesterday! We all started learning JavaScript a week ago. I'm proud that our team learned so much in so little time through experimenting and the help of a mentor.

What I learned

I learned HTML and JavaScript and how the two were able to work together to create a website, as well as how to use Brackets and p5.js.

What's next for EVHS Interactive Campus Map

We hope to make the layout look a little nicer and perhaps add a 3d view to make it even easier to locate classes!


Built With

Share this project: