Build and Style the form

Begin by reviewing the site plan again to see the details of what we are attempting to create. Pay special attention to the form portion on the top of the page.

Add the HTML and CSS necessary to make a form that matches the one in the mockup. Use a normal type="text" input for the date.

Javascript

We should write up a list of steps to indicate how the page should function.

1. When the Get Image button is clicked:
   1. Get the date from the text input
   2. Build a new URL using the date that will request the image from that day.
   3. Request the image
   4. Check the response, if it is not ok show an error to the user with the message sent back from the server.
   5. If the response is OK (we got an image) display it. and hide any errors that might be showing.

Begin by creating a function called getApodByDate. Then add an event listener to the "Get Image" button that will call the new function when the button is clicked.

Complete the getApodByDate function. It should get the value out of the input, and append it to the URL we used last week along with the date filter and the value from our input. The new URL should look like this:

apodUrl + `&date=${date.value}`

assuming that

apodUrl ="https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY"

Error checking

In the list of steps above we listed the need to check to make sure that we got good data back from the API. Whenever you allow input from users there is the chance that soemthing will break. We need to make sure it breaks gracefully :)

First update the getApod(url) function that we created last week. When we get a response from a server through fetch, there is always a property called ok. This will be true if things worked, and false if some sort of problem happened. Add an if statement to your function to check ok. An example of how that might look is given below

async function getApod(url) {
const res = await fetch(url);
const data = await res.json();
// check to make sure we got a good response
if (res.ok) {
// success...make sure any previous error message is gone.

//return the data
} else {
// error...output the message returned by the server

// return false to show that something went wrong
}
}

To make finishing the above function easier, add two more functions. Stubs for them can be found below

function showError(msg) {
//get the error element

//set the content of the element to the msg

// remove the hide class

}
function hideError() {
//get the error element

// clear out the content of the element

// add the hide class

}

Finish implementing those functions, then use them in getApod to show errors when appropriate.

Make the page responsive

Your page should now be looking finished and good...as long as the browser window is small enough. Try increasing the width of your browser however. What do you notice? The image just keeps growing...becoming so tall that you can't see the title and description below. If you go back and review the site plan you will see that on wide screens the layout should switch to 2 columns. Add the media query(s) that will make that change as well as the other changes to the date form shown.

Here are a few things to keep in mind:

• Flexbox makes it really easy to switch from a column layout to a row.
• You may need to set a width on the image after you change your flex direction to get it to behave.
• When setting widths on flex items a width of 100% will cause it to take up the whole row.
• ...but YOU have control over whether Flexbox items wrap or not.
• Remember that when overriding a rule in a media query you don't have to include all the properties in the original rule. Only include the properties that need to change.

Commit and push to Github

Commit your changes, then push them to GitHub. Wait a few minutes then check to make sure they show on Github pages. If you need a review on how to do this check out github instructions. Start around step 3.

After verifying that your page updated, submit the URL to your page in Ilearn. The URL will look something like this: https://githubusername.github.io/wdd130/apod. Make sure to replace "githubusername" with *your* actual github username :)