From a0e5d4e22036dba5dd972e67b4b2ff9feeeca590 Mon Sep 17 00:00:00 2001
From: Matthew Strapp <msattr@gmail.com>
Date: Tue, 23 Feb 2021 15:54:25 -0600
Subject: work homework work

---
 csci4131/hw3/contacts.js     | 15 +++++++++++++--
 csci4131/hw3/myContacts.html |  5 +++--
 csci4131/hw3/style.css       |  9 +++++++++
 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;
-- 
cgit v1.2.3