Pokémon Checker

What is this about?

This Pokémon Checker has been built as a task for Achievement 1 in Career Foundry's Full-Stack Web Development Program.
It is a small, responsive web application that fetches data from the external PokéAPI.
Pokémon names are displayed as a list.
Pokémon details are displayed via Modal.

Click here to see the website on GitHub pages

Project requirements

• mobile first (starting at 320px), responsive
• HTML, CSS and JavaScript from scratch
• Bootstrap (CSS, JS), Bootstrap's Navbar Component, Bootstrap's Modal Component
• fetch Pokémon names and Pokémon detailed URLs of a list of Pokémons
• fetch Pokémon Details via detailed URL, example "bulbasaur"
• create and style a home page that displays fetched Pokémon names as a list li within a static ul
  • do not display (at time of writing) all 1279 available Pokémon names, but limit that request
  • in that list, dynamically create mandatory li and button elements for each item
  • click on button needs to open a Modal
• create and style a Modal, that displays fetched Pokémon Details
  • for this, use Bootstrap's Modal Component
  • Pokémon Details mandatory to display are: image, name, height, types
  • all needed HTML elements must be created dynamically
• use Polyfills for fetch and promises (browser support)
• properly format and lint all files with Prettier and ESLint
• properly PostCSS, autoprefix and minify all files (manually, no build workflow)

Detour to formatting and linting

As I am working with Visual Studio Code, I do not need Prettier.
Visual Studio Code brings code formatting for HTML, CSS/SCSS and JavaScript out of the box.
This is the reason why I deleted Prettier, ESLint and configs off of this project, after passing the final task.
To achieve a common code formatting in colaborations, I've introduced an .editorconfig with a most global configuration.

Languages, Libraries, Frameworks

• HTML
• CSS
• JavaScript
• Bootstrap (CSS and JS; jQuery)
• Polyfill for promises
• Polyfill for fetch

Sources

• PokéAPI documentation
• PokéAPI Pokémon list, with name and Url to detailed Pokémon information
• PokéAPI example of a detailed Pokémon
• EditorConfig
• Projects using EditorConfig
• Download Plugins necessary to use EditorConfig in your IDE

Tools, Extensions

• Visual Studio Code
• GitHub / Pokémon Checker on GitHub Pages
• Visual Studio Code Extension "Live Server"
• Visual Studio Code Extension "EditorConfig"
• Visual Studio Code Extension "ESLint"
• Polyfill for promises with this min.js
• Polyfill for fetch with this js file
• Bootstrap 4.3.1 via CDN
• jQuery min to replace jQuery slim
• PostCSS CSS Variables Playground
• Autoprefixer
• Minify CSS
• Minify JS

How to run this?

No build workflow.

• clone the repo
• cd into project
• if on Visual Studio Code, install "Live Server" extension, go to bottom menu and click "Go Live":
  
  
• this is going to open the Pokémon Checker on localhost http://127.0.0.1:5500/

Possible future TODO

• Pagination
• Loading Spinner
• Search
• ...