Need Syntax

Use your code editor to open the project11-01_txt.html and project11-01_txt.js files from the js11 project01 folder. Enter your name and the date in the comment section of each file and save them as project11-01.html and project11-01.js, respectively.

Go to the project11-01.html file in your code editor. Add a script element linked to the project11-01js file. Defer the loading of the script until after the page is loaded. Close the file, saving your changes.

Go to the project11-01.js file in your code editor. Within the anonymous function for the dateBox.onchange event handler, add the following:

Declare the dateStr variable and set it equal to the value of the dateBox element.

Use the fetch() method to make a request to the following url:

where dateStr is the value of the dateStr variable.

Add a then() method that takes a successful response and applies the json() method to the response object to parse the JSON text string.

Add a then() method that receives the JSON object and runs the showPicture() method with the JSON object as the parameter value.

Add a catch() method that displays the text of the rejected promise in the debugger console.

Create a function named showPicture() with a single parameter named json. Within the function create an if else structure that tests the following conditions:

If json.media_type equals video then change the inner HTML of the imageBox element to the following:

where url is the value of json.url, title is the value of json.title, and explanation is the value of json.explanation. (Hint: You might find it easier to specify this HTML code using a template literal.)

If json.media_type equals "image then change the inner HTML of the imageBox element to the following:

Otherwise, change the inner HTML of the imageBox element to the text string: Image not Available.