Project 1 GA SEI 0119. A Pokémon Catalog using https://pokeapi.co/
An experiment in minimalist web design.
This website was developed using HTML, CSS, and Javascript.
Pokemon information was fetched from https://pokeapi.co/ using AJAX and JSON.
The entire website is contained within a single HTML page, and is dynamically created and modified via DOM manipulation.
The minimalist Pokemon logo was created by https://www.deviantart.com/spiketheswede , and was used under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
The image can be found at https://www.deviantart.com/spiketheswede/art/Pokemon-Logo-Minimalist-270706985
The users of this website are looking for a clean and elegant pokemon catalog that displays basic pokedex information.
MVP:
As a user, I want to be able to view pokemons and their stats.
As a user, I want to be able to switch between pokemons, and choose from all the existing pokemons.
Silver:
As a user, I want to be able to search individual pokemons if I type their name into a search bar.
As a user, I want the website to have a clean design with interactive elements.
Gold:
As a user, I want the search bar to have an autocomplete function.
As a user, I want the website to be responsive and properly formatted for mobile view.
The following images are the initial website designs. The website was mocked up in Adobe Xd, the style was changed eventually during coding.
Unsolved problems and major hurdles:
The PokeAPI has shortcomings when it comes to retrieving pokemons by name, there are a couple of pokemons such as Giratina that can't be retrieved using their name in the search bar. There are also certain pokemons that do not have a back sprite, and the website displays a broken image icon when this happens.
A major hurdle was formatting the css for mobile, since the website was developed for desktop first.