Neil Carribine

← back

Pokedex

Pokemon app utilises an external API to load data and images of Pokemon. When a Pokemon is clicked, a modal window appears displaying the Pokemon's height, weight, and type.

HTML

CSS

JavaScript

Bootstrap

Objective

The objective of this project was to create a small web application using HTML, CSS, and JavaScript that would utilize an external API, specifically the Pokeapi. The primary goal was to load data from the Pokeapi and provide users with the ability to view the data in detail.

Approach

In this project, I wanted to familiarise myself with external APIs and JavaScript by using the Pokeapi. To start the process I began by implementing a loop to make sure the fetch requests were functioning correctly. This allowed me to retrieve data from the Pokeapi JSON file and see what information was available which informed my decisions on what features I wanted to add to my website. To speed up the development process I made use of tools such as Bootstrap which allowed me to incorporate features such as modals and responsive responsiveness. These features, which can be time-consuming to develop from scratch, were seamlessly incorporated into my website, saving valuable development time and ensuring a more polished user interface.

Key learnings

Through this project, I gained valuable insights into integrating external APIs, a deeper understanding of JavaScript, and utilising Bootstrap for rapid web development. I learned to integrate data by using Fetch from the Pokeapi into my website, strengthening my understanding of external API integration. Using the Pokeapi allowed me to enhance my JavaScript proficiency, fetching data and dynamically updating the website. Additionally, by leveraging Bootstrap's pre-designed components and responsive grid system, I accelerated the development process and created visually appealing interfaces. Overall, this project provided a strong foundation for my web development journey, equipping me with the skills to integrate APIs and improve my JavaScript proficiency.

Wanna find out more eh?