Skip to content

Instantly share code, notes, and snippets.

@LaeLita

LaeLita/index.html

Created March 17, 2023 06:10
Show Gist options
  • Save LaeLita/31123612934206e576186c81167ff795 to your computer and use it in GitHub Desktop.
Save LaeLita/31123612934206e576186c81167ff795 to your computer and use it in GitHub Desktop.
Download ZIP
VwGdxLM
Raw
index.html
<html>
<head>
<title>Random Picture Generator</title>
<link rel="stylesheet" href="assets/stylesheets/app.css">
</head>
<body>
<header class="flex">
<h1>Random Picture Generator</h1>
<button>Generate Random Picture</button>
</header>
<section class="flex">
<img src="">
</section>
<script src="assets/scripts/app.js"></script>
</body>
</html>
Raw
script.js
const imageArray = [
"https://wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/152886be-6012-488b-a814-edd59ba00ff7/dcqiv5b-ed63f07f-9d4e-4f0a-bbc5-6a37db06c13a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImV4cCI6MTY3OTAzMzkwMiwiaWF0IjoxNjc5MDMzMjkyLCJqdGkiOiI2NDE0MDNkNjQ5MmFjIiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMTUyODg2YmUtNjAxMi00ODhiLWE4MTQtZWRkNTliYTAwZmY3XC9kY3FpdjViLWVkNjNmMDdmLTlkNGUtNGYwYS1iYmM1LTZhMzdkYjA2YzEzYS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.CSquQSUVbPGRW-f4mgNDR5HOyY5OUmH7xPpwC0CsaIc&filename=laycie_registration_sheet_by_msmeppy_dcqiv5b.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]);
}
Raw
style.css
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