I got the code from a youtuber. I have no problem sharing it. And from the tutorial it's supposed to work online. The user didn't specify squarespace but I assumed it would work there too. This is something I'm looking into creating for my site and a rep for squarespace told me this was the place to go to get that kind of help.
Below are written codes.
Thanks for the help!
/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title> Random Image </title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="index.css"/>
<script src="index.js"></script>
</head> <body>
<div id="container">
<div id="inner_container">
<img id="image_shower"/> </div>
<div id="button_container">
<button onclick="get_random_image()"> <i class="fas fa-random"></i> </button>
/index.js
// Get all the images image_array = [
'2.jpg', '3.jpg', '4.jpg', '5.jpg' '6.jpg' '7`.jpg'
]
function get_random_image(){
// Get a random index
random_index = Math.floor(Math.random() * image_array.length);
// Get an image at the random_index selected_image = image_array[random_index]
// Display the image
document.getElementById('image_shower').src = `./images/${selected_image}` }
/index.css
body{
background-color: #EDF2F4;
display: flex; justify-content: center; align-items: center;
}
#container{ width: 50%; height: 600px;
border-radius: 5px; }
#inner_container{ width: 100%; height: 80%;
box-shadow: 0px 0px 36px -22px #2B2D42; float: left;
margin-bottom: 33px;
}
img{
width: 100%; height: 100%; border-radius: 10px;
}
#button_container{ width: 100%;
height: 50px;
display: flex; justify-content: center; align-items: center;
}
button{ width: 25%; height: 90%;
font-size: 20px; color: white; border: none; outline: none; cursor: pointer;
border-radius: 5px;
background-color: #EF233C; }
button:hover{
transition: 0.05s;
background-color: #D90429; transform: rotateZ(-10deg); box-shadow: 0 0 30px -10px #D90429;
}
button:active{
transform: translateY(20px); transform: rotateZ(10deg);
}