Review the site plan

Begin by reviewing the site plan to see the details of what we are attempting to create. All of the information we need to successfully create this page is there. As you review the wireframe try and look for relationships and groupings in the layout that we might need to represent in the HTML.

Create a new folder to hold this project called apod. Then create an html file: index.html, a javascript file: apod.js and a css file: apod.css. Add the HTML you need to have a valid new page as well as a link element for your CSS and a script for your Javascript.

Make sure to add a new link to the site /index.html file as well!

Write the HTML

Next add the HTML to display the content. Create the elements that will house the major parts of the page first: header, main, and footer. The header will just contain the title of the site. (You can find that in the site plan. Tip: you can copy/paste the planet emoticon!)

In the footer we will provide some attribution to NASA. Refer again to the site plan for the language. The link goes to https://apod.nasa.gov/apod/astropix.html

At this point we really just need 3 more containers in main and we will be close on the HTML. We need an element to hold the search form (You can leave this empty for now. We will code that up next week), and element for use in displaying errors which will intially be hidden, and an element which we will insert the picture and info into once we retrieve them. Add classes to those elements. We will need them later for styling and/or Javascript.

Retrieve an image.

Instead of jumping into the CSS, we are actually going to move to some Javascript. We can't easily finish the HTML until we have the information from the API!

In the apod.js file create a variable apodUrl. Set it equal to https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY

Next write a function called getApod(url) that will use that URL to fetch the current picture of the day. Once you have it you should console.log, or otherwise inspect the object we got back. Pay attention to all the fields. Then refer back to the wireframe. Take note of the information we are displaying, then find where each bit is stored in the data we got back from the API.

Next create a template function that we will use to combine the data with some HTML. Make sure again to keep the wireframe/mockup in mind as you decide how to structure your HTML. After you have written your function you can check below to see one possible solution.

function photoTemplate(photo) {
return `<section class="photo">
<img src=${photo.url} alt="${photo.title}">
<div>
<h2>${photo.title}</h2>
<h3>${photo.date}</h3>
<p>${photo.explanation}</p>
</div>
</section>`;
}

Finally write a init() function. In that function would should call the other two functions we created to retrieve the data, format the data with HTML, and then insert the HTML into our page.

Style

In the apod.css file begin writing the CSS to make your page match the details in the site plan and mockup. Below are a few things to note:

• Start with the layout in the mobile wireframe. Working mobile first is usually easier. We will finish the wide screen layout in the next part of this assignment.
• For your layouts you should use Flexbox instead of Grid.
• For the error box, since we haven't implemented it yet, type something into it, then apply your styling. Once you have it looking the way you like then remove your text, and hide it.
• To hide the error box the easiest way would probably be to create a rule in your CSS like this: .hide { display: none; }. Then add that as a second class to your error box. ie: <section class="error hide">
• The images that come back from NASA will probably be larger than the space we want to display them in. Remember that you can use max-width to make them fit.

:root {
--dark-blue: #313d5a;
--platinum: #eaeaea;
--lilac: #73628a;
--fire-opal: #e3655b;
}

a:link,
a:visited {
color: var(--lilac);
}

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 :)