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.
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.
Pokédex was a project I built as part of my web development course at CareerFoundry to demonstrate my mastery of JavaScript development.
The aim of the project was to build a complete, fully functioning JavaScript web application which uses an external API.
17 Days
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.
Next I: Created a fluid user interface through DOM manipulation and applied event handling for web interactivity and accessibility.
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.
Next I: implemented bootstrap, a responsive application framework for UI patterns such as form validation and modals to speed up design.
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.
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.
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.
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.
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.
Please use the form below to send me a message. I'll be happy to hear from you. Thanks!!!
