<!DOCTYPE html>
<html lang="en">
<head>
<title>Focus and Blur Events Demo</title>
<style>
body { transition: background-color 0.5s ease; } /* Smooth transition for background color */
</style>
<script>
// Function to handle focus event
function handleFocus() {
document.getElementById('status').innerHTML = 'Window is focused';
document.body.style.backgroundColor = '#DFF0D8'; // Light green background
}
// Function to handle blur event
function handleBlur() {
document.getElementById('status').innerHTML = 'Window is not focused';
document.body.style.backgroundColor = '#F2DEDE'; // Light red background
}
</script>
</head>
<body onfocus="handleFocus()" onblur="handleBlur()">
<h1>Focus and Blur Events on Window</h1>
<p>Status: <span id="status">Window is focused</span></p>
<p><strong>Instructions:</strong> To test this functionality, click inside this window to focus, then click away to another window or tab to trigger the blur effect. Notice the background color change and status update.</p>
</body>
</html>