Pokemon App
Vanilla JavaScript | Bootstrap
Introduction
App loading data from an external API, showing a list of data items and displaying details in a modal on click.
Pokemon App in use
Objective
The aim of the project was build a web application using pure JavaScript and Bootstrap.
The problem to be solved was building an app that fetches data from an external API,
displays the data objects in a list and shows details and images in a modal.
Screenshot of finished app (main view with movie list)
Context
The Pokemon application was part of the web development course at CareerFoundry to build skills
in JavaScript, use an external API and implement Bootstrap for the UI.
The project brief described the features and the requirements accurately and the exercises were
structured to follow this guideline.
Project brief Careerfoundry (source: Careerfoundry)
Approach
1. Step: Connect to API
The first step was to connect to the API and check how data is structured and how it can beused.
2. Step: Create the User Interface
In the second part of building the app, I created the UI elements with Bootstrap.
Reflection
It was challenging to understand the basic JavaScript functions and how data can be accessed and used.
Duration + Next Steps
This task took about 3 weeks.
As a next step, I would like to rebuild this app with a different API, with different content, leading to different functions for sorting and filtering and different imagery to display.