HTML-CSS-JavaScript-Coursera/module5_solution/js/script.js at main · Rosander0/HTML-CSS-JavaScript-Coursera

463 lines (385 loc) · 14.5 KB
(function (global) {
// Set up a namespace for our utility
var ajaxUtils = {};
// Returns an HTTP request object
function getRequestObject() {
  if (window.XMLHttpRequest) {
    return (new XMLHttpRequest());
  else if (window.ActiveXObject) {
    // For very old IE browsers (optional)
    return (new ActiveXObject("Microsoft.XMLHTTP"));
    global.alert("Ajax is not supported!");
    return(null); 
// Makes an Ajax GET request to 'requestUrl'
ajaxUtils.sendGetRequest = 
  function(requestUrl, responseHandler, isJsonResponse) {
    var request = getRequestObject();
    request.onreadystatechange = 
      function() { 
        handleResponse(request, 
                       responseHandler,
                       isJsonResponse); 
    request.open("GET", requestUrl, true);
    request.send(null); // for POST only
// Only calls user provided 'responseHandler'
// function if response is ready
// and not an error
function handleResponse(request,
                        responseHandler,
                        isJsonResponse) {
  if ((request.readyState == 4) &&
     (request.status == 200)) {
    // Default to isJsonResponse = true
    if (isJsonResponse == undefined) {
      isJsonResponse = true;
    if (isJsonResponse) {
      responseHandler(JSON.parse(request.responseText));
      responseHandler(request.responseText);
// Expose utility to the global object
global.$ajaxUtils = ajaxUtils;
})(window);
$(function () { // Same as document.addEventListener("DOMContentLoaded"...
  // Same as document.querySelector("#navbarToggle").addEventListener("blur",...
  $("#navbarToggle").blur(function (event) {
    var screenWidth = window.innerWidth;
    if (screenWidth < 768) {
      $("#collapsable-nav").collapse('hide');
(function (global) {
var dc = {};
var homeHtmlUrl = "snippets/home-snippet.html";
var allCategoriesUrl =
  "https://coursera-jhu-default-rtdb.firebaseio.com/categories.json";
var categoriesTitleHtml = "snippets/categories-title-snippet.html";
var categoryHtml = "snippets/category-snippet.html";
var menuItemsUrl =
  "https://coursera-jhu-default-rtdb.firebaseio.com/menu_items/";
var menuItemsTitleHtml = "snippets/menu-items-title.html";
var menuItemHtml = "snippets/menu-item.html";
// Convenience function for inserting innerHTML for 'select'
var insertHtml = function (selector, html) {
  var targetElem = document.querySelector(selector);
  targetElem.innerHTML = html;
// Show loading icon inside element identified by 'selector'.
var showLoading = function (selector) {
  var html = "<div class='text-center'>";
  html += "<img src='images/ajax-loader.gif'></div>";
  insertHtml(selector, html);
// Return substitute of '{{propName}}'
// with propValue in given 'string'
var insertProperty = function (string, propName, propValue) {
  var propToReplace = "{{" + propName + "}}";
  string = string
    .replace(new RegExp(propToReplace, "g"), propValue);
  return string;
// Remove the class 'active' from home and switch to Menu button
var switchMenuToActive = function () {
  // Remove 'active' from home button
  var classes = document.querySelector("#navHomeButton").className;
  classes = classes.replace(new RegExp("active", "g"), "");
  document.querySelector("#navHomeButton").className = classes;
  // Add 'active' to menu button if not already there
  classes = document.querySelector("#navMenuButton").className;
  if (classes.indexOf("active") === -1) {
    classes += " active";
    document.querySelector("#navMenuButton").className = classes;
// // On page load (before images or CSS)
// document.addEventListener("DOMContentLoaded", function (event) {
// // TODO: STEP 0: Look over the code from
// // *** start ***
// // *** finish ***
// // below.
// // We changed this code to retrieve all categories from the server instead of
// // simply requesting home HTML snippet. We now also have another function
// // called buildAndShowHomeHTML that will receive all the categories from the server
// // and process them: choose random category, retrieve home HTML snippet, insert that
// // random category into the home HTML snippet, and then insert that snippet into our
// // main page (index.html).
// // TODO: STEP 1: Substitute [...] below with the *value* of the function buildAndShowHomeHTML,
// // so it can be called when server responds with the categories data.
// // *** start ***
// // On first load, show home view
// showLoading("#main-content");
// $ajaxUtils.sendGetRequest(
//   allCategoriesUrl,
//   [...], // ***** <---- TODO: STEP 1: Substitute [...] ******
//   true); // Explicitly setting the flag to get JSON from server processed into an object literal
// // *** finish **
// On page load (before images or CSS)
document.addEventListener("DOMContentLoaded", function (event) {
// TODO: STEP 0: Look over the code from
// *** start ***
// *** finish ***
// We changed this code to retrieve all categories from the server instead of
// simply requesting home HTML snippet. We now also have another function
// called buildAndShowHomeHTML that will receive all the categories from the server
// and process them: choose random category, retrieve home HTML snippet, insert that
// random category into the home HTML snippet, and then insert that snippet into our
// main page (index.html).
// TODO: STEP 1: Substitute [...] below with the *value* of the function buildAndShowHomeHTML,
// so it can be called when server responds with the categories data.
// *** start ***
// On first load, show home view
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
  allCategoriesUrl,
  buildAndShowHomeHTML, // ***** <---- STEP 1: Substitute with function name ******
  true); // Explicitly setting the flag to get JSON from server processed into an object literal
// *** finish **
// // Builds HTML for the home page based on categories array
// // returned from the server.
// function buildAndShowHomeHTML (categories) {
//   // Load home snippet page
//   $ajaxUtils.sendGetRequest(
//     homeHtmlUrl,
//     function (homeHtml) {
//       // TODO: STEP 2: Here, call chooseRandomCategory, passing it retrieved 'categories'
//       // Pay attention to what type of data that function returns vs what the chosenCategoryShortName
//       // variable's name implies it expects.
//       var chosenCategoryShortName = 
//       // TODO: STEP 3: Substitute {{randomCategoryShortName}} in the home html snippet with the
//       // chosen category from STEP 2. Use existing insertProperty function for that purpose.
//       // Look through this code for an example of how to do use the insertProperty function.
//       // WARNING! You are inserting something that will have to result in a valid Javascript
//       // syntax because the substitution of {{randomCategoryShortName}} becomes an argument
//       // being passed into the $dc.loadMenuItems function. Think about what that argument needs
//       // to look like. For example, a valid call would look something like this:
//       // $dc.loadMenuItems('L')
//       // Hint: you need to surround the chosen category short name with something before inserting
//       // it into the home html snippet.
//       //
//       // var homeHtmlToInsertIntoMainPage = ....
//       // TODO: STEP 4: Insert the produced HTML in STEP 3 into the main page
//       // Use the existing insertHtml function for that purpose. Look through this code for an example
//       // of how to do that.
//       // ....
//     false); // False here because we are getting just regular HTML from the server, so no need to process JSON.
// Builds HTML for the home page based on categories array
// returned from the server.
function buildAndShowHomeHTML (categories) {
  // Load home snippet page
  $ajaxUtils.sendGetRequest(
    homeHtmlUrl,
    function (homeHtml) {
      // STEP 2: Choose a random category and get its short_name
      var chosenCategory = chooseRandomCategory(categories);
      var chosenCategoryShortName = "'" + chosenCategory.short_name + "'";
      // STEP 3: Substitute {{randomCategoryShortName}} in the home html snippet
      var homeHtmlToInsertIntoMainPage = insertProperty(
        homeHtml,
        "randomCategoryShortName",
        chosenCategoryShortName
      // STEP 4: Insert the produced HTML into the main page
      insertHtml("#main-content", homeHtmlToInsertIntoMainPage);
    false); // False here because we are getting just regular HTML from the server, so no need to process JSON.
// Given array of category objects, returns a random category object.
function chooseRandomCategory (categories) {
  // Choose a random index into the array (from 0 inclusively until array length (exclusively))
  var randomArrayIndex = Math.floor(Math.random() * categories.length);
  // return category object with that randomArrayIndex
  return categories[randomArrayIndex];
// Load the menu categories view
dc.loadMenuCategories = function () {
  showLoading("#main-content");
  $ajaxUtils.sendGetRequest(
    allCategoriesUrl,
    buildAndShowCategoriesHTML);
// Load the menu items view
// 'categoryShort' is a short_name for a category
dc.loadMenuItems = function (categoryShort) {
  showLoading("#main-content");
  $ajaxUtils.sendGetRequest(
    menuItemsUrl + categoryShort + ".json",
    buildAndShowMenuItemsHTML);
// Builds HTML for the categories page based on the data
// from the server
function buildAndShowCategoriesHTML (categories) {
  // Load title snippet of categories page
  $ajaxUtils.sendGetRequest(
    categoriesTitleHtml,
    function (categoriesTitleHtml) {
      // Retrieve single category snippet
      $ajaxUtils.sendGetRequest(
        categoryHtml,
        function (categoryHtml) {
          // Switch CSS class active to menu button
          switchMenuToActive();
          var categoriesViewHtml =
            buildCategoriesViewHtml(categories,
                                    categoriesTitleHtml,
                                    categoryHtml);
          insertHtml("#main-content", categoriesViewHtml);
        false);
    false);
// Using categories data and snippets html
// build categories view HTML to be inserted into page
function buildCategoriesViewHtml(categories,
                                 categoriesTitleHtml,
                                 categoryHtml) {
  var finalHtml = categoriesTitleHtml;
  finalHtml += "<section class='row'>";
  // Loop over categories
  for (var i = 0; i < categories.length; i++) {
    // Insert category values
    var html = categoryHtml;
    var name = "" + categories[i].name;
    var short_name = categories[i].short_name;
      insertProperty(html, "name", name);
      insertProperty(html,
                     "short_name",
                     short_name);
    finalHtml += html;
  finalHtml += "</section>";
  return finalHtml;
// Builds HTML for the single category page based on the data
// from the server
function buildAndShowMenuItemsHTML (categoryMenuItems) {
  // Load title snippet of menu items page
  $ajaxUtils.sendGetRequest(
    menuItemsTitleHtml,
    function (menuItemsTitleHtml) {
      // Retrieve single menu item snippet
      $ajaxUtils.sendGetRequest(
        menuItemHtml,
        function (menuItemHtml) {
          // Switch CSS class active to menu button
          switchMenuToActive();
          var menuItemsViewHtml =
            buildMenuItemsViewHtml(categoryMenuItems,
                                   menuItemsTitleHtml,
                                   menuItemHtml);
          insertHtml("#main-content", menuItemsViewHtml);
        false);
    false);
// Using category and menu items data and snippets html
// build menu items view HTML to be inserted into page
function buildMenuItemsViewHtml(categoryMenuItems,
                                menuItemsTitleHtml,
                                menuItemHtml) {
  menuItemsTitleHtml =
    insertProperty(menuItemsTitleHtml,
                   "name",
                   categoryMenuItems.category.name);
  menuItemsTitleHtml =
    insertProperty(menuItemsTitleHtml,
                   "special_instructions",
                   categoryMenuItems.category.special_instructions);
  var finalHtml = menuItemsTitleHtml;
  finalHtml += "<section class='row'>";
  // Loop over menu items
  var menuItems = categoryMenuItems.menu_items;
  var catShortName = categoryMenuItems.category.short_name;
  for (var i = 0; i < menuItems.length; i++) {
    // Insert menu item values
    var html = menuItemHtml;
      insertProperty(html, "short_name", menuItems[i].short_name);
      insertProperty(html,
                     "catShortName",
                     catShortName);
      insertItemPrice(html,
                      "price_small",
                      menuItems[i].price_small);
      insertItemPortionName(html,
                            "small_portion_name",
                            menuItems[i].small_portion_name);
      insertItemPrice(html,
                      "price_large",
                      menuItems[i].price_large);
      insertItemPortionName(html,
                            "large_portion_name",
                            menuItems[i].large_portion_name);
      insertProperty(html,
                     "name",
                     menuItems[i].name);
      insertProperty(html,
                     "description",
                     menuItems[i].description);
    // Add clearfix after every second menu item
    if (i % 2 !== 0) {
      html +=
        "<div class='clearfix visible-lg-block visible-md-block'></div>";
    finalHtml += html;
  finalHtml += "</section>";
  return finalHtml;
// Appends price with '$' if price exists
function insertItemPrice(html,
                         pricePropName,
                         priceValue) {
  // If not specified, replace with empty string
  if (!priceValue) {
    return insertProperty(html, pricePropName, "");
  priceValue = "$" + priceValue.toFixed(2);
  html = insertProperty(html, pricePropName, priceValue);
  return html;
// Appends portion name in parens if it exists
function insertItemPortionName(html,
                               portionPropName,
                               portionValue) {
  // If not specified, return original string
  if (!portionValue) {
    return insertProperty(html, portionPropName, "");
  portionValue = "(" + portionValue + ")";
  html = insertProperty(html, portionPropName, portionValue);
  return html;
global.$dc = dc;
})(window);
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

script.js

Latest commit

History

script.js

File metadata and controls
