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
Follow these instructions to get an API key: 1. Go to the New York Times Developer 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.
Last updated