Search for a command to run...
Vincent is a Cloud DevOps Engineer with years of hands-on experience supporting, automating, and optimizing mission-critical deployments in Azure and AWS, leveraging configuration management, CI/CD, and DevOps processes. Strong background in Technical Operations and customer relations.
No comments yet. Be the first to comment.
Yo, keeping your AWS IAM setup locked down ain't easy. You could spend hours digging through users, roles, and policies, or you could let IAMGuard do the heavy lifting. This tool scans your AWS IAM setup, flags security risks, and drops clean reports...
Introduction Hey everyone! Want to dip your toes into cloud computing without feeling overwhelmed? Let’s build something cool: A serverless website uptime monitor using AWS. Imagine a tool that checks if a site’s up or down every 5 minutes, logs the ...
Struggling to manage your AWS resources effectively? You're not alone. But what if you could simplify tasks and boost collaboration directly within your chat platform? This step-by-step video demo unveils the power of ChatOps with Microsoft Teams for...
As a mentor, one of the most insightful questions I've recently received from a mentee revolves around the journey to career success. The inquiry delves into the intricate details of navigating through a professional landscape, and it sparked a thoug...
Hey everyone, I want to discuss AWS Elastic Beanstalk in this video. This video is designed to help you learn and deploy with AWS Elastic Beanstalk, and we're going to do that by doing a follow-along and a little lecture. So that's the goal of this ...
Build a Gradient Background Generator with JavaScript
Learn how to work with DOM (Document Object Model) by building a background generator app.
Let's use the terminal throughout (Linux/Mac) users
Ctrl+Alt+T to open the terminal and execute the command below:
Desktop && md background-generator && background-generator && touch index.html style.css script.js && code .
The above command changes the directory to Desktop, and creates a folder called background-generator and changes directory to it and creates three files called index.html style.css and script.js AND opens the background-generator in Vscode (don't forget to include the dot at the end of code command).
If you're on windows: Install Git for Windows. It will also install Git Bash, which is a command prompt that supports most Linux commands.
Copy the following code into your index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Gradient Background Generator</title>
</head>
<body id="gradient">
<h1>Background Generator</h1>
<input class="color1" type="color" name="color1" value="#00ff00" />
<input class="color2" type="color" name="color2" value="#ff0000" />
<h3></h3>
<script src="script.js"></script>
</body>
</html>
If you're familiar with HTML, all we did above was to include our HTML structure and linked our external CSS and javascript, and h1 tag, plus two inputs with type color to allow us to select colors from our browser. Then finally we have our h3 tag to display the value of gradient after we must have picked the colors.
Save and open the file in your browser: RightClick on the index.html from Vscode and click on
open with live server, you can download the extension if you don't have it already. Installation: Open VSCode and type ctrl+P, typeext install ritwickdey.liveserver.If everything works fine, you should have a screen like mine below:
We gave our input a default value of green and red.
Play with the two inputs...
body {
font: 'Raleway', sans-serif;
color: rgba(0, 0, 0, .5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
top: 15%;
background: linear-gradient(to right, red, yellow);
color: #ffffff;
font-weight: bolder;
}
h1 {
font: 600 3.5em 'Raleway', sans-serif;
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
width: 100%;
margin-top: 20%;
}
h3 {
font: 900 1em 'Raleway', sans-serif;
font-size: 1.4rem;
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
color: black
}
Our page should some nice look now, the CSS codes here should be familiar to you if you been learning CSS for like one week now, our main purpose for this app is to be able to generate a gradient background color like that in our CSS
line 8while changes the current background of our Apps page while the user is picking colors from the two inputs in our HTML.So far, we have a nice-looking page with two color pickers like this:
JavaScript makes web pages fun and interative, include the following to your script.js file:
const css = document.querySelector("h3");
const color1 = document.querySelector(".color1");
const color2 = document.querySelector(".color2");
const body = document.getElementById("gradient");
const setGradient = () => {
body.style.background =
"linear-gradient(to right, " +
color1.value +
", " +
color2.value +
")";
css.textContent = body.style.background + ";";
};
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
From
line 1 to line 5, we used the querySelector to get the elements in our HTML page and save them inside variables.Then we create a function called
setGradientthat changes the background color of our page with the values selected from the input of type color. Inside thesetGradientfunction we set the body with a style background of linear-gradient to set the right side of the page with a value of the color1 and the other side of the page with a value of color2. Do you remember thisbackground: linear-gradient(to right, red, yellow);from our CSS file? That's exactly what we are doing here.Then on
line 13, we set our CSS variable (which is the h3) to the value of the body which is the values of the linear-gradient.Finally, we used the Events function to listen on the input of color1 and color 2 and execute our
setGradientfunction.If everything works fine, you should have a functioning App now.
Go and ahead and make some changes to the code, maybe work with a clipboard API to enable copy and paste option of the generated gradient code, host it on GitHub pages.