As part of the Front-End web development course with Academy Xi, our phase one project was to create a Single Page Application (SPA). The goal of this project was to bring together our learnings from the course thus far where the front end of the application would be utilising our HTML and CSS skills while we will also be communicating with an API of our choice with Javascript.
We also had to create a video no longer than 3 minutes how to use the SPA as well as a 5 blog post series that documents how we learnt throughout the Javascript Phase of the course.
I have decided to use the blog requirement to showcase how I made the Pokedex and my thoughts along the way.
Table Of Contents
Project requirements
Your app must be a HTML/CSS/JS frontend that accesses data from a public API or from a db.json file using json-server. Your API or db.json should return a collection of at least 5 objects with each object having at least 3 attributes. All interactions between the client and the API should be handled asynchronously and use JSON as the communication format. Try to avoid using an API that requires a key. APIs that are free and require no authorization will be easiest to use.
Your entire app must run on a single page. There should be NO redirects or reloads. In other words, your project will contain a single HTML file.
Use at least 3 distinct event listenersLinks to an external site. (3 events of different types) that enable interactivity. What this means is that, if you had 3 click events, that would only count as 1 distinct event and you would need to add at least 2 more. Think search or filter functionality, toggling dark/light mode, upvoting posts, etc. Each of your event listeners should also have its own unique callback function. These must be added using JavaScript's .addEventListener() method. Events embedded into HTML elements and CSS will not count toward the total. Please ask your instructor if you have questions regarding this requirement.
Your project must implement at least one instance of array iteration using available array methods (map, forEach, filter, etc). Manipulating your API data in some way should present an opportunity to implement your array iteration.
Follow good coding practices. Keep your code DRY (Do not repeat yourself) by utilizing functions to abstract repetitive code.
Initial thoughts
After reading the project and browsing the the list of no-auth APIs my initial thought was to use the Pokemon API. Already having a decent amount of Pokemon knowledge stored away, I thought this would be an interesting one to work with.
Planning the features
As with all coding problems the first step after thinking of an idea is to plan out how it should work. Following the steps from our course manual:
- Plan out your features
- Develop user stories
- “As [ a user ], I want [ to perform this action ] so that [ I can accomplish this goal ].”
- Features should not need you there to explain them to users
- Plan out the structure of your JSON requests
I wanted users to be able to search for a Pokemon in a pokedex like environment. Once they have selected their Pokemon the Pokedex will update with their name, typing, stats and sprite.
Most other Pokedex SPAs tend to just have basic information so I wanted to extend that a bit more and display their base stats. Long-long down the road I could see myself adding in cries for the Pokemon when a button is pressed and potentially having optimal movesets and training spreads to appear as well. But first thing first is to get something down.
Pitching the project
To avoid what happened to my previous project where I misinterpreted what needed to be done, I wanted to pitch the project to our mentor ASAP.
I told him the features I had planned for it and he encouraged me to push forward with the concept and even gave me some pointers for how I could potentially style the stats.
To make the most of the initial pitch, I had put together the basic concept of an input field that once you have typed in a name of the Pokemon, the table below it would update based on their stats.
Closing out
Thanks for reading part 1 of the creation of the pokedex project. Come back and see the other instalments once everything is complete :)
Top comments (0)