Jump to content

Coding CSS, HTML and Javascript

Recommended Posts

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!

Link to comment

Thanks for posting your question, it's going to be rather tricky for someone on the forum to help with such a specialist task, especially without specifics on the code you're using or the website URL. Can you provide anything else? Where did you get the custom code, and was it designed to work on Squarespace? Where have you put the code? Is this supposed to work on a live website linked to your desktop, I can't say that sounds like it would work online?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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);

}

Link to comment
On 9/23/2022 at 4:23 AM, Ziggy said:

Thanks for posting your question, it's going to be rather tricky for someone on the forum to help with such a specialist task, especially without specifics on the code you're using or the website URL. Can you provide anything else? Where did you get the custom code, and was it designed to work on Squarespace? Where have you put the code? Is this supposed to work on a live website linked to your desktop, I can't say that sounds like it would work online?

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);

}

Link to comment

Thanks for sharing this, how have you gone about adding this to your website?

This should give you a start on uploading, but I'm not referencing the image correctly, you'll have to upload those and reference them in the javascript file. Maybe best to do this via the same method as with the JS and CSS files described below. How you would do this from your desktop seems impossible to me for Squarespace.

The portion in the <head></head> tags should go in the page header code injection.

The portion in the <body></body> should go in a code block on the page.

The code under /index.js should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.js (this will need adding to the header code to reference correctly) (when you get the images uploaded this would need re-uploading and replacing)

The code under /index.css should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.css (this will need adding to the header code to reference correctly)

New Header code:

<script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="/s/index.css"/>
<script src="/s/index.js"></script>

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
12 hours ago, Ziggy said:

Thanks for sharing this, how have you gone about adding this to your website?

This should give you a start on uploading, but I'm not referencing the image correctly, you'll have to upload those and reference them in the javascript file. Maybe best to do this via the same method as with the JS and CSS files described below. How you would do this from your desktop seems impossible to me for Squarespace.

The portion in the <head></head> tags should go in the page header code injection.

The portion in the <body></body> should go in a code block on the page.

The code under /index.js should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.js (this will need adding to the header code to reference correctly) (when you get the images uploaded this would need re-uploading and replacing)

The code under /index.css should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.css (this will need adding to the header code to reference correctly)

New Header code:

<script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="/s/index.css"/>
<script src="/s/index.js"></script>

 

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?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.