acbrent25
9/2/2017 - 1:49 PM

Javascript vs. Jquery drink list

Javascript vs. Jquery drink list

jsDrinkList.html
content_copyfile_download
<!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>
jQueryEachMethodDrinkList.html
content_copyfile_download
<!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>
jQueryDrinkList.html
content_copyfile_download
<!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>