letWe'll first start off with the let keyword. let is similar to the var keyword, in that it allows us to declare and initialize variables. The difference lies in the scope.
That just means if a variable using var is declared and/or initialized inside of a function, that variable does not exist outside of that function.
let goes one step further and makes the variable block scoped. That just means if a variable is declared and/or initialized using let inside of a code block (anything inside{}), then that variable is scoped to that code block (not available outside of the code block).
For example,
if (true) {
let num = 2;
}
console.log(num); // returns "num is undefined"
if (true) {
var num = 2;
}
console.log(num); // returns "2"
constOur next change in ES6 is the const keyword. If you're used to Java, you might be familiar with using constants. Constants are just values that you initialize once and then expect it to not change again.
An example of using a constant is an API key or the users name.
Note that constants are declared using capitalized letters.
const API_KEY = "89yd9j9238yhdj90hsd89";
Template Literals allow you to perform string interpolation with variables. Note that instead of quotes, you will have to use `` (these are found on the same key as the "~" on Macs)
For example,
var name = "Bill Bertha";
console.log(`Hi, I am ${name}`); // returns "Hi, I am Bill Bertha"
$("#omdb_submit").click(function(){
//Gather values from the other fields and store them into variables.
var title = $("#title").val();
var year = $("#year").val();
// Concatenate those variables to a query string.
var queryString = "http://www.omdbapi.com/?t=" + title + "&y=" + year + "&plot=short&r=json";
});
$("#omdb_submit").click(function(){
//Gather values from the other fields and store them into variables.
var title = $("#title").val();
var year = $("#year").val();
// Concatenate those variables to a query string.
// Note: If you get errors about mixed protocols, then just change the url below to be in https format
var queryString = "https://www.omdbapi.com/?t=" + title + "&y=" + year + "&plot=short&r=json";
// Put that query string into the AJAX request
$.ajax({
url: queryString, // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
method: 'GET'
}).done(function(response) {
if(response.length < 1) {
// Output error message into output container
$("#output").html("Sorry, no movies were found :(");
} else {
// Output data into output container
$("#output").html(JSON.stringify(response));
// create an HTML element that will hold all of the prettified elements
var movieContainer = $('<div class="movie_Container">');
// Append the movie container to the existing container
$(".pretty_movie_output").append(movieContainer);
// Go through each property of the object and create/input the data from the object
for(var prop in response) {
var element;
if (prop == "Poster" && response[prop] != "N/A") {
element = $("<img class='pretty'>").attr("src", response[prop]);
} else {
element = $("<h3 class='pretty'>").text(prop + ": " + response[prop]);
}
movieContainer.append(element);
}
}
});
});