Merging changes from John

.eslintrc.cjs

@@ -11,11 +11,12 @@ module.exports = {
     sourceType: 'module'
   },
   rules: {
-    'linebreak-style': [1, 'unix'],
+    'linebreak-style': [0],
     'newline-per-chained-call': [0],
     semi: [1, 'always'],
     'eol-last': [0],
     'comma-spacing': 1,
+    'no-console': [0],
     'no-mixed-requires': [0],
     'no-underscore-dangle': [0],
     'no-extra-parens': 0,

css/styles.css

@@ -154,7 +154,7 @@
     flex-direction: column;
     margin: 0;
     flex: 1;
-    background-color: rgb(245, 245, 245);
+    background-color: rgb(229, 9, 9);
   }
 
   .container {
@@ -163,7 +163,7 @@
     justify-content: space-evenly;
     align-items: start;
     flex:1;
-    background-color: rgb(248, 251, 253);
+    background-color: rgb(229, 9, 9);
   }
 
   .header {
@@ -172,6 +172,15 @@
    border-color: rgb(88, 105, 201);
   }
 
+  .alignIt {
+    display: flex;
+    flex-direction: column;
+
+    flex: 1;
+    background-color: rgb(229, 9, 9);
+    align-items: center;
+
+  }
 
   /*
     This rule implies that the H1 tag lives within another HTML tag

index.html

@@ -40,4 +40,5 @@ <h3>Searchable Crime Types:</h3>
     </div>
     <script src="js/script.js"></script>
   </body>
+
 </html>

js/accident.js

@@ -0,0 +1,112 @@
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#crime_list');
+  target.innerHTML = '';
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.street_address;
+    listEl.appendChild(el);
+  });
+}
+
+function processCrime(list) {
+  const newArray = list.filter((item) => {
+    const clearanceCodeIncType = item.clearance_code_inc_type;
+    if (clearanceCodeIncType && clearanceCodeIncType === 'ACCIDENT') {
+      console.log(item);
+      return item;
+    }
+    return null;
+  });
+  return newArray;
+}
+
+function initMap() {
+  console.log('initMap');
+  const map = L.map('map').setView([38.9897, -76.9378], 11);
+  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);
+  return map;
+}
+
+function markerPlace(array, map) {
+  map.eachLayer((layer) => {
+		if (layer instanceof L.Marker) {
+		  layer.remove();
+		}});
+  array.forEach((item) => {
+    const latitude = item.latitude;
+    const longitude = item.longitude;
+    L.marker([latitude, longitude]).addTo(map);
+  });
+}
+
+async function getData() {
+  const url = 'https://data.princegeorgescountymd.gov/resource/wb4e-w4nf.json';
+  const data = await fetch(url);
+  const json = await data.json();
+  const reply = json.filter((item) => Boolean(item.location)).filter((item) => Boolean(item.clearance_code_inc_type));
+  return reply;
+}
+
+async function mainEvent() {
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis');
+  submit.style.display = 'none'; // let your submit button disappear
+
+  // initChart(chartTarget);
+  const pageMap = initMap();
+  /* API data request */
+  const mapData = await getData();
+
+  console.table(mapData);
+
+  // in your browser console, try expanding this object to see what fields are available to work with
+  // for example: arrayFromJson.data[0].name, etc
+  console.log(mapData[0]);
+
+  // this is called "string interpolation" and is how we build large text blocks with variables
+  console.log(`${mapData[0].clearance_code_inc_type} ${mapData[0].street_address}`);
+
+  // 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'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+    loadAnimation.classList.remove('lds-ellipsis');
+    loadAnimation.classList.add('lds-ellipsis_hidden');
+
+    let currentList = [];
+    form.addEventListener('input', (event) => {
+      console.log(event.target.value);
+      const newFilterList = filterList(currentList, event.target.value);
+      injectHTML(newFilterList);
+      markerPlace(newFilterList, pageMap);
+    });
+
+    form.addEventListener('submit', (submitEvent) => {
+      // This is needed to stop our page from changing to a new URL even though it heard a GET request
+      submitEvent.preventDefault();
+
+      // This constant will have the value of your 15-restaurant collection when it processes
+      currentList = processCrime(mapData);
+
+      // And this function call will perform the "side effect" of injecting the HTML list for you
+      injectHTML(currentList);
+      markerPlace(currentList, pageMap);
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests

js/accident_w_impound.js

@@ -0,0 +1,112 @@
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#crime_list');
+  target.innerHTML = '';
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.street_address;
+    listEl.appendChild(el);
+  });
+}
+
+function processCrime(list) {
+  const newArray = list.filter((item) => {
+    const clearanceCodeIncType = item.clearance_code_inc_type;
+    if (clearanceCodeIncType && clearanceCodeIncType === 'ACCIDENT WITH IMPOUND') {
+      console.log(item);
+      return item;
+    }
+    return null;
+  });
+  return newArray;
+}
+
+function initMap() {
+  console.log('initMap');
+  const map = L.map('map').setView([38.9897, -76.9378], 11);
+  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);
+  return map;
+}
+
+function markerPlace(array, map) {
+  map.eachLayer((layer) => {
+		if (layer instanceof L.Marker) {
+		  layer.remove();
+		}});
+  array.forEach((item) => {
+    const latitude = item.latitude;
+    const longitude = item.longitude;
+    L.marker([latitude, longitude]).addTo(map);
+  });
+}
+
+async function getData() {
+  const url = 'https://data.princegeorgescountymd.gov/resource/wb4e-w4nf.json';
+  const data = await fetch(url);
+  const json = await data.json();
+  const reply = json.filter((item) => Boolean(item.location)).filter((item) => Boolean(item.clearance_code_inc_type));
+  return reply;
+}
+
+async function mainEvent() {
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis');
+  submit.style.display = 'none'; // let your submit button disappear
+
+  // initChart(chartTarget);
+  const pageMap = initMap();
+  /* API data request */
+  const mapData = await getData();
+
+  console.table(mapData);
+
+  // in your browser console, try expanding this object to see what fields are available to work with
+  // for example: arrayFromJson.data[0].name, etc
+  console.log(mapData[0]);
+
+  // this is called "string interpolation" and is how we build large text blocks with variables
+  console.log(`${mapData[0].clearance_code_inc_type} ${mapData[0].street_address}`);
+
+  // 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'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+    loadAnimation.classList.remove('lds-ellipsis');
+    loadAnimation.classList.add('lds-ellipsis_hidden');
+
+    let currentList = [];
+    form.addEventListener('input', (event) => {
+      console.log(event.target.value);
+      const newFilterList = filterList(currentList, event.target.value);
+      injectHTML(newFilterList);
+      markerPlace(newFilterList, pageMap);
+    });
+
+    form.addEventListener('submit', (submitEvent) => {
+      // This is needed to stop our page from changing to a new URL even though it heard a GET request
+      submitEvent.preventDefault();
+
+      // This constant will have the value of your 15-restaurant collection when it processes
+      currentList = processCrime(mapData);
+
+      // And this function call will perform the "side effect" of injecting the HTML list for you
+      injectHTML(currentList);
+      markerPlace(currentList, pageMap);
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests

js/assault.js

@@ -0,0 +1,112 @@
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#crime_list');
+  target.innerHTML = '';
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.street_address;
+    listEl.appendChild(el);
+  });
+}
+
+function processCrime(list) {
+  const newArray = list.filter((item) => {
+    const clearanceCodeIncType = item.clearance_code_inc_type;
+    if (clearanceCodeIncType && clearanceCodeIncType === 'ASSAULT') {
+      console.log(item);
+      return item;
+    }
+    return null;
+  });
+  return newArray;
+}
+
+function initMap() {
+  console.log('initMap');
+  const map = L.map('map').setView([38.9897, -76.9378], 11);
+  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);
+  return map;
+}
+
+function markerPlace(array, map) {
+  map.eachLayer((layer) => {
+		if (layer instanceof L.Marker) {
+		  layer.remove();
+		}});
+  array.forEach((item) => {
+    const latitude = item.latitude;
+    const longitude = item.longitude;
+    L.marker([latitude, longitude]).addTo(map);
+  });
+}
+
+async function getData() {
+  const url = 'https://data.princegeorgescountymd.gov/resource/wb4e-w4nf.json';
+  const data = await fetch(url);
+  const json = await data.json();
+  const reply = json.filter((item) => Boolean(item.location)).filter((item) => Boolean(item.clearance_code_inc_type));
+  return reply;
+}
+
+async function mainEvent() {
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis');
+  submit.style.display = 'none'; // let your submit button disappear
+
+  // initChart(chartTarget);
+  const pageMap = initMap();
+  /* API data request */
+  const mapData = await getData();
+
+  console.table(mapData);
+
+  // in your browser console, try expanding this object to see what fields are available to work with
+  // for example: arrayFromJson.data[0].name, etc
+  console.log(mapData[0]);
+
+  // this is called "string interpolation" and is how we build large text blocks with variables
+  console.log(`${mapData[0].clearance_code_inc_type} ${mapData[0].street_address}`);
+
+  // 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'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+    loadAnimation.classList.remove('lds-ellipsis');
+    loadAnimation.classList.add('lds-ellipsis_hidden');
+
+    let currentList = [];
+    form.addEventListener('input', (event) => {
+      console.log(event.target.value);
+      const newFilterList = filterList(currentList, event.target.value);
+      injectHTML(newFilterList);
+      markerPlace(newFilterList, pageMap);
+    });
+
+    form.addEventListener('submit', (submitEvent) => {
+      // This is needed to stop our page from changing to a new URL even though it heard a GET request
+      submitEvent.preventDefault();
+
+      // This constant will have the value of your 15-restaurant collection when it processes
+      currentList = processCrime(mapData);
+
+      // And this function call will perform the "side effect" of injecting the HTML list for you
+      injectHTML(currentList);
+      markerPlace(currentList, pageMap);
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests