Web Assignment
Search for Cloud Storage
Then Select
Follow the instructions on the link to create a unique public cloud storage bucket.
First we will build our index.html page.
The index.html page is the default page that is served when you access most web servers.
Can either build locally with notepad or any text editor or use the cloud linux shell.
Cloud Linux shell instructions
Click on shell access
Create a directory for the website
john_iacovacci1@cloudshell:~ (cloud-project-examples)$ mkdir website
Open editor
Highlight the website directory
Right click on website directory and hit new file or first file icon
Type in the name of your page which should be index.html
index.html
=========================================================
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 24px
}
h1 {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 30px
}
</style>
<title>Google Cloud Development
</title>
</head>
<body>
<h1> Google Cloud Development Web Site </h1>
<img src="https://storage.googleapis.com/cloud-storage-exam/images/google.png" style="width:50%;"">
<P>Helping Google users learn cloud development</P>
<h2>Website Map</h2>
<ul>
<li><a href="https://cloud.google.com/?hl=en">Link to Google Cloud Home Page</a></li>
<li><a href="https://developers.google.com/community">Link to Google Developers Community</a></li>
<li><a href=”https://storage.googleapis.com/cloud-storage-exam/about.html
">About Google Cloud Development</a></li>
<li><a href="https://storage.googleapis.com/cloud-storage-exam/join.html
"> Google Student Developers Club</a></li>
</ul>
</body>
</html>
=========================================================
about.html
========================================================================
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 24px
}
p.solid {border-style: solid;border-width: thick;padding: 70px;}
body {background-color: lightblue;}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 18px
}
</style>
<title>Google Developers
</title>
</head>
<body>
<h1> Welcome to Google Cloud Developers </h1>
<img src="https://developers.google.com/static/homepage-assets/images/chromeos-logo.svg" style="width:30%;"">
<hr>
<p>Google Cloud Platform (GCP) is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its own products, like Google Search, YouTube, and Gmail.</p>
<p>At its core, GCP allows you to "rent" Google’s massive computing power, storage, and networking capabilities so you can build and run your own applications without having to buy or maintain physical servers.</p>
<h2>Core Service Categories</h2>
<ul>
<li>Compute Engine: Traditional virtual machines (VMs). You have full control over the OS.</li>
<li>Cloud Run: A "serverless" option where you just provide the code, and Google handles all the scaling and server management for you.</li>
<li>Cloud Storage: Good for "unstructured" data like images, videos, and backups.</li>
</ul>
</p>
</body>
</html>
=========================================================
join.html
=========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Name Validation Example</title>
<style>
body { background-color: lightblue; font-family: Verdana, sans-serif; }
h1 { color: blue; text-align: center; font-size: 24px; }
p { color: black; font-size: 18px; }
img { display: block; margin-left: auto; margin-right: auto; }
/* Styling for the status messages */
.message { font-size: 14px; color: #0044cc; font-weight: bold; height: 20px; margin-top: 5px; }
.error { color: #cc0000; }
/* Success Banner Style */
#success-banner {
display: none;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
padding: 15px;
text-align: center;
border-radius: 5px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<img src="https://storage.googleapis.com/cloud-storage-exam/images/google.png" alt="Google" width="300" height="300">
<h1>Google Developers Student Profile</h1>
<div id="success-banner">🎉 Form submitted successfully! Thank you for joining.</div>
<form name="myForm" id="entForm" action="contactus.php" method="post" onsubmit="return validateForm(event)">
<p>Student Name : </p>
<p><input type="text" name="my-name" id="student-name"></p>
<p>Major : </p>
<p><input type="text" name="my-major"></p>
<p>Email: </p>
<p><input type="text" name="my-email" id="email"></p>
<div id="ent-mess" class="message"></div>
<div id="err-mess" class="message error"></div>
<p>What do you want to do?</p>
<p><textarea name="my-comments" rows="5" cols="20">Your comments</textarea></p>
<p>Graduation Year :</p>
<p><input type="radio" name="my-grad" value="2026"> 2026</p>
<p><input type="radio" name="my-grad" value="2027"> 2027</p>
<p><input type="radio" name="my-grad" value="2028"> 2028</p>
<p><input type="radio" name="my-grad" value="2029"> 2029</p>
<p><input type="submit" value="Submit"></p>
</form>
<a href="https://developers.google.com/community/gdsc">Link to Google Student Developers Club</a><br>
<script>
const emailInp = document.getElementById('email');
const entMess = document.getElementById('ent-mess');
const errMess = document.getElementById('err-mess');
const successBanner = document.getElementById('success-banner');
const form = document.getElementById('entForm');
emailInp.addEventListener('mouseover', () => entMess.textContent = 'Use email format of name@site.com');
emailInp.addEventListener('mouseout', () => entMess.textContent = '');
function checkEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function validateForm(event) {
const name = document.getElementById('student-name').value;
const emailValue = emailInp.value;
// Reset styles/messages
errMess.textContent = '';
successBanner.style.display = 'none';
// Check Name
if (name.trim() === "") {
errMess.textContent = "Error: Name is required.";
return false;
}
// Check Email
if (!checkEmail(emailValue)) {
errMess.textContent = 'Error: Please enter a valid email address.';
return false;
}
/* NOTE: In a real environment, the form would refresh on submit.
To show the success message without a page reload for this demo,
we use event.preventDefault()
*/
event.preventDefault();
successBanner.style.display = 'block';
form.reset(); // Clear the form fields after success
return true;
}
</script>
</body>
</html>
=========================================================
WHEN COMPLETE
copy pages to your bucket : Note cloud-storage-exam is my bucket. This needs to be changed to the name of the bucket on your project.
gsutil cp index.html gs://cloud-storage-exam/
No comments:
Post a Comment