Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Armazenando Fragmentos de Código no AWS S3 | Visão Geral do AWS S3
Introdução à Computação em Nuvem

book
Armazenando Fragmentos de Código no AWS S3

In the previous chapter, we wrote HTML code that allows us to feed the turtle, and in this code, we used an image that we uploaded to AWS S3 in a public bucket. But you may have noticed that reading the code from there was quite inconvenient due to the large number of styles.

I'm leading up to the fact that we can also upload certain code snippets to AWS S3, just like images. For example, in our case, it would be convenient to upload CSS styles for our HTML pages or applications to AWS in order to save space in the code.

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

css

index.css

copy
.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:

No caso de vincular aos nossos estilos, esta linha ficará assim:

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

Vamos ver quanto nosso código será reduzido após nossas mudanças e como ele ficará agora:

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

index.html

copy
<link rel='stylesheet' href='https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/styles_for_turtle.css'>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Greeting Turtle</title>
</head>
<body>
<div class="greeting">Hello, I'm a turtle, I'm very hungry</div>

<!--Here we insert a link to the picture from AWS S3.-->
<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"
/>

<div class="buttons-container">
<button class="button feed">Feed</button>
<button class="button ignore">Ignore</button>
</div>

<div id="feedModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Thank you very much!</p>
</div>
</div>

<div id="ignoreModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Why?</p>
</div>
</div>

<script>
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.

javascript
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";
}
};
js

script.js

copy
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";
}
};
javascript
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 use the following syntax to add the script to the code via the link:

Após adicionar o script do AWS S3, nosso código para a tartaruga ficará assim:

Nota

A propósito, você pode mais uma vez visualizar o script diretamente via o 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>
html

index.html

copy
<link rel='stylesheet' href='https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/styles_for_turtle.css'>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Greeting Turtle</title>
</head>
<body>
<div class="greeting">Hello, I'm a turtle, I'm very hungry</div>

<!--Here we insert a link to the picture from AWS S3.-->
<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"
/>

<div class="buttons-container">
<button class="button feed">Feed</button>
<button class="button ignore">Ignore</button>
</div>

<div id="feedModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Thank you very much!</p>
</div>
</div>

<div id="ignoreModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Why?</p>
</div>
</div>

<script src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
</body>
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 5

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

We use cookies to make your experience better!
some-alt