Pokedex

Objective

To build 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.

Technical Requirements

• The app must load data from an external API(Pokemon API)
• The app must display a list of items loaded from that API after the page is loaded
• The app must enable the viewing of more details for a given list item(like a Pokemon)on demand, such as when clicking on a list item.
• The app must have CSS styling
• The JavaScript code must be formatted according to ESLint rules.
• The app must use at least one additional complex UI pattern, such as a modal, for details or touch interactions.
• The app must not throw any errors when being used.
• The app should be deployed to a publicly accessible platform like GitHub
• This app must work in Chrome, Firefox, Safari, Edge, and Internet Explorer 11.

Example of features

Through the project and problem I faced, how I engaged

• Basic JavaScript features

First of all, I needed to study all JavaScript basics which begin with variables, arrays, objects.
I took notes, watched many videos on YouTube, and practiced until I understand correctly because I thought "learn by coding" is very important.


• For loop

Second of all, I tried to get information from a pokemon list created by myself without API the tried to see if my code renders these variables on my app with for loop.
At this point, I had a problem with displaying pokemon correctly because I forgot to add iterator index next to list item(ex: pokemonList[i].name)
But afterward, I managed to render my pokemon information correctly.

• Function

To get used to functions, I made calculator on Repl with multiply, divide, increment, and decrement.

• DOM interactions

Next, I learned how to interact HTML with JavaScript. In the beginning, it was challenging because I couldn't directory see on HTML file when I dealt with elements via JavaScript. So in the beginning I wrote down my note and made it clear which content I was working on.

• Asynchronous code and API, Promise

After having finished creating basic button lists of pokemon, I learned how asynchronous works and how to fetch information from API. I made code with setTimeOut() to understand how asynchronous code works and also made some promises by myself to see how these works.

• Modal, Bootstrap

At last, I created Modal to show details of each pokemon with DOM interactions and added simple bootstrap to understand the difference between bootstrap and vanilla CSS. Although I studied DOM interactions, to show a modal was quite a challenge because it was not just a list or button but the whole modal itself. I asked for help from my tutor and mentor, also wrote down a paper to see the whole image.

Next step

Overall, this project was very challenging but really interesting and I felt really good to have made the first step to being a full-stack developer. Though the app looks very simple, I learned a lot as listed above, which is very fundamental and of course, I use it every day on my new projects.
As a next step, I will learn how to create a back end and get information from it. I am so excited to see what I can learn next.