{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Javascript API Webpage Hacks\n",
    "> Breaking up the code and describing what the code is doing."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "<!-- HTML table fragment for page --> \n",
    "<table> // creates a table \n",
    "  <thead> // sets up the heading \n",
    "  <tr> // makes a row\n",
    "    <th>Time</th> // names the columns \n",
    "    <th>All-time Cases</th>\n",
    "    <th>Recorded Deaths</th>\n",
    "    <th>Active Cases</th>\n",
    "  </tr> // new row\n",
    "  </thead>\n",
    "  <tbody> // setting the data for each cell \n",
    "    <td id=\"time\"></td>\n",
    "    <td id=\"total_cases\"></td>\n",
    "    <td id=\"total_deaths\"></td>\n",
    "    <td id=\"active_cases\"></td>\n",
    "  </tbody>\n",
    "</table>\n",
    "\n",
    "<table>\n",
    "  <thead>\n",
    "  <tr>\n",
    "    <th>Country</th>\n",
    "    <th>All-time Cases</th>\n",
    "    <th>Recorded Deaths</th>\n",
    "    <th>Active Cases</th>\n",
    "  </tr>\n",
    "  </thead>\n",
    "  <tbody id=\"result\"> // setting the body of the table to be the \"result\" data from the API\n",
    "    <!-- generated rows -->\n",
    "  </tbody>\n",
    "</table> // closes off the table\n",
    "\n",
    "<!-- Script is layed out in a sequence (no function) and will execute when page is loaded -->\n",
    "<script>\n",
    "  // prepare HTML result container for new output\n",
    "  const resultContainer = document.getElementById(\"result\"); // extracting data from result, the code is somewhere else in this repository \n",
    " \n",
    "  // prepare fetch options\n",
    "  const url = \"https://flask.nighthawkcodingsociety.com/api/covid/\";\n",
    "  const headers = {\n",
    "    method: 'GET', // *GET, POST, PUT, DELETE, etc.\n",
    "    mode: 'cors', // no-cors, *cors, same-origin\n",
    "    cache: 'default', // *default, no-cache, reload, force-cache, only-if-cached\n",
    "    credentials: 'omit', // include, *same-origin, omit\n",
    "    headers: {\n",
    "      'Content-Type': 'application/json'\n",
    "      // 'Content-Type': 'application/x-www-form-urlencoded',\n",
    "    },\n",
    "  };\n",
    "\n",
    "  // fetch the API\n",
    "  fetch(url, headers)\n",
    "    // response is a RESTful \"promise\" on any successful fetch\n",
    "    .then(response => {\n",
    "      // check for response errors\n",
    "      if (response.status !== 200) {\n",
    "          const errorMsg = 'Database response error: ' + response.status;\n",
    "          console.log(errorMsg);\n",
    "          const tr = document.createElement(\"tr\");\n",
    "          const td = document.createElement(\"td\");\n",
    "          td.innerHTML = errorMsg;\n",
    "          tr.appendChild(td);\n",
    "          resultContainer.appendChild(tr);\n",
    "          return;\n",
    "      }\n",
    "      // valid response will have json data\n",
    "      response.json().then(data => {\n",
    "          console.log(data);\n",
    "          console.log(data.world_total)\n",
    "\n",
    "          // World Data\n",
    "          document.getElementById(\"time\").innerHTML = data.world_total.statistic_taken_at;\n",
    "          document.getElementById(\"total_cases\").innerHTML = data.world_total.total_cases;\n",
    "          document.getElementById(\"total_deaths\").innerHTML = data.world_total.total_deaths;\n",
    "          document.getElementById(\"active_cases\").innerHTML = data.world_total.active_cases;\n",
    "\n",
    "          // Country data\n",
    "          for (const row of data.countries_stat) {\n",
    "            console.log(row);\n",
    "\n",
    "            // tr for each row\n",
    "            const tr = document.createElement(\"tr\");\n",
    "            // td for each column\n",
    "            const name = document.createElement(\"td\");\n",
    "            const cases = document.createElement(\"td\");\n",
    "            const deaths = document.createElement(\"td\");\n",
    "            const active = document.createElement(\"td\");\n",
    "\n",
    "            // data is specific to the API\n",
    "            name.innerHTML = row.country_name;\n",
    "            cases.innerHTML = row.cases; \n",
    "            deaths.innerHTML = row.deaths; \n",
    "            active.innerHTML = row.active_cases; \n",
    "\n",
    "            // this builds td's into tr\n",
    "            tr.appendChild(name);\n",
    "            tr.appendChild(cases);\n",
    "            tr.appendChild(deaths);\n",
    "            tr.appendChild(active);\n",
    "\n",
    "            // add HTML to container\n",
    "            resultContainer.appendChild(tr);\n",
    "          }\n",
    "      })\n",
    "  })\n",
    "  // catch fetch errors (ie ACCESS to server blocked)\n",
    "  .catch(err => {\n",
    "    console.error(err);\n",
    "    const tr = document.createElement(\"tr\");\n",
    "    const td = document.createElement(\"td\");\n",
    "    td.innerHTML = err;\n",
    "    tr.appendChild(td);\n",
    "    resultContainer.appendChild(tr);\n",
    "  });\n",
    "</script>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3.9.12 ('base')",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "name": "python",
   "version": "3.9.12"
  },
  "orig_nbformat": 4,
  "vscode": {
   "interpreter": {
    "hash": "40d3a090f54c6569ab1632332b64b2c03c39dcf918b08424e98f38b5ae0af88f"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}