-
-
Save cferdinandi/dc0686a396cc2a2d2cb7e295b4d2a62c to your computer and use it in GitHub Desktop.
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 | |
| let monsters = [ | |
| 'monster1', | |
| 'monster2', | |
| 'monster3', | |
| 'monster4', | |
| 'monster5', | |
| 'monster6', | |
| 'monster7', | |
| 'monster8', | |
| 'monster9', | |
| 'monster10', | |
| 'monster11', | |
| 'sock' | |
| ]; | |
| // 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Oops, you found a sock!</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" type="text/css" href="styles.css"> | |
| </head> | |
| <body> | |
| <p><img class="img-full" alt="" src="https://media.giphy.com/media/13zUNhE9WZspMc/giphy.gif"></p> | |
| <h1>Oops, you found a sock!</h1> | |
| <p> | |
| <a class="btn" href="index.html">Play Again</a> | |
| </p> | |
| </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 width="91" height="94" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-monster6"><title id="title-monster6">Monster 6</title><g fill-rule="nonzero" fill="#34ac52"><path d="M87.686 89.544c3.68.617 4.199-2.318 0-2.164-4.2.155-5.118.465-7.665 2.473C82 79.978 83.918 64.761 57.003 63.379c7.257-12.633 18.359-32.117 22.405-40.062 3.043-5.74 11.186-11.213 9.42-19.045-.695-3.013-2.317-5.794-2.549 0-.232 5.793-5.497 9.717-12.531 10.137-6.868.421-18.878.936-30.389 1.451 0 0-11.109.463-23.161-.463a38.571 38.571 0 0 0-.692-.048h.021C15.502 14.866 8.91 10.231 9.424 5.183c.514-5.048-1.907-4.836-2.987 0-1.957 8.764 5.908 13.68 8.431 18.324 1.838 3.341 14.396 26.676 22.298 40.831C13.07 62.762 8.832 74.902 8.291 88.308c-1.297-.813-2.307-1.113-3.141-1.391-4.173-1.388-4.944 1.854-1.545 2.009 3.4.154 2.009 1.545-.463 2.008-4.646.872-4.017 4.172 1.082 2.688 5.099-1.483 11.742-1.915 14.678-1.606 2.936.31 3.244-1.391.772-2.162-2.472-.773-4.683-1.065-8.961-.465-.148-20.689 15.676-22.154 28.41-21.567 2.089 3.692 3.639 6.332 4.236 7.133 2.767 3.708 4.417 4.867 6.967 0 0 0 1.779-3.066 4.479-7.754 13.311.224 27.519 6.067 22.037 22.652-4.326-.772-6.335-.772-8.344 0-2.009.772-2.163 3.708 1.699 2.472 3.863-1.236 12.825-.154 16.533 1.082 3.708 1.236 4.381-.927.955-2.009-3.427-1.082-3.68-2.472.001-1.854zM39.409 32.727zm-.4.046l.218-.026-.218.026zm18.558 1.625zm.528.08zm1.538.101zm.518-.012zm6.506-2.51zm-1.77-11.096zm-1.615.077zM36.09 22.625l-.044-.008.044.008zm-.128-.022l-.058-.01.058.01zm-.138-.024l-.071-.013.071.013zm-.147-.027a8.116 8.116 0 0 0-.094-.018c.031.007.063.012.094.018zm-.145-.027c-.422-.08-.942-.181-1.521-.277.579.096 1.099.197 1.521.277zm-1.521-.277l-.23-.038.23.038zm-.248-.04l-.224-.035.224.035zm-.245-.039a61.749 61.749 0 0 0-.228-.033l.228.033zm-.247-.036l-.246-.033.246.033zm-.677-.085zm-.678-.063zm-.322-.021zm-.349-.015zm-.344-.007zm-.679.016zm-.308.022zm-.34.037a6.583 6.583 0 0 0-.251.037c.083-.013.166-.026.251-.037zm-.314.047zm-.614.139zm-.269.083zm-.291.11zm-.262.122zm5.056 11.171l.253-.001c-.692-1.048-1.444-2.077-2.372-2.314-1.175-.301-.331-.425-1.188.245-.187.146-.363.411-.532.741.53.458 1.099.773 1.692.981-1.761-.617-3.302-2.177-4.26-5.576-.799-2.829-.153-4.353 1.125-5.125.721.94 1.635 1.855 2.271 2.582.579-.525 1.8-2.944 2.728-3.176.144.016.285.033.426.051 1.267.561 1.82 4.257 2.876 5.132 1.222-1.282 1.847-2.876 2.764-4.25l-.107-.015a154.166 154.166 0 0 0 2.195.284c.301.469.612.934.86 1.439.432.881.483 1.898 1.244 2.524.894-1.029 1.79-2.254 2.479-3.514.467.032.934.06 1.399.082h-.004c.683 1.667 1.118 3.591 2.759 4.575 1.144-1.346 1.792-3.074 2.569-4.635a25.522 25.522 0 0 0 2.353-.299h-.001c.951 1.685 2.148 3.67 3.399 3.834.381-2.06 2.471-3.523 2.908-5.7a29.016 29.016 0 0 1 .806-.202c.844 1.391.37 4.896 2.026 5.023.466.036 1.801-1.564 2.136-1.917.802-.845 1.319-1.769 1.822-2.725-.709-.498-1.599-.733-2.614-.774 2.48.1 4.214 1.36 4.38 4.771.11 2.255-.642 4.177-1.941 5.648.102-.115.2-.232.295-.353-.221-.317-.479-.599-.824-.628-1.063-.091-1.724 1.466-2.203 3.052.293-.146.576-.306.849-.479-1.119.708-2.42 1.198-3.812 1.438-.631-1.001-1.214-2.107-2.065-2.656-1.274-.819-1.12-.117-1.566 1.413a9.95 9.95 0 0 1-.437 1.23c-.27-.047-.54-.103-.81-.168a51.637 51.637 0 0 0-2.945-.624h.002c-.604-.829-1.216-1.5-2.163-2.297-.6.386-1.007 1.029-1.356 1.759h.004a65.933 65.933 0 0 0-4.784-.423h.007c-.259-.48-.493-.94-.699-1.341-.357.168-.675.681-.993 1.279-1.49-.031-2.858.003-4.024.104-.417-.874-.848-1.713-1.411-2.005-.7.451-.452.917-.823 1.561-.165.287-.351.582-.551.876l.018-.003c-1.337.278-2.77.589-4.16.576zm-.06-.001zm-.261-.008c-.071-.003-.142-.008-.213-.013.071.005.141.01.213.013zm-.249-.015zm-.55-.066zm-.253-.045zm11.542-10.049L43 23.5l.049.005zm-1.116-.117l-.151-.017.151.017zm8.827.415h-.006.006zm-.656.022h-.015.015zm-.659.011h-.027.027zm-.669.001h-.033.033zm-.672-.009l-.039-.001a.495.495 0 0 0 .039.001zm-.683-.018l-.031-.001.031.001zm9.307-.949l-.201.061.201-.061zm-.679.197l-.224.059.224-.059zm-.737.182l-.182.041.182-.041zm2.062-.598zm.852-.307zm8.781 9.388zm-.396.375zm-.375.315zm-.39.292zm-13.76.612l-.048-.007.048.007zm-7.503-.71c.056.001.11.003.165.006l-.165-.006zm-5.712.183zm-.701.107l-.017.003.017-.003zm-.366.068zm-.379.074a.65.65 0 0 0-.038.008c.012-.004.026-.006.038-.008zm9.659 29.559a5.347 5.347 0 0 1-3.582-9.315c.077.035.153.072.231.105 1.187.503 2.266 1.062 3.564 1.132.943.051 2.368-.33 3.595-1.02a5.346 5.346 0 0 1-3.808 9.098z"/><circle cx="47.084" cy="57.251" r="1.545"/></g></svg> |
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
| // The monsters and socks | |
| let monsters = [ | |
| { | |
| name: 'monster1', | |
| alt: 'A yellow monster with a curly nose' | |
| }, | |
| { | |
| name: 'monster2', | |
| alt: 'A yellow monster with a wide head, one eye, and an underbite' | |
| }, | |
| { | |
| name: 'monster3', | |
| alt: 'A green monster with eyes on stalks and a mouth at the top of its head' | |
| }, | |
| { | |
| name: 'monster4', | |
| alt: 'A red monster with horns, four eyes, and no legs' | |
| }, | |
| { | |
| name: 'monster5', | |
| alt: 'A green monster with three horns on each side of its head, one eye, and a sad look on its face' | |
| }, | |
| { | |
| name: 'monster6', | |
| alt: 'A green, triangle-shaped monster with sharp teeth, walking upside-down on its hands' | |
| }, | |
| { | |
| name: 'monster7', | |
| alt: 'A purple monster with a single, sad looking eye and tentacles for arms' | |
| }, | |
| { | |
| name: 'monster8', | |
| alt: 'A purple, oval-shaped monster with one eye and no arms or legs' | |
| }, | |
| { | |
| name: 'monster9', | |
| alt: 'A blue, insect-like monster, with bug eyes, three body sections, and a pair of wings' | |
| }, | |
| { | |
| name: 'monster10', | |
| alt: 'A blue monster with lopsided eyes on stalks and long, sharp teeth' | |
| }, | |
| { | |
| name: 'monster11', | |
| alt: 'A furry gray monster with long arms and a happy face' | |
| }, | |
| { | |
| name: 'sock', | |
| alt: 'A pair of athletic socks' | |
| } | |
| ]; |
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>You Won!</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" type="text/css" href="styles.css"> | |
| </head> | |
| <body> | |
| <p><img class="img-full" alt="" src="https://media.giphy.com/media/1242bJFCbb3FxC/giphy.gif"></p> | |
| <h1>You won!</h1> | |
| <p>You found all of the monsters. Congrats!</p> | |
| <p> | |
| <a class="btn" href="index.html">Play Again</a> | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment