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">
@@ -95,18 +104,43 @@
 // Get the elements with class="column"
 var elements = document.getElementsByClassName("column");
 
-	// Declare a "loop" variable
+// Declare a loop variable
 var i;
 
 // Full-width images
 function one() {
     for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "100%";  // IE10
     elements[i].style.flex = "100%";
   }
 }
 
-	one();
+// Two images side by side
+function two() {
+  for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "50%";  // IE10
+    elements[i].style.flex = "50%";
+  }
+}
 
+// 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>