00-App Intro

This app will introduce you to a writing a Web client-facing page that consumes a RESTful API (REpresentational State Transfer). This kind of of API accepts requests and returns data. Hence, our application will be simple: it will search and display articles from The New York Times.

We are striving to stay close to the de facto JavaScript documentation, the MDN docs. This code comes from there. The original repository can be found here.

While Mozilla provides a great application for seasoned developers to read and to learn to use third party APIs, the docs do not break the app into easily accessible elements for beginners to comprehend. That is our goal. Our objective is to explain and experiment with every inch of this app so that you can begin understanding the ins and outs of working with an API.

File Structure

Let's get started with the files. We will be working with the following files:

    javascript-library
        └── 0-JavaScript-PreWork
        └── 1-JavaScript-Fundamentals
        └── 2-JavaScript-DOM-Manipulation
        └── 3-JavaScript-API-Fundamentals
            └── 1-Intro-to-APIs
            └── 2-Asynchronous-Programming
            └── 3-Fetch
            └── 4-Apps
                └── 01-New-York-Times
                        nyt.css  <--- You will be working with these files
                        index.html <--
                        nyt.js  <-----

Prep Work

Before you start this section, you might want to read through the following repository. See if you can read the code for 20 minutes or so and wrap your mind around what is happening. Try to let yourself ask questions and analyze various relationships in the code.

If you want, you can clone it. Just do so outside of your javascript-library file. Feel free to consult the completed code if you get stuck, but we have provided code along the way to help you. As we build this, we recommend that you type it yourself first, rather than just copy the file over. Working through the code and rewriting it will help you learn it in a scaffolded way. Other than the html and css files, you should only copy code when you are stuck and have tried everything else.

We hope you learn a lot of good stuff with this application. It is packed with great front end lessons!