Last active
November 7, 2022 19:53
-
-
Save angusgrant/f05c09274f50a17f9d4a018b04f79513 to your computer and use it in GitHub Desktop.
vanilla JS week 4 exersise 1
This file contains 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Monsters!</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; | |
| } | |
| /** | |
| * A simple grid layout | |
| */ | |
| .row { | |
| display: grid; | |
| grid-template-columns: auto auto auto; | |
| text-align: center; | |
| } | |
| .grid { | |
| min-height: 6em; | |
| padding: 1em; | |
| } | |
| /** | |
| * Make sure images scale | |
| */ | |
| img { | |
| height: auto; | |
| max-width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Monsters!</h1> | |
| <div id="app"></div> | |
| <footer> | |
| <hr> | |
| <p class="text-small text-muted">Icons by <a href="https://thenounproject.com/term/door/311732/">Jamie Dickinson</a>, <a href="https://thenounproject.com/term/monster/184225/">Nicky Knicky</a>, <a href="https://thenounproject.com/term/monster/1510400/">Alvaro Cabrera</a>, <a href="https://thenounproject.com/term/monster/28460/">Eliricon</a>, <a href="https://thenounproject.com/term/monster/82823/">April Yang</a>, <a href="https://thenounproject.com/term/monster/1062009/">tk66</a>, <a href="https://thenounproject.com/term/monster/24990/">Alex WaZa</a>, <a href="https://thenounproject.com/term/monster/37212/">Husein Aziz</a>, <a href="https://thenounproject.com/term/monster/2236082">iconcheese</a>, and <a href="https://thenounproject.com/term/socks/38451/">Yazmin Alanis</a>.</p> | |
| </footer> | |
| <script> | |
| // The monsters and socks if I wanted to spend longer on this problem I would have converted it to an array of objects | |
| let monsters = [ | |
| '<img src="monster1.svg" alt="yellow monster small one eye">', | |
| '<img src="monster2.svg" alt="yellow monster large one eye">', | |
| '<img src="monster3.svg" alt="green monster two eyes looks like a venus fly trap">', | |
| '<img src="monster4.svg" alt="red monster four arms like a tree truck">', | |
| '<img src="monster5.svg" alt="green monster small one eye">', | |
| '<img src="monster6.svg" alt="green monster large kinda triangle shaped">', | |
| '<img src="monster7.svg" alt="purple monster with one eye and two tentacles">', | |
| '<img src="monster8.svg" alt="purple monster small one eye no arms!">', | |
| '<img src="monster9.svg" alt="blue monster monster bug like with wings">', | |
| '<img src="monster10.svg" alt="blue monster with eyes on stalks">', | |
| '<img src="monster11.svg" alt="grey monster looks a bit like chewbacca from star wars">', | |
| '<img src="sock.svg" alt="this is just a couple of silver / white socks">' | |
| ]; | |
| //put array of images in a random order and update the monsters var! | |
| monsters = shuffle(monsters); | |
| const siteAppendPoint = document.querySelector('#app'); | |
| siteAppendPoint.innerHTML = `<div class="row"> | |
| ${monsters.map(function(monster) { | |
| return `<div class="grid">${monster}</div>` | |
| }).join('')}; | |
| </div>` | |
| function shuffle (array) { | |
| let currentIndex = array.length; | |
| let temporaryValue, randomIndex; | |
| // While there remain elements to shuffle... | |
| while (0 !== currentIndex) { | |
| // Pick a remaining element... | |
| randomIndex = Math.floor(Math.random() * currentIndex); | |
| currentIndex -= 1; | |
| // And swap it with the current element. | |
| temporaryValue = array[currentIndex]; | |
| array[currentIndex] = array[randomIndex]; | |
| array[randomIndex] = temporaryValue; | |
| } | |
| return array; | |
| } | |
| // Your code goes here... | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| <svg xmlns="http://www.w3.org/2000/svg" width="83" height="90" aria-labelledby="title-sock"><title id="title-sock">Sock!</title><g fill="#808080" fill-rule="nonzero"><path d="M45.884 89.484c-.644 0-1.29-.048-1.926-.143-9.232-1.383-25.625-6.705-26.987-7.494a10.35 10.35 0 0 1-4.849-6.337 10.359 10.359 0 0 1 1.053-7.911c2.877-4.964 5.444-5.177 12.302-5.746.333-.023 7.74-.555 12.482-.555.628 0 1.178.011 1.658.03 3.48-6.343 16.778-31.459 17.894-33.936.508-1.122 2.048-4.529 5.549-4.529 1.998 0 4 1.065 6.534 2.415.463.247.944.503 1.449.765 1.888.979 3.479 1.706 4.885 2.347 4.83 2.203 8.021 3.657 5.289 9.708-3.05 6.757-23.235 43.483-24.165 45.043a13.068 13.068 0 0 1-11.168 6.343zm-7.926-24.489c-4.608 0-12.122.535-12.197.542-6.738.557-7.542.727-9.39 3.915a6.683 6.683 0 0 0-.68 5.107 6.681 6.681 0 0 0 3.13 4.092c1.071.511 16.59 5.675 25.682 7.037.454.066.918.102 1.38.102a9.356 9.356 0 0 0 7.995-4.541c.924-1.55 20.951-37.984 23.971-44.672 1.217-2.696 1.217-2.696-3.455-4.826-1.374-.626-3.084-1.406-5.055-2.43-.516-.267-1.01-.53-1.483-.782-1.998-1.063-3.722-1.981-4.798-1.981-.334 0-1.117 0-2.182 2.355-1.266 2.807-16.288 31.161-18.608 35.248a1.821 1.821 0 0 1-1.811.923c-.545-.061-1.387-.089-2.499-.089z"/><path d="M77.939 40.438a.728.728 0 0 1-.316-.072L57.807 31.05a.744.744 0 0 1 .631-1.347l19.818 9.317a.745.745 0 0 1-.317 1.418z"/><path d="M62.977 33.241a.744.744 0 0 1-.671-1.066l3.336-6.958a.745.745 0 1 1 1.341.643l-3.336 6.958a.743.743 0 0 1-.67.423zM66.69 35.08a.743.743 0 0 1-.67-1.065l3.337-6.958a.743.743 0 1 1 1.341.643l-3.337 6.958a.744.744 0 0 1-.671.422zM70.25 36.719a.744.744 0 0 1-.671-1.066l3.337-6.958a.748.748 0 0 1 .993-.349c.37.178.526.622.349.993l-3.337 6.958a.747.747 0 0 1-.671.422zM73.687 38.014a.744.744 0 0 1-.671-1.066l3.337-6.958a.745.745 0 0 1 1.342.644l-3.337 6.958a.746.746 0 0 1-.671.422zM45.645 88.599c-1.555 0-3.19-.306-4.864-.91a.75.75 0 0 1-.43-.996l4.136-9.622a.746.746 0 0 1 .831-.434l11.608 2.368a.74.74 0 0 1 .539 1.01c-.143.35-3.612 8.584-11.82 8.584zm-3.609-2.061c1.246.38 2.457.574 3.608.574 5.767 0 8.976-4.865 10.041-6.844l-10.072-2.053-3.577 8.323zM18.228 81.206a.726.726 0 0 1-.368-.097l-.331-.187a9.278 9.278 0 0 1-4.341-5.674 9.251 9.251 0 0 1 .941-7.07 9.353 9.353 0 0 1 8.072-4.646c.433 0 .87.031 1.299.092a.748.748 0 0 1 .433.223 10.308 10.308 0 0 1 2.887 7.165c0 4.986-3.556 9.269-8.456 10.182a.695.695 0 0 1-.136.012zm3.973-16.185a7.865 7.865 0 0 0-6.785 3.904 7.776 7.776 0 0 0-.791 5.942 7.785 7.785 0 0 0 3.643 4.763l.085.048a8.868 8.868 0 0 0 6.979-8.666 8.826 8.826 0 0 0-2.297-5.946 7.518 7.518 0 0 0-.834-.045z"/><path d="M31.549 58.037a12.944 12.944 0 0 1-6.393-1.681C17.046 51.757 3.651 40.904 2.66 39.679a10.351 10.351 0 0 1-2.252-7.657 10.352 10.352 0 0 1 3.822-7.005c4.465-3.601 6.938-2.88 13.543-.951.433.131 9.294 2.833 13.386 4.585 5.519-4.666 26.943-23.337 28.884-25.256 1.839-1.818 3.458-2.643 5.204-2.57 2.639.101 4.49 2.236 6.832 4.938.343.395.7.806 1.074 1.229 1.409 1.59 2.636 2.84 3.717 3.942 3.72 3.789 6.177 6.292 1.455 10.96-1.093 1.081-3.362 3.133-6.744 6.099a1.846 1.846 0 0 1-2.606-.172 1.844 1.844 0 0 1 .171-2.605c3.326-2.917 5.541-4.918 6.582-5.948 2.104-2.08 2.104-2.08-1.493-5.746-1.058-1.078-2.374-2.418-3.846-4.08-.384-.434-.748-.854-1.1-1.259-1.688-1.946-3.146-3.627-4.183-3.667-.762-.016-1.756.804-2.468 1.506-2.2 2.175-26.396 23.249-30.02 26.224a1.843 1.843 0 0 1-2.021.213c-2.433-1.259-10.843-3.93-13.879-4.854-6.489-1.893-7.301-2.026-10.17.287a6.687 6.687 0 0 0-2.468 4.522 6.685 6.685 0 0 0 1.453 4.942c.817.861 13.454 11.254 21.447 15.785.394.226.815.424 1.253.593a9.352 9.352 0 0 0 9.089-1.372c.439-.344 5.428-4.532 12.262-10.338a1.847 1.847 0 1 1 2.392 2.815c-6.134 5.211-11.783 9.965-12.371 10.427a13.041 13.041 0 0 1-8.056 2.771z"/><path d="M74.694 22.952a.739.739 0 0 1-.537-.229L59.002 6.915a.744.744 0 0 1 1.072-1.029l15.155 15.808a.744.744 0 0 1-.535 1.258z"/><path d="M63.309 10.866a.742.742 0 0 1-.511-1.284l5.61-5.298a.743.743 0 1 1 1.022 1.081l-5.61 5.298a.748.748 0 0 1-.511.203zM66.117 13.914a.745.745 0 0 1-.511-1.285l5.609-5.296a.745.745 0 0 1 1.023 1.082l-5.61 5.297a.745.745 0 0 1-.511.202zM68.852 16.723a.746.746 0 0 1-.512-1.285l5.61-5.297a.743.743 0 1 1 1.022 1.082l-5.61 5.296a.74.74 0 0 1-.51.204zM71.593 19.165a.745.745 0 0 1-.511-1.285l5.611-5.297a.744.744 0 0 1 1.023 1.083l-5.611 5.296a.748.748 0 0 1-.512.203zM31.048 57.028c-2.912 0-5.69-1.131-8.258-3.358a.737.737 0 0 1-.256-.531.738.738 0 0 1 .21-.549l7.312-7.499a.747.747 0 0 1 .933-.106l9.986 6.378a.743.743 0 0 1 .14 1.137c-.175.185-4.338 4.528-10.067 4.528zm-6.674-3.978c2.114 1.653 4.355 2.489 6.674 2.489 3.855 0 7-2.303 8.317-3.439l-8.667-5.536-6.324 6.486zM6.065 39.739c-.626 0-1.256-.058-1.873-.171a.747.747 0 0 1-.443-.264l-.238-.293a9.267 9.267 0 0 1-2.017-6.851 9.255 9.255 0 0 1 3.417-6.262c2.888-2.329 7.153-2.681 10.38-.89a.74.74 0 0 1 .324.363 10.321 10.321 0 0 1 .124 7.726c-1.527 3.972-5.415 6.642-9.674 6.642zm-1.337-1.591c.442.068.891.102 1.337.102 3.647 0 6.978-2.285 8.286-5.688a8.829 8.829 0 0 0-.01-6.375 7.896 7.896 0 0 0-3.59-.865c-1.803 0-3.5.6-4.906 1.733a7.784 7.784 0 0 0-2.872 5.264 7.785 7.785 0 0 0 1.691 5.753l.064.076z"/></g></svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment