UMD-INST377 · ishaan-d-puri · Dec 3, 2022 · Dec 7, 2022 · Dec 9, 2022 · Dec 9, 2022
diff --git a/README.md b/README.md
@@ -1,6 +1,21 @@
-# This is your readme
-You are required to fill it in with documentation similar to that found in the Sequelize example for the course as part of your final project.
+# Team 103-06 ReadMe.md File
+Link to GitHub Pages: http://ishaan-d-puri.github.io
 
-### How to use Markdown
-Markdown is a text notation system used in Discord, Whatsapp and similar to structure pages without writing HTML at all. You'll be using it for your documentation.
-* [Markdown guide](https://www.markdownguide.org/cheat-sheet/)
+# Title: Prince George's County Libraries By Zip Code
+
+# Targeted Browsers:
+- Google Chrome v.s 107.0.5304.110 
+- Safari v.s 14.0.3 
+
+This webpage is accessible on both desktop and mobile devices.
+
+# API: Open Source Prince George's County Libraries
+API Endpoint: https://data.princegeorgescountymd.gov/resource/7k64-tdwr.json
+
+# Other JS Libaries: Leaflet.js
+In our project, we attempted to add a map visualization to our webpage that allowed for users to visually see where libraries are located throughout PG County. When a user first visits our webpage and is prompted to put in their zip code, the map is centered around University of Maryland, College Park. After a list of libraries are generated, markers are dropped on the same map of those libraries around PG County.
+
+# CSS Frameworks used: Modern CSS 
+
+# Description of the Project and Problem Solved:
+Through our final project, we wanted to develop an application that allowed users to have access to location information on Libraries across PG County, easily. Libraries are centers of knowledge, so knowing where the closest library is, without having to do extensive research, is very useful information to know. As a result, through our webpage, users are able to be generated a list of libraries throughout PG County, and are able to put in their zip code to find a libarary that is closest to them.
diff --git a/client/images/pgLogofooter.png b/client/images/pgLogofooter.png
diff --git a/client/images/pgLogoheader.png b/client/images/pgLogoheader.png
diff --git a/client/index.html b/client/index.html
diff --git a/client/index_2.html b/client/index_2.html
@@ -0,0 +1,44 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Group Project Page 2</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+    crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+    crossorigin=""></script>
+</head>
+<body>
+    <div class="wrapper">
+      <div class="left_section box"><a href="../index.html"><h1>Home</h1></a></div>
+        <header class="header">
+            <img src="images/pgLogoheader.png" alt="images/pgLogoheader.png">
+            <h1>Prince George's County Libraries By Zip Code</h1>
+        </header>
+        <div class="container">
+          <div class="left_section box">
+            <form action="/api" class="box main_form">
+              <label for="zip">Zip Code</label>
+              <input type="text" name="zip" id="zip" />
+              <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+              <button type="submit" id="get-zip">Find</button>
+            </form>
+          </div>
+          <div class="right_section box">
+            <h3>Local Library Map</h3>
+            <div id="map"></div>
+            <div class="box" id="library_list">Library List:</div>
+          </div>
+        </div>
+      </div>
+    <footer class="footer">
+        <a href="https://www.pgcmls.info/"><img src="images/pgLogofooter.png" alt="Link to PG County Libraries Website"></a> 
+        To learn more click the image to the left!
+    </a></footer>
+    <script src="./script.js"></script>
+</body> 
+</html>
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,123 @@
+/* eslint-disable max-len */
+
+// Random Number Generator for API
+function getRandomIntInclusive(min, max) {
+  const newMin = Math.ceil(min);
+  const newMax = Math.floor(max);
+  return Math.floor(Math.random() * (newMax - newMin + 1) + newMin); // The maximum is inclusive and the minimum is inclusive
+}
+
+// Function that injects information from API
+function injectHTML(list) {
+  console.log('Fired Inject HTML');
+  const target = document.querySelector('#library_list');
+  target.innerHTML = '';
+
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.branch_name;
+    listEl.appendChild(el);
+  });
+}
+
+// Function that processes a list of PG County Libraries into an array of 15
+function processLibraries(list) {
+  console.log('Fired Library List');
+  const range = [...Array(15).keys()];
+  const newArray = range.map((item) => {
+    const index = getRandomIntInclusive(0, list.length);
+    return list[index];
+  });
+  return newArray;
+}
+
+// Function used to filter list by Zipcode once library list is generated
+function filterList(array, filterInputValue) {
+  console.log('HERE');
+  return array.filter((item) => {
+    const lowerCaseName = `${item.branch_name} ${item.zip_code}`.toLowerCase();
+    const lowerCaseQuery = filterInputValue.toLowerCase();
+    return lowerCaseName.includes(lowerCaseQuery);
+  });
+}
+
+// Function for map
+function initMap() {
+  const map = L.map('map').setView([38.9897, -76.9378], 13);
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+  console.log('initMap');
+  return map;
+}
+
+// Function to put marker points on the map
+function markerPlace(array, map) {
+  map.eachLayer((layer) => {
+    if (layer instanceof L.Marker) {
+      layer.remove();
+    }
+  });
+  array.forEach((item, index) => {
+    const lat = item.location_1.latitude;
+    const long = item.location_1.longitude;
+    const numLat = parseFloat(lat);
+    const numLong = parseFloat(long);
+    L.marker([numLat, numLong]).addTo(map);
+    if (index === 0) {
+      map.setView([numLat, numLong], 10);
+    }
+  });
+}
+
+// ASYNC Function that pulls data from API
+async function getData() {
+  const url = 'https://data.princegeorgescountymd.gov/resource/7k64-tdwr.json'; // PG County Library URL
+  const data = await fetch(url);
+  const json = await data.json();
+
+  const reply = json.filter((item) => Boolean(item.zip_code)).filter((item) => Boolean(item.branch_name));
+  console.log(json);
+  return reply;
+}
+
+async function mainEvent() {
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-zip'); // get a reference to submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis'); // get a reference to loading animation
+  submit.style.display = 'none'; // let submit button disappear
+
+  const pageMap = initMap();
+  const mapData = await getData();
+
+  // This IF statement ensures we can't do anything if we don't have information yet
+  if (mapData?.length > 0) { // the question mark in this means "if this is set at all"
+    submit.style.display = 'block'; // turns the submit button back on by setting it to display as a block when we have data available
+    loadAnimation.classList.remove('lds-ellipsis'); // hides the load button now that we have some data to manipualte
+    loadAnimation.classList.add('lds-ellipsis_hidden'); // turns the submit button back on by setting it to display as a block when we have data
+
+    let currentList = [];
+    form.addEventListener('input', (event) => {
+      console.log(event.target.value);
+      const newFilterList = filterList(currentList, event.target.value);
+      injectHTML(newFilterList);
+      markerPlace(newFilterList, pageMap);
+    });
+
+    // "Submit" button Event Listener
+    form.addEventListener('submit', (submitEvent) => {
+      submitEvent.preventDefault(); // Needed to stop our page from changing to a new URL even though it heard a GET request
+      console.log('Submit Event Listener');
+      currentList = processLibraries(mapData); // This constant will have the value of your 15-restaurant collection when it processes
+
+      injectHTML(currentList); // function call will perform the "side effect" of injecting the HTML list
+      markerPlace(currentList, pageMap);
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent());