aboutsummaryrefslogtreecommitdiffstats
path: root/csci4131/hw3
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--csci4131/hw3/contacts.js15
-rw-r--r--csci4131/hw3/myContacts.html5
-rw-r--r--csci4131/hw3/style.css9
3 files changed, 25 insertions, 4 deletions
diff --git a/csci4131/hw3/contacts.js b/csci4131/hw3/contacts.js
index a8c4b26..af8c84e 100644
--- a/csci4131/hw3/contacts.js
+++ b/csci4131/hw3/contacts.js
@@ -1,3 +1,5 @@
+document.getElementById("bigboi").classList.add("isntRotating");
+
function change(small, row) {
document.getElementsByClassName("smol")[row].src = small;
}
@@ -5,6 +7,15 @@ 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 isRotating=0;
+function dizzy() {
+ if (!isRotating) {
+ document.getElementById("bigboi").classList.remove("isntRotating");
+ } else {
+ document.getElementById("bigboi").classList.add("isntRotating");
+ }
+ isRotating^=1;
+}
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
@@ -53,10 +64,10 @@ function addPoints(locations) {
if (!this.infoWindow) {
this.infoWindow = new google.maps.InfoWindow({
content: this.data.content,
-
});
+
}
this.infoWindow.open(map, this);
})
}
-} \ No newline at end of file
+}
diff --git a/csci4131/hw3/myContacts.html b/csci4131/hw3/myContacts.html
index 5a4169c..79b66ad 100644
--- a/csci4131/hw3/myContacts.html
+++ b/csci4131/hw3/myContacts.html
@@ -72,9 +72,10 @@
</tr>
</table>
<div class="large">
- <img id="bigboi" src="gophers-mascot.png" alt="Goldy Gopher"><br>
+ <img id="bigboi" src="gophers-mascot.png" alt="Goldy Gopher" class="isRotating"><br>
<button id="luck" onclick="lucky()">Feeling Lucky</button>
- </div><br>
+ <button id="spin" onclick="dizzy()" >Feeling Dizzy</button>
+ </div><br><br>
<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>
diff --git a/csci4131/hw3/style.css b/csci4131/hw3/style.css
index a4e9ec2..3617820 100644
--- a/csci4131/hw3/style.css
+++ b/csci4131/hw3/style.css
@@ -40,6 +40,15 @@ tr:nth-child(odd) {
object-fit: cover;
margin-right: 0;
}
+.isRotating {
+ animation:5s rotate infinite linear;
+}
+.isntRotating {
+ animation-play-state: paused;
+}
+@keyframes rotate{
+ 100%{ transform:rotate(1turn) } // or 360deg
+}
#map {
padding-top: 30%;
margin-top: 25em;