In this project I learned how to make you the administrator of
the Hogwarts student list of ’91.
With the magic of HTML, CSS, and a lot of JavaScript I
have mixed the perfect potion to give you the powers to expel
student or give them unique statuses. If you are feeling extra
rebellious you can look for the hidden mysterious button.
In this project we had to provide a UI to show a student list
with options such as filtering, sorting, and expelling students.
When clicking on a student additional information should be
shown in a popup window. In this view the user should be able to
make two students for each house prefect and pureblood students’
member of the inquisitorial squad. If a student can be given a
unique status a modal warning should appear.
To show
the students and their information we fetched the JSON data
using async function and API. If the user is feeling adventurous
a secret button can be found which initializes hacking of the
system. This inserts a student to the array and randomizes
student information which messes up the unique statuses.
Since this project had a lot of requirements, I had to visualize the code. To make it easier for myself I split the project up in 4 parts. For each part I either made a general or detailed activity diagram. With these activity diagrams I visualized the flow of the functions, which parameters to be passed on, the cleaning of the data, the different return values, and when to use functions with closure. Lastly, I drew the different scenarios with the modal warnings. This was very helpful for me when figuring out how to fetch two types of JSON data with async function and API.
To structure the layout and style the UI I used my skills in
CSS. To make the student list responsive I used Grid, Flexbox
and Media Queries for mobile, tablet and desktop sizes. When
designing the popup theme for each house I used conditional
statements and added colors to the elements in JavaScript.
When designing the Hogwarts crest, I simplified the
original one by removing smaller details and focusing on house
colors, shapes, and shadows of animals. The different house
crests are drawn in the same style but has a few extra minor
details. I also designed the search icon which consists of a
magnifying glass with a feather instead of a handle to make it
look as if it is hovering in the air.
The design of the prefect and inquisitorial squad badges are
based on the franchise and my own interpretation. I used
classical, extravagant, and dramatic shapes and details to make
it look almost antique and match the visual identity of
Hogwarts.
