Pokédex
Overview
Pokédex is a small web application with HTML, CSS, and JavaScript that loads data from an external API and enables the viewing of data points in detail.
Purpose & Context
Pokédex was a project I built as part of my web development course at CareerFoundry to demonstrate my mastery of JavaScript development.
Objective
The aim of the project was to build a complete, fully functioning JavaScript web application which uses an external API.
Duration
17 Days
Credits
- Tutor: Emanuel Okello
- Mentor: Ramadhan Aheebwa
Built With
- Javascript
- Bootstrap
- JQuery
- HTML5
- CSS3
Approach
01 forEach() Loops & IIFE
First I: Applied a forEach loop to iterate over the pokemon in my pokemonList array. Then I wrapped my pokemonList array in an IIFE to avoid accidentally accessing the global state.
02 DOM Interaction
Next I: Created a fluid user interface through DOM manipulation and applied event handling for web interactivity and accessibility.
03 API & Asynchronous requests
Then I: Applied Ajax principles to send and fetch pokemon asynchronously from, pokeapi.co, an external API. I chose to fetch pokemon using promises asynchronously due to it being a more-structured and organized way to code than callbacks. Rather than requiring a page refresh to display new information, the page can, instead, be altered dynamically such as automatically updated feeds.
04 Bootstrap & UI Libraries
Next I: implemented bootstrap, a responsive application framework for UI patterns such as form validation and modals to speed up design.
05 Performance & Debugging
Finally I: Implemented ESLint, cleaned up my codebase, fixed all linting issues by using prettier, minified CSS and JavaScript files and then deployed the app on GitHub pages.
Retrospective
What went well?
I had a fun time designing and developing this project in javascript. I also found bootstrap to be very intuitive and easy to grasp and it did indeed save a ton of design time.
What didn't go well?
The biggest challenge was time. I took the initiative to add this filter by pokemon type feature as an added bonus to test my javascript skills and faced a delay in completing the app in a timely manner. However, I worked around the clock and finally reached my goal. After having reached out to my tutor and developer friends for assistance to no avail I remained determined and finally found the solution I was looking for by searching on google.
Future Steps
I would like to continue to build on the app to include more pokemon and add a compare functionality that allows the user to compare stats between pokemon. I would also like to spend more time to redesign the detailed view of the modal and have it showcase the pokemon stats in a bar like infographic.
Final Thoughts
Overall, this was a fun introduction to javascript and getting to dive deep into API's, promises, for each method, declarations, primative and complex data types, conditionals, loops, functions, DOM and learning the benefits of asynchronous behavior.
Contact
Please use the form below to send me a message. I'll be happy to hear from you.