Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में एक mini project का example समझेंगे!. इस mini project में हम क्या करेंगे की जैसे ही हमारा document page load होगा page में हम start और stop का button रखेंगे start button के click करने पर हम इस document page का automatically background color change करेंगे!. तो इस project को हम example के जरिये details के साथ समझेंगे!.
Automatic Background Color Change using javascript
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Using javascript change background color:</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
font-size: 24px;
color: white;
flex-direction: column;
}
button {
padding: 10px 38px;
font-weight: 800;
border-radius: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Automatic Background Color Change</h1>
<p>This is an example of changing the background color using JavaScript.</p>
<div class="action_btn">
<button id="startButton" onclick="startColorChange()">Start</button>
<button id="stopButton" onclick="stopColorChange()">Stop</button>
</div>
</body>
</html>
Javascript code:
<script>
// Function to generate a random color in hexadecimal format
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Function to change the background color of the body
function changeBackgroundColor() {
const randomColor = getRandomColor();
document.body.style.backgroundColor = randomColor;
}
// Function to start the automatic background color change
function startColorChange() {
intervalId = setInterval(changeBackgroundColor, 2000);
}
// Function to stop the automatic background color change
function stopColorChange() {
clearInterval(intervalId);
}
</script>
Full source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Using javascript change background color:</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
font-size: 24px;
color: white;
flex-direction: column;
}
button {
padding: 10px 38px;
font-weight: 800;
border-radius: 15px;
cursor: pointer;
}
</style>
<script>
// Function to generate a random color in hexadecimal format
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Function to change the background color of the body
function changeBackgroundColor() {
const randomColor = getRandomColor();
document.body.style.backgroundColor = randomColor;
}
// Function to start the automatic background color change
function startColorChange() {
intervalId = setInterval(changeBackgroundColor, 2000);
}
// Function to stop the automatic background color change
function stopColorChange() {
clearInterval(intervalId);
}
</script>
</head>
<body>
<h1>Automatic Background Color Change</h1>
<p>This is an example of changing the background color using JavaScript.</p>
<div class="action_btn">
<button id="startButton" onclick="startColorChange()">Start</button>
<button id="stopButton" onclick="stopColorChange()">Stop</button>
</div>
</body>
</html>
ऊपर के example में देख सकते है की javascript में हमने 4 function define किये है जिसमे first है, getRandomColor() function यह function क्या करता है की hexadecimal format में एक random color generates करता है!. hexadecimal color format (0-9, A-F) के बीच में generate किये जाते है!.
और secound function है changeBackgroundColor() function body element में background-color style property में randomly generate hexadecimal color set करता है!.
फिर हम setInterval() function का इस्तेमाल करके changeBackgroundColor() function हर 3 seconds के बाद call करते है!. और lagatar 3 seconds के time interval के बाद changeBackgroundColor() को call करेगा और automatically body का background color change होता रहेगा!.
startColorChange() function Start button के click करने par body element का color automatically change होना start हो जायेगा और stopColorChange() function stop button के click पर body element में background color change होना stop हो जायेगा!.
