Final Project Progress

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.

CSS:       grid-template-areas:      “header header”
                                                                “menu content”
                                                                “footer footer”

Current page progress

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: