danielrobertson/index.html

## index.html
<!DOCTYPE html>
<html>
  <script>
    const showTiles = function(tag) {
      // reset any previously hidden tiles
      if (tag !== "all") {
        showTiles("all");
      }

      // get all HTML elements with css class tile
      const tiles = document.getElementsByClassName("tiles");
      for (let tile of tiles) {
        if (tag === "all") {
          // overwrite css class if all
          tile.className = "tiles";
        } else {
          const val = tile.attributes.alt.value;
          if (val !== tag) {
            // filter out tiles that are not the tag we want
            tile.className += " hidden";
          }
        }
      }
    };
  </script>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial;
    }

    .header {
      text-align: center;
      padding: 32px;
    }

    .row {
      display: -ms-flexbox; /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap; /* IE10 */
      flex-wrap: wrap;
      padding: 0 4px;
    }

    .tiles {
      /* flex-grow: 1; */
      padding: 5px 15px;
      display: flex;
      text-align: center;
      vertical-align: middle;
    }

    .hidden {
      display: none;
    }

    /* Create four equal columns that sits next to each other */
    .column {
      -ms-flex: 25%; /* IE10 */
      flex: 25%;
      max-width: 25%;
      padding: 0 4px;
    }

    .column img {
      margin-top: 8px;
      vertical-align: middle;
      width: 100%;
    }

    /* Responsive layout - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
      .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
      }
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
      }
    }
  </style>
  <body>
    <!-- Header -->
    <div class="header">
      <h1>Responsive Image Grid</h1>
      <p>Resize the browser window to see the responsive effect.</p>
    </div>

    <div>
      <div onclick="showTiles('all')">
        All
      </div>
      <div onclick="showTiles('prayer')">
        Prayer
      </div>
      <div onclick="showTiles('men')">
        Men
      </div>
      <div onclick="showTiles('women')">
        Women
      </div>
    </div>

    <!-- Photo Grid -->
    <div class="row">
      <div class="tiles" alt="prayer">
        <img src="https://picsum.photos/200" />
        Prayer
      </div>
      <div class="tiles" alt="women">
        <img src="https://picsum.photos/200" />
        Women♀
      </div>
      <div class="tiles" alt="men">
        <img src="https://picsum.photos/200" />
        Men
      </div>
      <div class="tiles" alt="men">
        <img src="https://picsum.photos/200" />
        Men
      </div>
      <div class="tiles" alt="prayer">
        <img src="https://picsum.photos/200" />
        🙏🏻Prayer
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<script>
	const showTiles = function(tag) {
	// reset any previously hidden tiles
	if (tag !== "all") {
	showTiles("all");
	}

	// get all HTML elements with css class tile
	const tiles = document.getElementsByClassName("tiles");
	for (let tile of tiles) {
	if (tag === "all") {
	// overwrite css class if all
	tile.className = "tiles";
	} else {
	const val = tile.attributes.alt.value;
	if (val !== tag) {
	// filter out tiles that are not the tag we want
	tile.className += " hidden";
	}
	}
	}
	};
	</script>
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	font-family: Arial;
	}

	.header {
	text-align: center;
	padding: 32px;
	}

	.row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	padding: 0 4px;
	}

	.tiles {
	/* flex-grow: 1; */
	padding: 5px 15px;
	display: flex;
	text-align: center;
	vertical-align: middle;
	}

	.hidden {
	display: none;
	}

	/* Create four equal columns that sits next to each other */
	.column {
	-ms-flex: 25%; /* IE10 */
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
	}

	.column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
	}

	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 800px) {
	.column {
	-ms-flex: 50%;
	flex: 50%;
	max-width: 50%;
	}
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	.column {
	-ms-flex: 100%;
	flex: 100%;
	max-width: 100%;
	}
	}
	</style>
	<body>
	<!-- Header -->
	<div class="header">
	<h1>Responsive Image Grid</h1>
	<p>Resize the browser window to see the responsive effect.</p>
	</div>

	<div>
	<div onclick="showTiles('all')">
	All
	</div>
	<div onclick="showTiles('prayer')">
	Prayer
	</div>
	<div onclick="showTiles('men')">
	Men
	</div>
	<div onclick="showTiles('women')">
	Women
	</div>
	</div>

	<!-- Photo Grid -->
	<div class="row">
	<div class="tiles" alt="prayer">
	<img src="https://picsum.photos/200" />
	Prayer
	</div>
	<div class="tiles" alt="women">
	<img src="https://picsum.photos/200" />
	Women♀
	</div>
	<div class="tiles" alt="men">
	<img src="https://picsum.photos/200" />
	Men
	</div>
	<div class="tiles" alt="men">
	<img src="https://picsum.photos/200" />
	Men
	</div>
	<div class="tiles" alt="prayer">
	<img src="https://picsum.photos/200" />
	🙏🏻Prayer
	</div>
	</div>
	</body>
	</html>