From e72ad5b89b1737213d15e80b4dba39e2b71e1fd7 Mon Sep 17 00:00:00 2001
From: RossTheRoss <mstrapp@protonmail.com>
Date: Mon, 22 Feb 2021 22:32:53 -0600
Subject: I don't like JavaScript
---
csci4131/hw3/contacts.js | 59 ++++++++++++++++++++++++++++++++++++++--
csci4131/hw3/myContacts.html | 65 +++++++++++++++++++-------------------------
csci4131/hw3/style.css | 24 ++++++++++------
3 files changed, 100 insertions(+), 48 deletions(-)
diff --git a/csci4131/hw3/contacts.js b/csci4131/hw3/contacts.js
index 0e9b8bb..94340b2 100644
--- a/csci4131/hw3/contacts.js
+++ b/csci4131/hw3/contacts.js
@@ -1,8 +1,61 @@
-function change(big, small, row) {
- // document.getElementById("bigboi").src = big;
- document.getElementById("smol" + row).src = small;
+function change(small, row) {
+ document.getElementsByClassName("smol")[row].src = small;
}
function lucky() {
var image = ["carlson.jpg", "johnston.jpg", "morrill.jpg", "shepherd.jpg", "snyder.jpg", "walter.jpg"];
document.getElementById("bigboi").src = image[Math.floor(6 * Math.random())];
}
+let map;
+function initMap() {
+ map = new google.maps.Map(document.getElementById("map"), {
+ center: { lat: 44.9727, lng: -93.23540000000003 },
+ zoom: 14,
+ });
+
+ var service = new google.maps.places.PlacesService(map);
+ entries = document.getElementsByClassName("entry");
+ locations = [];
+ for (e=0; e<entries.length; e+=1) {
+ var kludge = 0;
+ var request = {
+ query: entries[e].getElementsByClassName("address")[0].textContent,
+ fields: ['name', 'geometry'],
+ };
+ service.findPlaceFromQuery(request, function (results, status) {
+ if (status === google.maps.places.PlacesServiceStatus.OK) {
+ locations[kludge++] = results[0];
+ }
+ if (kludge == entries.length) {
+ addPoints(locations);
+ }
+ });
+ }
+}
+
+function addPoints(locations) {
+ for (x in locations) {
+ newEntry = document.getElementsByClassName("entry")[x];
+ var marker = new google.maps.Marker({
+ map,
+ position: locations[x].geometry.location,
+ title: newEntry.getElementsByClassName("name")[0].textContent,
+ data : {
+ content: "<div class='id'>" +
+ "<b>" + newEntry.getElementsByClassName("name")[0].textContent + "</b>" + "<br>" +
+ newEntry.getElementsByClassName("category")[0].textContent + "<br>" +
+ newEntry.getElementsByClassName("room")[0].textContent + " " + newEntry.getElementsByClassName("street")[0].textContent + "<br>" +
+ newEntry.getElementsByClassName("city")[0].textContent +
+ "</div>",
+ }
+ });
+ marker.addListener('click', function () {
+ if (!this.infoWindow) {
+ this.infoWindow = new google.maps.InfoWindow({
+ content: this.data.content,
+ // content: newEntry.getElementsByClassName("address")[0],
+ });
+ }
+ this.infoWindow.open(map, this);
+ })
+ }
+}
\ No newline at end of file
diff --git a/csci4131/hw3/myContacts.html b/csci4131/hw3/myContacts.html
index 14de8be..5a4169c 100644
--- a/csci4131/hw3/myContacts.html
+++ b/csci4131/hw3/myContacts.html
@@ -30,43 +30,43 @@
<th>Email</th>
<th>URL</th>
</tr>
- <tr onmouseover="change('morrill.jpg', 'morrill.jpg', 0)" onmouseout="change('morrill.jpg', 'data:,', 0)">
- <td>Joan Gabel</td>
- <td>Industry</td>
- <td>100 Church Street SE<br> 202 Morrill Hall<br> Minneapolis MN 55455</td>
- <td>President of the University of Minnesota<br><img class="smol" id="smol0" src="data:," alt></td>
+ <tr class ="entry" onmouseover="change('morrill.jpg', 0)" onmouseout="change('data:,', 0)">
+ <td class="name">Joan Gabel</td>
+ <td class="category">Industry</td>
+ <td class="address"><span class="street">100 Church Street SE</span><br> <div class="room">202 Morrill Hall</div> <span class="city">Minneapolis MN 55455</span></td>
+ <td class="title">President of the University of Minnesota<br><img class="smol" id="smol0" src="data:," alt></td>
<td><a href="mailto:upres@umn.edu">upres@umn.edu</a></td>
<td><a href="https://president.umn.edu/">Home Page</a></td>
</tr>
- <tr onmouseover="change('walter.jpg', 'walter.jpg', 1)" onmouseout="change('walter.jpg', 'data:,', 1)">
- <td>Mostafa Kaveh</td>
- <td>Industry</td>
- <td>117 Pleasant St SE<br> 105 Walter Library<br> Minneapolis MN 55455</td>
- <td>Dean of the College of Science and Engineering<br><img class="smol" id="smol1" src="data:," alt></td>
+ <tr class ="entry" onmouseover="change('walter.jpg', 1)" onmouseout="change('data:,', 1)">
+ <td class="name">Mostafa Kaveh</td>
+ <td class="category">Industry</td>
+ <td class="address"><span class="street">117 Pleasant St SE</span><br> <div class="room">105 Walter Library</div> <span class="city">Minneapolis MN 55455</span></td>
+ <td class="title">Dean of the College of Science and Engineering<br><img class="smol" id="smol1" src="data:," alt></td>
<td><a href="mailto:mos@umn.edu">mos@umn.edu</a></td>
<td><a href="https://cse.umn.edu/college/office-dean">Home Page</a></td>
</tr>
- <tr onmouseover="change('johnston.jpg', 'johnston.jpg', 2)" onmouseout="change('johnston.jpg', 'data:,', 2)">
- <td>John Coleman</td>
- <td>Industry</td>
- <td>101 Pleasant Street SE<br> 215 Johnston Hall<br> Minneapolis MN 55455</td>
- <td>Dean of the College of Liberal Arts<br><img class="smol" id="smol2" src="data:," alt></td>
+ <tr class ="entry" onmouseover="change('johnston.jpg', 2)" onmouseout="change('data:,', 2)">
+ <td class="name">John Coleman</td>
+ <td class="category">Industry</td>
+ <td class="address"><span class="street">101 Pleasant Street SE</span><br> <div class="room">215 Johnston Hall</div> <span class="city">Minneapolis MN 55455</span></td>
+ <td class="title">Dean of the College of Liberal Arts<br><img class="smol" id="smol2" src="data:," alt></td>
<td><a href="mailto:coleman@umn.edu">coleman@umn.edu</a></td>
<td><a href="https://cla.umn.edu/units/dean">Home Page</a></td>
</tr>
- <tr onmouseover="change('snyder.jpg', 'snyder.jpg', 3)" onmouseout="change('snyder.jpg', 'data:,', 3)">
- <td>Valery Forbes</td>
- <td>Industry</td>
- <td>1475 Gortner Avenue<br> 123 Snyder Hall<br> St. Paul MN 55108</td>
- <td>Dean of the College of Biological Sciences<br><img class="smol" id="smol3" src="data:," alt></td>
+ <tr class ="entry" onmouseover="change('snyder.jpg', 3)" onmouseout="change('data:,', 3)">
+ <td class="name">Valery Forbes</td>
+ <td class="category">Industry</td>
+ <td class="address"><span class="street">1475 Gortner Avenue</span><br> <div class="room">123 Snyder Hall</div> <span class="city">St. Paul MN 55108</span></td>
+ <td class="title">Dean of the College of Biological Sciences<br><img class="smol" id="smol3" src="data:," alt></td>
<td><a href="mailto:cbsdeans@umn.edu">cbsdeans@umn.edu</a></td>
<td><a href="https://cbs.umn.edu/about/college-leadership">Home Page</a></td>
</tr>
- <tr onmouseover="change('carlson.jpg', 'carlson.jpg', 4)" onmouseout="change('carlson.jpg', 'data:,', 4)">
- <td>Sri Zaheer</td>
- <td>Industry</td>
- <td>321 19th Avenue S<br> Suite 4-300 Carlson School of Management<br> Minneapolis MN 55455</td>
- <td>Dean of the Carlson School of Management<br><img class="smol" id="smol4" src="data:," alt></td>
+ <tr class ="entry" onmouseover="change('carlson.jpg', 4)" onmouseout="change('data:,', 4)">
+ <td class="name">Sri Zaheer</td>
+ <td class="category">Industry</td>
+ <td class="address"><span class="street">321 19th Avenue S</span><br> <div class="room">Suite 4-300 Carlson School of Management</div> <span class="city">Minneapolis MN 55455</span></td>
+ <td class="title">Dean of the Carlson School of Management<br><img class="smol" id="smol4" src="data:," alt></td>
<td><a href="mailto:szaheer@umn.edu">szaheer@umn.edu</a></td>
<td><a href="https://carlsonschool.umn.edu/about-us/leadership-team">Home Page</a></td>
</tr>
@@ -75,18 +75,9 @@
<img id="bigboi" src="gophers-mascot.png" alt="Goldy Gopher"><br>
<button id="luck" onclick="lucky()">Feeling Lucky</button>
</div><br>
- <div id="contactMap"></div>
- <script>
- var map;
- function initMap() {
- var myLatLng = { lat: 44.9727, lng: -93.23540000000003 };
- map = new google.maps.Map(document.getElementById('contactMap'), {
- center: myLatLng,
- zoom: 14
- });
- }
- </script>
- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places&callback=initMap" async defer></script>
+ <div id="map"></div>
+ <div id="search"></div>
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places&callback=initMap" async defer></script>
</body>
</html>
diff --git a/csci4131/hw3/style.css b/csci4131/hw3/style.css
index 970ef9b..a4e9ec2 100644
--- a/csci4131/hw3/style.css
+++ b/csci4131/hw3/style.css
@@ -8,16 +8,17 @@ body {
background-color: white;
border-collapse: separate;
}
+
/* Contacts */
table, th, td {
- max-width: 70%;
+ max-width: 80%;
overflow-x:auto;
border: 1px solid black;
border-collapse: collapse;
}
table {
float:left;
- max-width: 50%;
+ max-width: 60%;
}
tr:nth-child(even) {
background-color:blanchedalmond;
@@ -31,20 +32,27 @@ tr:nth-child(odd) {
}
.large {
float: right;
- max-width:max-content
+ max-width: max-content;
}
#bigboi {
width: 25em;
height: 15em;
object-fit: cover;
+ margin-right: 0;
}
#map {
- height: 50%;
- margin-left: 10%;
- margin-right: 10%;
- margin-top: 10%;
- float: bottom;
+ padding-top: 30%;
+ margin-top: 25em;
+ margin-left: .2em;
+ position: bottom;
+ width: 60%;
+ height: 30%;
+ max-height: 40%;
+}
+.id {
+ text-align: center;
}
+
/* Form */
.Form {
background-color: whitesmoke;
--
cgit v1.2.3