almost finished

09/photos.html

@@ -64,6 +64,15 @@
     		<div class="vl"></div>
 			<div id="left">
 				<section id="photos">
+
+					<div class="header" id="myHeader">
+					  <h1>Image Grid</h1>
+					  <p>Click on the buttons to change the grid view.</p>
+					  <button class="btn" onclick="one()">1</button>
+					  <button class="btn active" onclick="two()">2</button>
+					  <button class="btn" onclick="four()">4</button>
+					</div>
+
 					<div class="row">
 					  <div class="column">
 					    <img src="./media/imgs/01-min.jpg">
@@ -92,21 +101,46 @@
 
 	</main>
 <script>
-	// Get the elements with class="column"
+// Get the elements with class="column"
-	var elements = document.getElementsByClassName("column");
+var elements = document.getElementsByClassName("column");
+
+// Declare a loop variable
+var i;
 
-	// Declare a "loop" variable
+// Full-width images
-	var i;
+function one() {
+    for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "100%";  // IE10
+    elements[i].style.flex = "100%";
+  }
+}
 
-	// Full-width images
+// Two images side by side
-	function one() {
+function two() {
-	  for (i = 0; i < elements.length; i++) {
+  for (i = 0; i < elements.length; i++) {
-	    elements[i].style.flex = "100%";
+    elements[i].style.msFlex = "50%";  // IE10
-	  }
+    elements[i].style.flex = "50%";
-	}
+  }
+}
 
-	one();
+// Four images side by side
+function four() {
+  for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "25%";  // IE10
+    elements[i].style.flex = "25%";
+  }
+}
 
+// Add active class to the current button (highlight it)
+var header = document.getElementById("myHeader");
+var btns = header.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}
 </script>
 </body>
 </html>