diff options
Diffstat (limited to '')
| -rw-r--r-- | csci4131/hw3/contacts.js | 15 | ||||
| -rw-r--r-- | csci4131/hw3/myContacts.html | 5 | ||||
| -rw-r--r-- | 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; |