/simple-JS-app

Primary LanguageJavaScript

First simple JS app

Objective

This project is an exercise in building a small web app with HTML, CSS and JavaScript that loads data from an external API and enables the viewing of data points in detail.

The goal

The goal is to have an app that allows users to view a list of pokemon data and see more details for a given data item on demand.

the 5 Ws

  • Who—Your professional network, as well as potential employers.
  • What—A JavaScript app built with HTML, CSS, and JavaScript, which uses an external API.
  • When—Immediately! The code for the app can always be viewed in a repository like GitHub or GitLab.
  • Where—Potential employers, clients, and collaborators might look at the code directly from your GitHub repository or be directed to your GitHub profile from your portfolio site (your project from Intro to Frontend Development).
  • Why—For your potential employers, clients, and collaborators to see how you create the architecture of a JavaScript app, as well as how you test and debug your code.

Key Features

● Load data from an external source (API) ● View a list of items ● On user action (e.g., by clicking on a list item), view details for that item

Technical Requirements

● The app must load data from an external API; for instance, the Pokémon API ('https://pokeapi.co/api/v2/pokemon/?limit=150').
● 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 Pokémon) 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 JavaScript code may be formatted via Prettier.
---- The JavaScript code may be manually formatted.
● The app must use at least one additional complex UI pattern, such as a modal, for details or touch interactions.
---- The app may allow searching for items (e.g., searching for Pokémon).
● The app must not throw any errors when being used.
● The app should be deployed to a publicly accessible platform like GitHub Pages (you can review how to do this in Intro to Frontend Development's Exercise 10: Code Quality, Testing, & Web Hosting).
● The app must work in Chrome, Firefox, Safari, Edge, and Internet Explorer 11