Hacked
Hogwarts

a mock up of a laptop displaying a webpage

Outline

An administration system for a very famous school. Written in Vanilla Javascript the purpose of this project was to take two very minimal Json files and create an application which handles the data to create a list of students attending the school. The administrator can then sort the students by first or last name, filter the list by student house or search for a student by text input. They can also click on any students name to reveal a pop-up window with more details on each student and the option to move the student to an expelled list. There are some rules to follow and some warning signs to stop the school administrator from making any mistakes. But beware of the hacker!

Details

Student Info

Each student has their own dynamic pop-up window responsive to tablet and mobile view. The pop-up displays a crest and background colour associated with their school house, and gives the user options to expel the student or add them to an inquisitor squad, but only if they are the right kind of student.

Triggered Warnings

To keep the school administrator on the right path, there are a number of warning triggers that pop up to give user feedback. Only two prefects can be appointed to each house and only certain students can be added to the inquisitor squad.

Sort and filter

The main focus of this project is writing functioning code for a positive user experience. The system fetches data from two Json files and uses functions to filter and sort the student list and populate the student info pop-up window.