Calvin

assets/css/style.css

@@ -0,0 +1,115 @@
+/*-----------------------
+----- Basic Styles -----
+-------------------------*/
+body{
+	font-family: Raleway, Arial, sans-serif;
+    font-size:16px;
+    font-weight:300;
+    color:#6d6d6d;
+	overflow-x:hidden;
+}
+
+#sectionHeaders{
+	margin-top: 80px;
+	font-size: 40px;
+	font-weight:300;
+}
+/*-----------------------
+---- Header Styles ----
+-------------------------*/
+#home{
+	width: 100%;
+	height: 650px;
+	background:url('../img/header-bg.jpg') no-repeat;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	color:white;
+}
+#headerText{
+	margin-top: 20%;
+	font-size:70px;
+    font-weight:500;
+
+}
+#quoteText{
+	font-size:26px;
+    font-weight:300;
+}
+
+/*-----------------------
+---- Timer Styles ----
+-------------------------*/
+#timerSection{
+	background-color: #fff;
+    /*box-shadow: 0 0 50px rgba(0,0,0,0.5);*/
+	width: 100%;
+	height: 800px;
+}
+
+#timer{
+	margin-top: 80px;
+	font-size: 80px;
+
+}
+
+#buttonsContainer{
+	margin: 100px 50px 0 50px;
+}
+#play{
+	height: 100px;
+	width: 100px;
+}
+#play:hover {
+	opacity: .5;
+}
+
+#pause{
+	height: 100px;
+	width: 100px;
+}
+#pause:hover {
+	opacity: .5;
+}	
+	#stop{
+	height: 100px;
+	width: 100px;
+}
+#stop:hover {
+	opacity: .5;
+}
+
+#textBtn{
+	margin: 40px 80px;
+}
+
+/*-----------------------
+---- Chart Styles ----
+-------------------------*/
+#chartSection{
+	width: 100%;
+	height: 750px;
+	background-color: 
+	border-bottom: 8px solid #b2c7c8;
+}
+#chartContainer{
+	padding:50px;
+	width: 800px;
+	height:500px;
+}
+
+/*-----------------------
+---- Traffic Styles ----
+-------------------------*/
+#trafficSection{
+	width: 100%;
+	height: 500px;
+	background-color:#dbb98f;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+}
+
+
+
+

assets/js/script.js

@@ -0,0 +1,116 @@
+
+console.log("hello");
+require.config({
+  paths: {
+    "jquery": "https://code.jquery.com/jquery-2.2.4.min", 
+    "moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment",
+    "chartjs": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle"
+  },
+  shim: {
+        jquery: {
+            exports: "$"
+    }
+  }
+});
+
+require(['jquery', 'moment', 'chartjs'], function($ ,moment, Chart) {
+
+    const CHART = document.getElementById("myChart");
+
+    Chart.defaults.scale.ticks.beginAtZero = true;
+
+    let barChart = new Chart(CHART,{
+
+        type: 'bar',
+        data: {
+            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],
+            datasets: [{
+                label: 'Hours Per Week',
+                backgroundColor: '#b2c7c8',
+                data: [10, 15, 23, 30, 21, 33, 12, 28, 11]
+            }]
+        }
+
+    });
+
+
+// Google map api init. Location B default is UM Bootcamp location - Allen Hall 
+
+function initMap () {
+    var umBootcamp = { lat: 25.7230, lng: -80.2763 };
+    var map = new google.maps.Map(document.getElementById('trafficSection'), {
+        zoom: 15,
+        center: umBootcamp,
+      });
+
+      //traffic layer functionality.
+      var trafficLayer = new google.maps.TrafficLayer();
+      trafficLayer.setMap(map);
+      // user location via dialogue (accept / block) 
+      if (navigator.geolocation) {
+         navigator.geolocation.getCurrentPosition(function (position) {
+           const user_location = {
+             lat: position.coords.latitude,
+             lng: position.coords.longitude
+           };
+
+           // Center map with user location
+           map.setCenter(user_location);
+
+           // Add a marker for your user location
+           var userLocation = new google.maps.Marker({
+             position: {
+               lat: user_location.lat,
+               lng: user_location.lng
+             },
+             map: map,
+             title: "You are here"
+           });
+     //direction services for routes from user_location
+     var directionsService = new google.maps.DirectionsService();
+     var directionsDisplay = new google.maps.DirectionsRenderer();
+
+     var directionRequest = {
+       origin: user_location,
+       destination: umBootcamp,
+       travelMode: 'DRIVING'
+
+     };
+
+     directionsService.route(
+       directionRequest,
+       function(response, status) {
+         if (status === 'OK') {
+           // everything is ok
+           directionsDisplay.setDirections(response);
+
+         } else {
+           // something went wrong
+          window.alert('Directions request failed due to ' + status);
+         }
+       }
+     );
+
+
+     directionsDisplay.setMap(map);
+
+     //errors if user or browsers blocks location
+    console.log(directionsDisplay);
+
+     }, function () {
+       console.log('Error in the geolocation service.');
+     });
+     } else {
+      console.log('Browser does not support geolocation.');
+     }
+
+     }
+
+     initMap();
+
+
+
+
+});
+
+

chart.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Chart</title>
+
+</head>
+<body>
+	<canvas id="myChart" width="400" height="400"></canvas>
+<script>
+var ctx = document.getElementById("myChart").getContext('2d');
+var myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+        datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3],
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+            ],
+            borderColor: [
+                'rgba(255,99,132,1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero:true
+                }
+            }]
+        }
+    }
+});
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
+</body>
+</html>