For my final project in CS 343, I have chosen to create a Pokédex SPA that uses a public database, PokeAPI, with RESTful API. So, my focus has been on page layout and how to search for data with limited methods since the backend is all set.
I went through several different ways of trying to set up the page layout, but eventually I settled on CSS grids. I found these grids to be intuitive and easy to manipulate. It was not long until I was able to successfully create a basic layout to work with. I used the grid-template-areas CSS property to set a dynamically resizable layout.
I used the CSS fractional units to determine the width of the columns (1:4) and static sizes for the height of the header and footer with the content in-between filling the page. Now that I have a basic layout to work with, I can focus on added functionality.
A function I have currently implemented is a search for Pokémon by id number or name. For now, the page simply displays the name, image, and id, but the API provides much more data that I haven’t included. The evolution tree function is still a WIP. Connecting the evolution chains to the specified Pokémon was a small issue. The API does not provide a way for an evolution chain to be searched for by Pokémon. I eventually settled on creating a map, at page load, by looping through all available chains and pairing them with their respected Pokémon. The plan is to use the chain to render a pop-up that displays the entire evolutionary tree. I also have a moves search that works similarly to the Pokémon search.
I am now trying to think of ways of using the pokeAPI in interesting ways. I will probably add some more search options to the menu as well as adding more options for linking relevant data. Even though my project is still fairly new, I have learned a great deal about HTML and CSS so far.