sdoro · January 14, 2018 15:35 · Jan 14, 2018
diff --git a/images.markdown b/images.markdown
@@ -0,0 +1,7 @@
+images
+------
+
+
+A [Pen](https://codepen.io/bdeen/pen/4f308cb6d1bffb1b46cb75bdbd93896e) by [Bre'Ana Deen](https://codepen.io/bdeen) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/bdeen/pen/4f308cb6d1bffb1b46cb75bdbd93896e/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,3 @@
+<button id="prev"><</button>
+<img id="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1259621/city.jpg">
+<button id="next">></button>
diff --git a/script.js b/script.js
@@ -0,0 +1,30 @@
+var prev = document.getElementById("prev");
+var next = document.getElementById("next");
+var image = document.getElementById("image");
+
+// store image paths in an array
+var images = ["https://s3-us-west-2.amazonaws.com/s.cdpn.io/1259621/city.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1259621/cloudy.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1259621/green.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1259621/pretty_clouds.jpg"];
+
+var imageIndex = 0;
+// point to previous image when prev button is clicked
+prev.onclick = function(){
+  // set image to highest index when moving past 0
+  if(imageIndex == 0){
+    imageIndex = images.length - 1;
+  }
+  else{
+    imageIndex--;
+  }
+  image.setAttribute("src", images[imageIndex]);
+}
+// point to previous image when prev button is clicked
+next.onclick = function(){
+  // set image index to 0 when moving past max index
+  if(imageIndex == images.length - 1){
+    imageIndex = 0;
+  }
+  else{
+    imageIndex++;
+  }
+  image.setAttribute("src", images[imageIndex]);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,5 @@
+button{
+  width: 378;
+  height: 378;
+  background: blue;
+}
No results found