Created
March 17, 2023 07:35
-
-
Save LaeLita/be73b3c2aa38aa82aff3b06a39ecde7c to your computer and use it in GitHub Desktop.
KKxeREz
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
| <html> | |
| <head> | |
| <title>Random Pondpony Generator</title> | |
| <link rel="stylesheet" href="assets/stylesheets/app.css"> | |
| </head> | |
| <body> | |
| <header class="flex"> | |
| <h1>Random Pondpony Generator</h1> | |
| <button>Generate Random Pond</button> | |
| </header> | |
| <section class="flex"> | |
| <img src=""> | |
| </section> | |
| <script src="assets/scripts/app.js"></script> | |
| </body> | |
| </html> |
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
| const imageArray = [ | |
| "https://f2.toyhou.se/file/f2-toyhou-se/images/47129656_OX75mvp2LlHxhgD.jpg", | |
| "https://f2.toyhou.se/file/f2-toyhou-se/images/58142838_7BrTdgtIkzi5f2G.png", | |
| "https://f2.toyhou.se/file/f2-toyhou-se/images/58142267_1Itp9xjFdHDxRQi.png" | |
| ]; | |
| const image = document.querySelector("img"); | |
| const button = document.querySelector("button"); | |
| window.onload = () => generateRandomPicture(imageArray); | |
| button.addEventListener("click", () => generateRandomPicture(imageArray)); | |
| function generateRandomPicture(array){ | |
| let randomNum = Math.floor(Math.random() * array.length); | |
| image.setAttribute("src", array[randomNum]); | |
| } |
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
| html, body { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| header { | |
| width: 100%; | |
| padding-bottom: 25px; | |
| flex-direction: column; | |
| } | |
| img { | |
| width: 70%; | |
| } | |
| .flex { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment