Elden Ring Weapons, Incantations, Sorceries: A Front-End Project
Published: 2023-05-15 13:39:48

###https://github.com/MaxwellConway/Front-End-Project


##Project Goals
This project was completed to demonstrate the use of JavaScript, HTML and CSS in a cohesive frontend product. Specifically, this project centered around the use of data from an API and how this data could be presented and styled visually on a page.

Completing this project involved three (3) main personal goals:
-*Fetching data from an API and using it*
-*Writing functional JavaScript*
-*Styling with CSS*

##What does it do?
I used an API with data from the video game **Elden Ring** ([link](https://docs.eldenring.fanapis.com/docs/)). I used this data to display different items and skills, such as weapons, on a page and present them in an easily navigable interface. This project was originally created from May 10-14, 2023.

This repo includes four (4) HTML documents that can be opened in a browser. The primary HTML document (index.html) functions as a "home page." This page displays three (3) main categories to select from (weapons, sorceries, or incantations). Clicking on one of these options will take you to a new page that displays all of the available items from the video game that fit the selected category. On this new page, there are buttons that allow you to further filter the displayed elements. Clicking one of these elements will take you to a corresponding wiki page.

## Work Process
The direction of this project changed over the course of its construction and the final product is different from what I initially imagined. As the complexity of different components emerged and became apparent, the project needed to be scaled down.

###Initial Phase
The first goal of the project was to successfully retrieve data from the selected API and access and manipulate the data within the API. This was accomplished by creating **async functions**. Within these functions I fetched lists of data in the form of arrays. I was then able to reference specific elements of the array and append them to different elements on the **Document Object Model** (DOM).

###Second Phase
With the ability to display elements from the API on the page, I added JavaScript that allowed appended elements to be filtered with a button press. I added buttons with categories to the top of each relevant page that, on click, would remove appended elements that did not match the button-filter criteria. I also linked the different HTML documents to each other so they could all be accessed from one another.

###Third Phase
With the functionality mostly complete, I began styling the page. This was a difficult process that gave me valuable CSS experience. The main focus of styling was to organize the page in a more visually pleasing way and provide feedback to user input. Changing the layout of each page was challenging and many different elements conflicted with each other. Fortunately, styling the buttons on each page was not particularly difficult. Adding a hover effect to the different filtered items was also simple.

###Final Phase
The final phase of this project involved adding a few more visual elements to the page that made navigation easier and cleaning up any redundant/unnecessary code. As of now, there is likely still a large amount of unnecessary code that needs to be reduced, which will be done in the future.

##Final Thoughts
Overall, this project gave me lots of hands-on experience with JavaScript, HTML, and CSS. A relatively short deadline (for my skill-level) helped to push me to learn new concepts at a fast pace as well as reinforce familiar concepts. I plan on revisiting this project in the future after acquiring new skills and increasing its scale.