<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I love you - Broadcast Sender</title>
<style>
body {
background-color: deeppink;
}
<style>
</head>
<body>
<h1>Broadcast Sender</h1>
<button id="send-button">Broadcast "I love you"</button>
<script>
// Create a new BroadcastChannel with a name
const broadcastChannel = new BroadcastChannel('love_channel');
// Get the button element
const sendButton = document.getElementById('send-button');
// Add a click event listener to the button
sendButton.addEventListener('click', () => {
// Post the message to the channel
broadcastChannel.postMessage('I love you');
console.log('Message sent: "I love you"');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I love you - Broadcast Receiver</title>
<style>
@font-face {font-family: 'Avirrio'; src: url('Avirrio.ttf');}
li {font-family: 'Avirrio'; color: pink; font-size: 5em; margin: 20px; background-color: hotpink; }
body {
background-color: deeppink;
}
<style>
</head>
<body>
<h1>Broadcast Receiver</h1>
<p>Waiting for a message...</p>
<ul id="message-list"></ul>
<script>
// Create a new BroadcastChannel with the same name
const broadcastChannel = new BroadcastChannel('love_channel');
// Get the list element
const messageList = document.getElementById('message-list');
// Listen for messages on the channel
broadcastChannel.onmessage = (event) => {
// Create a new list item for the message
const newListItem = document.createElement('li');
newListItem.textContent = `Received: ${event.data}`;
messageList.appendChild(newListItem);
console.log('Message received:', event.data);
let a = 0;
while (a < 1000000) {
console.log('Message received:', event.data);
a++;}
};
</script>
</body>
</html>