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
  • TWO CONDITIONALS
  • More Options
  1. 03-API Fundamentals
  2. 4-Apps
  3. 01-New York Times
  4. 04-fetchResults

04-Dates

Previous03-fetch() methodNext05-displayResults

Last updated 7 years ago

Here we'll work with having the option to include a beginning date and ending date in our search.

TWO CONDITIONALS

Let's add the conditional statements for end date and start date. Let's do this after the url and before the fetch. Note that some code has been omitted below. We are in the fetchResults function, if you're lost:

  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value;
//INSERT HERE  
  if(startDate.value !== '') {
      console.log(startDate.value)
    url += '&begin_date=' + startDate.value;
  };

  if(endDate.value !== '') {
    url += '&end_date=' + endDate.value;
  };
//END HERE
  fetch(url).then(function(result) {

If you print the url to the now, you should see .

This is a rudimentary version of form validation, which is a method of ensuring that specific fields are filled out in a form. You've seen form validation. Think about when you go sign up for a new account somewhere, and you are prompted for more information. Form Validation will force you to enter information. In this case, we are not being forced to enter a start date or end date. It's optional. If the input fields for dates aren't blank, denoted by the !== '', the date values will be added to the URL string. If they're blank, the expressions inside of the conditionals are ignored.

More Options

There are many more options that you could use to append more items to your URL strings. If you're interested, go to the and play around.

this
NYT API docs