Storing Code Fragments On AWS S3

We created some HTML code that lets us feed the turtle, and in this code, we used an image that we uploaded to AWS S3 in a public bucket. You might have noticed, though, that reading the code directly from there was quite inconvenient due to the large number of styles.

This leads us to the idea that we can also upload certain code snippets to AWS S3, just like we do with images. For example, in our case, it would be really convenient to upload CSS styles for our HTML pages or applications to AWS, helping us keep the code cleaner and more organized.

Let's take a look at the style file I want to upload to the storage:

index.css

.greeting {

font-size: 24px;

margin-top: 20px;

font-weight: bold;

text-align: center;

}

.turtle-image {

display: block;

margin: 20px auto;

width: 30%;

max-width: 300px;

height: auto;

}

.button {

background-color: #4caf50;

border: none;

color: white;

padding: 10px 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 10px;

cursor: pointer;

border-radius: 12px;

transition: transform 0.3s ease, background-color 0.3s ease;

}

.button:hover {

transform: scale(1.05);

background-color: #367b37;

}

.button.ignore {

background-color: #f44336;

}

.button.ignore:hover {

background-color: #d32f2f;

To add a file with styles to AWS S3, we first need to create the file and upload it to our public bucket:

To apply these CSS styles in your HTML code, you just need to use a straightforward syntax:

html
<link rel='stylesheet' href='link to your CSS styles here'>

In the case of linking to our styles, this line will look like this:

html
<link rel='stylesheet' href='https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css'>

Let’s take a look at how much our code will be reduced after these changes and how it will look now:

index.html

<head>

<title>Greeting Turtle</title>

</head>

<body>

<div class="greeting">Hello, I'm a turtle, I'm very hungry</div>

<img

src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/turtle.png"

alt="Hungry Turtle"

class="turtle-image"

<button class="button ignore">Ignore</button>

</div>

<p>Thank you very much!</p>

</div>

</div>

let feedModal = document.getElementById("feedModal");

let ignoreModal = document.getElementById("ignoreModal");

let btnFeed = document.getElementsByClassName("feed")[0];

let btnIgnore = document.getElementsByClassName("ignore")[0];

let spans = document.getElementsByClassName("close");

btnFeed.onclick = function () {

feedModal.style.display = "block";

};

btnIgnore.onclick = function () {

ignoreModal.style.display = "block";

};

for (var i = 0; i < spans.length; i++) {

spans[i].onclick = function () {

feedModal.style.display = "none";

ignoreModal.style.display = "none";

};

}

window.onclick = function (event) {

if (event.target == feedModal || event.target == ignoreModal) {

feedModal.style.display = "none";

ignoreModal.style.display = "none";

}

};

</script>

</body>

If you click and follow this link, you'll see the contents of this file, specifically the styles I wrote earlier. This way, both we and the visitors to our website can view the styles stored on AWS and may want to borrow them from us.

It's also worth noting that we can upload JavaScript scripts to S3. While this is not the best practice because scripts often require editing and working with them, in our case, we are learning, so let’s go ahead and do it to further streamline our code!

Below is the script we'll be uploading to our public bucket:

script.js

let feedModal = document.getElementById("feedModal");

let ignoreModal = document.getElementById("ignoreModal");

let btnFeed = document.getElementsByClassName("feed")[0];

let btnIgnore = document.getElementsByClassName("ignore")[0];

let spans = document.getElementsByClassName("close");

btnFeed.onclick = function () {

feedModal.style.display = "block";

};

btnIgnore.onclick = function () {

ignoreModal.style.display = "block";

};

for (var i = 0; i < spans.length; i++) {

spans[i].onclick = function () {

feedModal.style.display = "none";

ignoreModal.style.display = "none";

};

}

window.onclick = function (event) {

if (event.target == feedModal || event.target == ignoreModal) {

feedModal.style.display = "none";

ignoreModal.style.display = "none";

}

};

Now, we need to upload the JavaScript script file to our public bucket:

Now, we need to use the following syntax to add the script to the code via the link:

javascript
<script src="https://content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>

After adding the script from AWS S3, our code for the turtle will look like this:

index.html

<head>

<title>Greeting Turtle</title>

</head>

<body>

<div class="greeting">Hello, I'm a turtle, I'm very hungry</div>

<img

src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/turtle.png"

alt="Hungry Turtle"

class="turtle-image"

<button class="button ignore">Ignore</button>

</div>

<p>Thank you very much!</p>

</div>

</div>

</body>

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 5

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat