Superhero characters

Inspiration

When I saw the prompt I immediately thought about all the superhero movies I have watched. After brainstorming for a bit I wanted to build a website that has all the superheroes' plot events.

What it does

It shows the user superhero characters' comics, series, and major plot events. It even has a timeline for all the major plot events.

How we built it

I built the server using node.js and express.js. I used an API from https://developer.marvel.com/ to get the data for the superheroes. I used EJS to render the basic HTML before vanilla JavaScript renders the information on the client side.

Challenges we ran into

The hardest challenge was making the timeline update the click listeners after switching to a new state in JavaScript. I solved this by using the onClick attribute in HTML instead of an addEventListener JavaScript function so I could easily change the attribute without needing to change the event listener. Another problem was storing data between pages. I solved this using JavaScript's localstorage.

Accomplishments that we're proud of

I am proud of the loading screen as it contains CSS animations. I am also proud of making the website's UI look presentable.

What we learned

I learned authentication in APIs, data storage between pages, storing cache, and CSS animations.

What's next for Superhero characters

I will add more superheroes to the website. I will also make separate pages for the comics and series to have more space and information.

Built With

• api
• express.js
• javascript
• node.js
• sass