From ed446e184382cc1bb0ec0cb61f8d3d120149d2d4 Mon Sep 17 00:00:00 2001
From: cuppajoeman <callumcn11@gmail.com>
Date: Mon, 4 Feb 2019 16:45:55 -0500
Subject: [PATCH 1/3] add spin on hover and add random background color

---
 index.html | 37 ++++++++++++++++++++++++++++++++++++-
 styles.css | 18 ++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 styles.css
diff --git a/index.html b/index.html
index c15d516..d0b3478 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,36 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="styles.css">
     <title></title>
 </head>
 
 <body>
     <h1>Meme Kingdom</h1>
     <div id="meme-kingdom"></div>
+    <button onclick="memeShuffle()">Shuffle Memes</button>
 </body>
 <script>
+
+
+    // Create a request variable and assign a new XMLHttpRequest object to it.
+    var request = new XMLHttpRequest();
+
+    // Open a new connection, using the GET request on the URL endpoint
+    request.open('GET', 'https://api.imgflip.com/get_memes', true);
+
+    request.onload = function () {
+        var data = JSON.parse(this.response);
+    }
+
+    // Send request
+    request.send()
+
+    var colors = ['#ff0000', '#00ff00', '#0000ff'];
+    var random_color = colors[Math.floor(Math.random() * colors.length)];
+    document.body.style.backgroundColor = random_color
+
+
     var memes = [
         "memes/gopher-this-is-fine.jpg",
         "memes/meme1.png",
@@ -24,11 +46,24 @@ <h1>Meme Kingdom</h1>
         return document.getElementById(id)
     }
 
+    function memeShuffle() {
+        var j, x, i;
+        for (i = memes.length - 1; i > 0; i--) {
+            j = Math.floor(Math.random() * (i + 1));
+            x = memes[i];
+            memes[i] = memes[j];
+            memes[j] = x;
+        }
+        loadmemes();
+    }
+
+    function shuffle(a) {
+    }
+
 
     // spin the meme
     function spin(id) {
         meme = gid(id)
-
     }
 
     var kingdom = gid("meme-kingdom")
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..d13e9d9
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,18 @@
+body {
+  background-color: powderblue;
+}
+h1 {
+  color: blue;
+}
+p {
+  color: red;
+}
+img {
+  border-radius: 50%;
+  -webkit-transition: -webkit-transform .8s ease-in-out;
+          transition:         transform .8s ease-in-out;
+}
+img:hover {
+  -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+}
\ No newline at end of file

From e1064947e9992d74cd4cb41c1c768f0887e35525 Mon Sep 17 00:00:00 2001
From: cuppajoeman <callumcn11@gmail.com>
Date: Mon, 4 Feb 2019 16:52:07 -0500
Subject: [PATCH 2/3] add spin and random images, no without http req

---
 index.html | 41 +++++++++++------------------------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index ce6700d..b562537 100644
--- a/index.html
+++ b/index.html
@@ -16,37 +16,26 @@ <h1>Meme Kingdom</h1>
 </body>
 <script>
 
-
-    // Create a request variable and assign a new XMLHttpRequest object to it.
-    var request = new XMLHttpRequest();
-
-    // Open a new connection, using the GET request on the URL endpoint
-    request.open('GET', 'https://api.imgflip.com/get_memes', true);
-
-    request.onload = function () {
-        var data = JSON.parse(this.response);
-    }
-
-    // Send request
-    request.send()
-
-    var colors = ['#ff0000', '#00ff00', '#0000ff'];
+var colors= ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
+		     '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
+		     '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
+		     '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
+		     '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
+		     '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
+		     '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
+		     '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
+		     '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
+		     '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
     var random_color = colors[Math.floor(Math.random() * colors.length)];
     document.body.style.backgroundColor = random_color
 
-
     var memes = [
         "memes/gopher-this-is-fine.jpg",
-        "memes/cny-pocket.jpg",
         "memes/meme1.png",
         "memes/meme2.jpg",
         "memes/meme3.jpg",
     ];
 
-    function gid(id) {
-        return document.getElementById(id)
-    }
-
     function memeShuffle() {
         var j, x, i;
         for (i = memes.length - 1; i > 0; i--) {
@@ -58,16 +47,8 @@ <h1>Meme Kingdom</h1>
         loadmemes();
     }
 
-    function shuffle(a) {
-    }
-
-
-    // spin the meme
-    function spin(id) {
-        meme = gid(id)
-    }
-
     var kingdom = gid("meme-kingdom")
+
     function loadmemes() {
         while (kingdom.firstChild) {
             kingdom.removeChild(kingdom.firstChild);

From 22ac196f7d5694a61e43f380cae2adbdeced685f Mon Sep 17 00:00:00 2001
From: cuppajoeman <callumcn11@gmail.com>
Date: Mon, 4 Feb 2019 17:00:01 -0500
Subject: [PATCH 3/3] re add gid function

---
 index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.html b/index.html
index b562537..80ff1e4 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,10 @@ <h1>Meme Kingdom</h1>
         "memes/meme3.jpg",
     ];
 
+    function gid(id) {
+        return document.getElementById(id)
+    }
+
     function memeShuffle() {
         var j, x, i;
         for (i = memes.length - 1; i > 0; i--) {
