Javascript vs. Jquery drink list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Content!</title>
</head>
<body>
<h1>Drink Selection!</h1>
<hr>
<!-- Here we create a generic div called "drink-options" -->
<div id="drink-options"></div>
<script type="text/javascript">
// We are given an array that holds all of the drinks available
var drinkList = [
"Coffee: $5",
"Espresso: $7",
"Cappuccino: $6",
"Latte: $4",
"Tea: $3",
"Ice Coffee: $6",
"Ice Espresso: $8",
"Ice Latte: $6",
"Ice Tea: $4"
];
// This line of JavaScript "grabs" the main div on the page ("#drink-options");
var drinkDiv = document.getElementById("drink-options");
// We then use a for loop to iterate through all the drinks in drinkList.
// With each iteration, we perform a series of code operations each time.
for (var i = 0; i < drinkList.length; i++) {
// For each drink in the array, we create a new placeholder div.
// This placeholder will get overwritten with each iteration of the loop.
var newDrinkDiv = document.createElement("div");
// We then assign the the value of this placeholder div to be the text in the array.
newDrinkDiv.innerHTML = drinkList[i];
// We then add the placeholder div to the our main div on the page ("#drink-options")
drinkDiv.appendChild(newDrinkDiv);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Content!</title>
<!-- Added link to the jQuery Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Drink Selection!</h1>
<hr>
<!-- Here we create a generic drink-options div -->
<div id="drink-options"></div>
<script type="text/javascript">
// Array holds all of the drinks available
var drinkList = [
"Coffee: $5",
"Espresso: $7",
"Cappuccino: $6",
"Latte: $4",
"Tea: $3",
"Ice Coffee: $6",
"Ice Espresso: $8",
"Ice Latte: $6",
"Ice Tea: $4"
];
// This line of jQuery selects the div with the matching id (#drink-options)
var drinkDiv = $("#drink-options");
// Here we use jQuery's custom .each method to loop through the object and immediately create divs.
$.each(drinkList, function(number, drink){
drinkDiv.append("<div>" + drink + "</div>")
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Content!</title>
<!-- Added link to the jQuery Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Drink Selection!</h1>
<hr>
<!-- Here we create a generic drink-options div -->
<div id="drink-options"></div>
<script type="text/javascript">
// Array holds all of the drinks available
var drinkList = [
"Coffee: $5",
"Espresso: $7",
"Cappuccino: $6",
"Latte: $4",
"Tea: $3",
"Ice Coffee: $6",
"Ice Espresso: $8",
"Ice Latte: $6",
"Ice Tea: $4"
];
// This line of jQuery selects the div with the matching id (#drink-options)
var drinkDiv = $("#drink-options");
// For Loop then loops through our total drink list...
for (var i = 0; i < drinkList.length; i++) {
// It then creates a new div for each drink. Note we create divs and add the content in the same line.
var newDrinkDiv = $("<div>" + drinkList[i] + "</div>");
// It then adds this new div to the drinkList div.
drinkDiv.append(newDrinkDiv);
}
</script>
</body>
</html>