UMD-INST377 · na5im · Oct 20, 2022 · Nov 12, 2022 · Nov 26, 2022 · Nov 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -151,3 +151,6 @@ dist
 
 # TernJS port file
 .tern-port
+.eslintrc.cjs
+.eslintrc.cjs
+.vscode/settings.json
diff --git a/README.md b/README.md
@@ -1,6 +1,9 @@
-# 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.
+# LitterMapper
+[LitterMapper](https://na5im.github.io/) is a tool for tracking and visualizing litter in PG County, MD. It uses the [LitterTRAK API](https://data.princegeorgescountymd.gov/Environment/LitterTRAK/9tsa-iner) to access data on the location of data and uses [Leaflet](https://leafletjs.com/) to display this information on the map. LitterMapper can be accessed through any modern browser (Chrome, Safari, Firefox) on any modern device (iOS, Android, Windows, macOS, Linux).
 
-### 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/)
+## Technologies used
+- LitterTRAK API 
+- Leaflet v1.9.3
+- Bootstrap v4.6.1
+- JQuery v3.4.1
+- Bulma v0.9.4
diff --git a/client/about.html b/client/about.html
@@ -0,0 +1,64 @@
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+ <title>PG County LitterMapper</title>
+
+ <link rel="stylesheet" href="style.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
+
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
+
+ <script src="https://kit.fontawesome.com/7721abf666.js" crossorigin="anonymous"></script>
+</head>
+<body>
+ <nav class="navbar navbar-expand-custom navbar-mainbg">
+ <a class="navbar-brand navbar-logo" href="#"><i class="fa-sharp fa-solid fa-map-pin"></i>LitterMapper</a>
+ <button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <i class="fas fa-bars text-white"></i>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav ml-auto">
+ <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
+ <li class="nav-item">
+ <a class="nav-link" href="../index.html"><i class="fa-sharp fa-solid fa-house-chimney"></i></i>Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="./table.html"><i class="fa-sharp fa-solid fa-table"></i>Cities Table</a>
+ </li>
+ <li class="nav-item active">
+ <a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>About</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+
+ <div class="container">
+
+ <div class="about_box ">
+ <h1>About Our App</h1>
+ <p> Our web app, LitterMapper, was created to help residents of PG County stay informed about the litter in their district. 
+ Using data from the LitterTRAK API, our app allows users to see the locations of litter on a map. 
+ This can help residents take action to clean up their communities and keep PG County litter free.
+ </p>
+
+ <h2>Why We Created This App</h2>
+
+ <p>We created LitterMapper because we believe that clean, litter-free communities are important for the health and well-being of everyone who lives in PG County. 
+ Litter not only affects the aesthetic of our neighborhoods, but it can also pose a serious threat to the environment and wildlife. 
+ That's why we wanted to create a tool that would help residents stay informed about the litters in their district and take action to clean them up.</p>
+
+ <p>With LitterMapper, users can see the locations of litter on a map. This can help them plan clean-up efforts, coordinate with their neighbors, and make a real difference in their communities. We believe that by empowering residents with information, we can help create a cleaner, healthier, and more beautiful PG County.</p>
+
+ </div>
+
+ </div>
+
+ <script src="./navbar.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/client/index.html b/client/index.html
diff --git a/client/navbar.js b/client/navbar.js
@@ -0,0 +1,81 @@
+// ---------Responsive-navbar-active-animation-----------
+function test() {
+ const tabsNewAnim = $('#navbarSupportedContent');
+ const selectorNewAnim = $('#navbarSupportedContent').find('li').length;
+ const activeItemNewAnim = tabsNewAnim
+ .find('li')
+ .end()
+ .find('.active');
+
+ function setHoriSelectorPositionAndDimensions(activeItem) {
+ const activeWidthNewAnimHeight = activeItem.innerHeight();
+ const activeWidthNewAnimWidth = activeItem.innerWidth();
+ const itemPosNewAnimTop = activeItem.position();
+ const itemPosNewAnimLeft = activeItem.position();
+ console.log(activeItem, itemPosNewAnimTop, activeWidthNewAnimWidth);
+
+ $('.hori-selector').css({
+ top: `${itemPosNewAnimTop.top}px`,
+ left: `${itemPosNewAnimLeft.left}px`,
+ height: `${activeWidthNewAnimHeight}px`,
+ width: `${activeWidthNewAnimWidth}px`
+ });
+ }
+ // Show the li elements before calling the setHoriSelectorPositionAndDimensions function
+ $('#navbarSupportedContent ul li').show();
+
+ // Call the setHoriSelectorPositionAndDimensions function when the page is first loaded
+ setHoriSelectorPositionAndDimensions(activeItemNewAnim);
+
+ $('#navbarSupportedContent').on('click', 'li', function(e) {
+ $('#navbarSupportedContent ul li').removeClass('active');
+ $(this).addClass('active');
+
+ // Call the setHoriSelectorPositionAndDimensions function when an item is clicked
+ setHoriSelectorPositionAndDimensions($(this));
+ });
+}
+
+$(document).ready(() => {
+ setTimeout(() => { test(); }, 150); // adding 100 fixed the alignment of the hori-selector
+});
+$(window).on('resize', () => {
+ setTimeout(() => { test(); }, 500);
+});
+$('.navbar-toggler').click(() => {
+ $('.navbar-collapse').slideToggle(300);
+ setTimeout(() => { test(); });
+});
+
+// --------------add active class-on another-page move----------
+jQuery(document).ready(($) => {
+ // Get current path and find target link
+ let path = window.location.pathname.split('/').pop();
+
+ // Account for home page with empty path
+ if (path === '') {
+ path = 'index.html';
+ }
+
+ const target = $(`#navbarSupportedContent ul li a[href="${path}"]`);
+ // Add active class to target link
+ target.parent().addClass('active');
+});
+
+// Add active class on another page linked
+// ==========================================
+// $(window).on('load',function () {
+// var current = location.pathname;
+// console.log(current);
+// $('#navbarSupportedContent ul li a').each(function(){
+// var $this = $(this);
+// // if the current path is like this link, make it active
+// if($this.attr('href').indexOf(current) !== -1){
+// $this.parent().addClass('active');
+// $this.parents('.menu-submenu').addClass('show-dropdown');
+// $this.parents('.menu-submenu').parent().addClass('active');
+// }else{
+// $this.parent().removeClass('active');
+// }
+// })
+// });
diff --git a/client/old-version/about.html b/client/old-version/about.html
@@ -0,0 +1,46 @@
+<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>LitterMapper</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+ <div class="wrapper">
+ <header class="header">
+ <h1>LitterMapper</h1>
+ <nav>
+ <ul>
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./about.html">About</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <div class="container">
+
+ <div class="">
+ <h1>About Our App</h1>
+ <p> Our web app, LitterMapper, was created to help residents of PG County stay informed about the litter in their district. 
+ Using data from the LitterTRAK API, our app allows users to see the locations of littlers on a map and learn more about them. 
+ This can help residents take action to clean up their communities and keep PG County litter free.
+ </p>
+
+ <h2>Why We Created This App</h2>
+
+ <p>We created LitterMapper because we believe that clean, litter-free communities are important for the health and well-being of everyone who lives in PG County. 
+ Litter not only affects the aesthetic of our neighborhoods, but it can also pose a serious threat to the environment and wildlife. 
+ That's why we wanted to create a tool that would help residents stay informed about the littlers in their district and take action to clean them up.</p>
+
+ <p>With LitterMapper, users can see the locations of littlers on a map and learn more about them. This can help them plan clean-up efforts, coordinate with their neighbors, and make a real difference in their communities. We believe that by empowering residents with information, we can help create a cleaner, healthier, and more beautiful PG County.</p>
+
+ </div>
+
+ </div>
+ </div>
+
+ <script src="../script.js"></script>
+</body>
+</html>