Webbdeveloper projects
Handful of project i have created for school
Profil Pilen -
JavaScript with Framework
Project:
The project was for JavaScript with framework where I needed to make a Vite- and Vue project where I needed to make Cypress / Cucumber tests, Axios fetching with API with minimum 10 keys, a single page application with Vue-Router, Options API and Composition API to mention some. The project lasted around 3 weeks.
My idea:
I wanted to use an API that randomized information about people and make some sort of search and look where people live and get a map on their position. I wanted it to be a bit fun with being able to send the person “gifts”. I decided to make it in Swedish.
Work:
We got a base structure to start working from, I cleansed out of components that i wasnt gonna use. With my API I used a specific seed since I didn't want to keep getting random people every time and the fetching in start was quite slow and when going into a profile it needed to fetch again. So I started to use Pinia and did my fetch there which made the need of loading screens much less.
I made the starting page displaying name, birthday and country, and with a country flag that gets a link from Flagpedia to that specific country code. I made it able to search by name and birthday.
In the individual profile pages I made so id displays more information about the person, contact information and where the person lives. I used the Latitude and Longitude to get a map from Leaflet, since the coordinates are random most people ended up being in the water, which was the reason for my color palette.
The gift tab is made so it looks for a specific amount of input and the form is needed to be filled in before being able to “send” the gift to the person with a special surprise after pressing send. I also wanted it to show some sort of card on what gets sent.
Credits:
API s from:
Fakerapi, Flagpedia, Leaflet.
Gifs from:
Pixabay.
Logo:
Made by me.
Final Fantasy XIV mount search - Native JavaScript
Credits:
API and inspiration from: https://ffxivcollect.com/
Banner images from: https://na.finalfantasyxiv.com/lodestone/special/fankit/desktop_wallpaper/4_0/#nav_fankit
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.
This area will soon be filled with more content as my education continues!