Last active
December 16, 2019 20:10
-
-
Save danielrobertson/20baa6e4b29503971dd519065e87578b to your computer and use it in GitHub Desktop.
Filter photos by tags on click
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment