JS-151-API
  • JavaScript Library
  • 02-DOM-Manipulation
    • Overview
    • DOM Explained
    • Example Setup
    • Selecting Elements
    • Events
    • Complete Example
  • 03-API Fundamentals
    • 0-Getting Started
      • Welcome
    • 1-Intro-To-APIs
      • Intro
      • Client
      • Requests
      • JSON
      • API Endpoints
      • Server
      • Response
      • Statelessness
      • REST
    • 2-Asynchronous-Programming
      • Intro
      • Callbacks
      • Promises
      • Promises Continued
      • Chaining Promises
    • 3-Fetch
      • Fetch Intro
      • Star Wars
        • Star Wars API
        • Star Wars Setup
        • Star Wars JS
      • Random Photo
        • Unsplash
        • Unsplash Setup
        • Unsplash JS
    • 4-Apps
      • 01-New York Times
        • 00-App Intro
        • 01-HTML/CSS/API Key
        • 02-Variables
        • 03-Event Listeners
        • 04-fetchResults
          • 01-fetchResults()
          • 02-preventDefault()
          • 03-fetch() method
          • 04-Dates
        • 05-displayResults
          • 01-Logging JSON
          • 02-Working with JSON
          • 03-Link Display
          • 04-Results Navigation
          • 05-Results Update
          • 06-Keywords
          • 07-Images
        • 06-Pagination
          • 01-Pagination Intro
          • 02-Pagination Functions
        • 07-Next Steps
      • 02-YouTube
        • html
        • youtube.css
        • youtube.js
      • 03-GoogleMaps
        • Setup
        • HTML and CSS files
        • API Key
        • JS Setup
        • Adding Your Location
        • Listeners
        • Custom Options
Powered by GitBook
On this page
  • index.html
  • nyt.css
  • API KEY
  1. 03-API Fundamentals
  2. 4-Apps
  3. 01-New York Times

01-HTML/CSS/API Key

Our focus is JavaScript, so on this module we'll set up the .html and the .css files. Let's just copy these for now to get set up. We'll reference them as we go.

We'll also set up an API key, which we'll need for working with the NYT API.

index.html

Enter the following code. Most of this should look familiar to you:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>NY Times API example</title>
    <link href="nyt.css" rel="stylesheet">
  </head>
  <body>
    <h1>NY Times video search</h1>

    <div class="wrapper">
      <div class="controls">
        <!--Search Form-->
        <form>
          <p>
            <label for="search">Enter a SINGLE search term (required): </label>
            <input type="text" id="search" class="search" required>
          </p>
          <p>
            <label for="start-date">Enter a start date (format YYYYMMDD): </label>
            <input type="date" id="start-date" class="start-date" pattern="[0-9]{8}">
          </p>
          <p>
            <label for="end-date">Enter an end date (format YYYYMMDD): </label>
            <input type="date" id="end-date" class="end-date" pattern="[0-9]{8}">
          </p>
          <p>
            <button class="submit">Submit search</button>
          </p>
        </form>
      </div>
      <!--Results Section-->
      <div class="results">
        <!--Results Navigation-->
        <nav>
          <button class="prev">Previous 10</button>
          <button class="next">Next 10</button>
        </nav>
        <!--Results From Request-->
        <section>

        </section>
      </div>
    </div>
    <script type="text/javascript" src="nyt.js"></script>
  </body>
</html>

In the space above, we have essentially stubbed out a simple user interface that will allow us to enter a simple search string and show the results. It's important to note that anything in the <section> div will not be populated until after we use JavaScript to make our fetch for our data. The pattern attribute on a couple of the <label> elements allows us to control what kind of input is allowed to be used. Since we're using dates, we restrict the valid characters to numbers. In addition, it requires at least 8 numbers to be considered valid to ensure that valid dates are passed to the API.

nyt.css

Copy the code below and add it into nyt.css. Don't worry about understanding this code at this point. You'll understand it more later when you start playing around with customizing the application:

body {
  font-family: sans-serif;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.controls, .results {
  flex: 1;
  padding: 10px;
}

form p:nth-of-type(1) {
  margin-top: 0;
}

h1 {
  text-align: center;
}

h2 {
  font-size: 20px;
}

article p {
  font-size: 14px;
  line-height: 1.5;
}

article p:nth-of-type(2) {
  font-size: 14px;
  line-height: 2;
}

nav {
  margin-bottom: 50px;
}

.prev {
  float: left;
}

.next {
  float: right;
}

article {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #ddd;
  border: 1px solid #ccc;
}

img {
  float: right;
  margin-left: 20px;
  max-width: 200px;
}

.clearfix {
  clear: both;
}

span {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
}

API KEY

Previous00-App IntroNext02-Variables

Last updated 7 years ago

Follow these instructions to get an API key: 1. Go to the page and fill out the registration form. 2. Choose Article Search API from the list. You can also enter your portfolio site for your web site: yourgithubhandle.github.io. 3. An email will be sent to the account you provided with your key. 4. Just hang onto the email with the key in it for now. You'll use it soon.

New York Times Developer