Webbdeveloper projects

Project:

A native JavaScript project that lasted 3 weeks. API fetchings, displaying data, saving data to local storage and showing that data at another page, forms, charts and responsive design. Only allowed to use HTML, CSS and JavaScript.

​

My idea:

I found a free API from a game called Final Fantasy XIV and decided I wanted to display mounts, how to get them and show in a chart how many players have it. I wanted to be able to like mounts and show more details about them on a second page.

​​

Work:

I created in HTML a form with different options for the user to pick what they want to look at and an area where each card will be displayed. In JS i created a fetch and function to insert HTML code for each card with its own unique information and image, i created unique ids for each like icon to be able to save the id from the card to local storage.

​

With the chart  I wanted it to show different colours depending on how rare it is so that it shows visual indication together with the procentage. I also made it so it only displays a specific amount of card and a button to show more items that get loaded in as extra if it's available to show more.

​

On my second page I wanted to display the cards that were liked and show more information. If the user picks to remove a like it will update both on the favourites page and the main page.

​​