From Data Engineering to JavaScript: A Colorful Adventure
Written on
Chapter 1: Introduction to My JavaScript Exploration
To be honest, my background is in data engineering, where Python is my primary tool. I've had little to no experience with JavaScript, whether on the server side or client side. In this series, I aim to document my efforts to learn the fundamentals of JavaScript, including my challenges, lessons learned, and projects created along the way.
In this initial installment, I'll demonstrate a straightforward user interface that allows users to change the background color of a webpage I've designed.
First, I needed to research what the internet had to say about the DOM.
The term DOM, which stands for Document Object Model, is something I encountered frequently. It refers to the data representation of the elements that make up a document on the web.
From my research, I discovered that the DOM would serve as my gateway for manipulating data on a webpage. This made it the perfect choice for my first project: using JavaScript to alter the webpage's background color.
Fortunately, I have some prior experience with HTML and CSS. I knew how to construct basic HTML pages, so I was able to quickly create a simple placeholder webpage with basic styling using CSS.
Here's the HTML and CSS I utilized:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Flipper</title>
</head>
<body>
<div id="box">
<h1 id="header">Background Color: #9fdafd</h1>
<button onclick="getBackgroundColor()">Click Me!</button>
</div>
</body>
</html>
<style>
body {
background-color: #9fdafd;
}
#box {
text-align: center;
margin: auto;
background: rgb(51, 51, 51);
padding: 20px;
border-radius: 15px;
color: white;
}
button {
background-color: rgb(51, 51, 51);
border: none;
color: white;
padding: 15px 32px;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
transition: background-color 0.5s, color 0.5s;
}
button:hover {
background-color: rgb(190, 190, 190);
color: black;
}
</style>
When I ran this code in my browser, it produced a static webpage featuring a header and a button centered on the screen. The header displayed the current background color, denoted by the hex code #9fdafd. My goal was to modify this code to change the background color upon clicking the central button.
To implement this functionality, I created a script.js file and wrote the following function. In this function, I declared a variable named color_code, which generates a random hex code. This hex code is then used to change the background color of the body and update the header text through the getElementById method.
function getBackgroundColor() {
let color_code = "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0').toUpperCase();
document.body.style.backgroundColor = color_code;
document.getElementById("header").innerHTML = 'Background Color: ' + color_code;
}
To ensure the JavaScript function would execute upon a button click, I modified my HTML to include a script tag and added an onclick attribute to the button.
Now, when the button is clicked, the background color changes, and the header updates to reflect the new hex code.
Thank you for taking the time to read my inaugural article on JavaScript. I welcome any feedback regarding both my writing and coding. Let's embark on this learning journey together!