Skip to content
Permalink
Browse files

hw2

  • Loading branch information...
bretonics committed Oct 9, 2018
1 parent db944ad commit 866f110512c473b76da1589b7ef5b3b485db8358
@@ -0,0 +1,31 @@
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Location Tracker</title>
<script src="LocationTracker.js"></script>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h2>Bird Location Tracker</h2>
</header>
<main>
<section>
<article>
<button id="startButton">Start</button>
</article>
<article id="status">
<p id="counter">Update #:</p>
<p id="startLatitude">Start Latitude:</p>
<p id="startLongitude">Start Longitude:</p>
<p id="currentLatitude">Current Latitude:</p>
<p id="currentLongitude">Current Longitude:</p>
</article>
<div id="map"></div>
</section>
</main>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDT2_sA3Z-aoztwo3AhNk8shuwWu7l80GA" async defer></script>
</body>
</html>
@@ -0,0 +1,117 @@
window.onload = init;

// Google map
var map, lastMarker = null;
var latitude, longitude;

// Interval in seconds to call new location update
var interval = 5000;

// Keep track of locations
var path = [];
var counter = 0;


// Register event handler for "Start" button
function init() {
var startButton = document.getElementById("startButton");
startButton.onclick = startTrackingLocation;
}

function startTrackingLocation() {
// Geolocation options
var options = {
enableHighAccuracy : true,
timeout : 50000,
maximumAge : 0
};

// Get initial location
navigator.geolocation.getCurrentPosition(displayLocation);

// Disable button
document.getElementById("startButton").disabled = true;

// Invoke simulated locations every 5 seconds
setInterval(updateMyLocation, interval);

}

function displayLocation(position) {
// Get locations information
latitude = position.coords.latitude;
longitude = position.coords.longitude;

// Update
path.push(new google.maps.LatLng(latitude, longitude));
counter++;

// Update DOM
document.getElementById("counter").innerHTML = "Update #: " + counter;
document.getElementById("startLatitude").innerHTML = "Start Latitude: " + latitude;
document.getElementById("startLongitude").innerHTML = "Start Longitude: " + longitude;
document.getElementById("currentLatitude").innerHTML = "Current Latitude: " + latitude;
document.getElementById("currentLongitude").innerHTML = "Current Longitude: " + longitude;

// Generate Google Map
showMap(position.coords);
}

function updateMyLocation() {
counter++

// Generate random numbers to change direction
latitude += Math.random() / 100;
longitude -= Math.random() / 100;

// Update DOM
document.getElementById("counter").innerHTML = "Update #: " + counter;
document.getElementById("currentLatitude").innerHTML = "Current Latitude: " + latitude;
document.getElementById("currentLongitude").innerHTML = "Current Longitude: " + longitude;

// Next point in travel
latlong = new google.maps.LatLng(latitude, longitude);
path.push(latlong);

// Draw line between points
var line = new google.maps.Polyline({
path: path,
strokeColor: '#0000ff',
strokeOpacity: 1.0,
strokeWeight: 3
});
line.setMap(map);
map.panTo(latlong);

// Draw last marker
if (lastMarker) { lastMarker.setMap(null); }
lastMarker = addMarker(map, latlong)
}

// Generate Google Maps
function showMap(position) {
var googlePosition = new google.maps.LatLng(position.latitude, position.longitude);

var mapOptions = {
zoom: 15,
center: googlePosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var mapElement = document.getElementById("map");
map = new google.maps.Map(mapElement, mapOptions);

addMarker(map, googlePosition);
}

function addMarker(map, googlePosition) {
var options = {
map: map,
position: googlePosition,
clickable: true
};

var marker = new google.maps.Marker(options);

return marker;
}
@@ -0,0 +1,151 @@
/* html5 css file, Peter Lubbers, Kaazing */

body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}

header {
background-color: #F47D31;
display:block;
color:#FFFFFF;
text-align:center;
width:100%;
}

h1 {
font-size: 72px;
margin: 0px;
text-align:center;
}

h2 {
font-size: 24px;
margin: 0px;
text-align:left;
padding-left: 10px;
}

h3 {
font-size: 18px;
margin: 0px;
text-align:center;
}

h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;

}

header h2 {
margin: 0px;
}

nav {
display:block;
width:25%;
float:left;
}

nav a:link, nav a:visited {
display: block;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}

nav a:hover {
color: white;
background-color: #F47D31;
}

nav h3 {
margin: 15px;
color: white;
}

#container {
background-color: #888;
}

section {
display:block;
width:50%;
float:left;
}

article {
background-color: #eee;
display:block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

article h2 {
}

aside {
display:block;
width:25%;
float:left;
}

footer {
clear: both;
display: block;
background-color: #F47D31;
color:#FFFFFF;
text-align:center;
padding: 15px;
}

#status {
border-radius: 10px;
border:solid 2px #F47D31;
padding: 5px;

}

#status p:hover {
color: white;
background-color: #F47D31;
}

#map {
margin: 5px;
width: 400px;
height: 400px;
border: 1px solid black;
}


/* links */
a {
color: #F47D31;
}

a:hover {
text-decoration: underline;
}

button {
font-size: 16px;
border-radius: 6px;
}
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<title>Democrats/Republicans</title>
<meta charset="utf-8">
<script src="partyWise.js"></script>
<link rel="stylesheet" href="html5.css">

<style type="text/css">
.dropList {
display: table-cell;
width: 400px;
}
ul {
padding-left: 30px;
}
#democrats, #republicans {
height: 150px;
}
#members li {
cursor: move;
}
.highlightedDemocrats {
background-color: blue;
}
.highlightedRepublicans {
background-color: red;
}
.dragged {opacity: 0.5;}
</style>

</head>
<body>
<header>
</header>

<section>
<article>
<h2>Time to Vote</h2>

<p>Drag members to either the Democrats or Republicans list.</p>

<ul id="members">
</ul>

<div id="dropLists" style="display: table">
<div style="display: table-row">

<div class="dropList">
<fieldset>
<legend>Democrats:</legend>
<ul id="democrats">

</ul>
</fieldset>
</div>

<div class="dropList">
<fieldset>
<legend>Republicans:</legend>
<ul id="republicans">

</ul>
</fieldset>
</div>

</div>
</div>

<p id="msg">Drop over the respective targets</p>
</article>
</section>


</body>
</html>
Oops, something went wrong.

0 comments on commit 866f110

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.