pharaoriquil
-
Posts
4 -
Joined
-
Last visited
pharaoriquil's Achievements
-
Thanks for the input. I'm going to be honest and say it doesn't seem easy to understand. Is this the easiest way to create a custom image generator button on my squarespace website? Is there other codes I can use or other methods to simplify it?
-
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); }
-
pharaoriquil reacted to a post in a topic:
Coding CSS, HTML and Javascript
-
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); }
-
Good afternoon. I have custom codes (not created by me) that I would like to add my site. Specifically on a certain page. It contains javascript, CSS and HTML. The purpose of this custom code is to randomly generate images (saved on a folder in my desktop) at a click of a button. I've tried everything I could think of and nothing seems to be working. I should also note, I am not a coder. Any advice or help is appreciated!
