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.

The 5 Ws: 1. Who—Your professional network, as well as potential employers. 2. What—A JavaScript app built with HTML, CSS, and JavaScript, which uses an external API. 3. When—Immediately! The code for the app can always be viewed in a repository like GitHub or GitLab. 4. 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). 5. 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.

Features and Requirements: User Goals Your users should be able to view a list of data and see more details for a given data item on demand. It’s up to you to come up with a type of data you want to display (see this list of public APIs for an example); however, if you don’t have any special preferences, you can write a small Pokédex app to display a list of Pokémon.

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:
    Required:
        - The app must load data from an external API; for instance, the Pokémon 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 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.

    Nice to Have:
        - The app should show loading indicators while loading data.
        - The app should handle errors (such as trying to load data while offline) and show user-friendly error messages.

Process: Step 1: ● Set up the general outline of the app.

Steps 2 and 3: ● Set up a general dataset for the application and display it in a very basic way to the user.

Step 4 and 5: ● Implement a forEach loop to print details on each item in your app’s repository. ● Wrap repository in an IIFE to avoid accidentally accessing the global state. ● Update your forEach loops to work within the IIFE.

Step 6: ● Render static data from the data repository on the page. ● Add basic styling to the app. ● Make sure your application is accessible.

Step 7: ● Load data from an external API via fetch.

Step 8: ● Add complex UI patterns to the app --> show data details in a modal.

Step 9: ● Use Bootstrap to create a clean and usable design for the app.

Step 10: ● Ensure app works in all necessary browsers. ● Add ESLint rules and ensure code passes the validation test. ● Make final adjustments to app such as styling or usability improvements.

Technologies used:

• JavaScript
• CSS
• JQuery
• VSCode extensions: ESLinter and Prettier