Macken Design Co.

I luv u

Written by

Sean

in

, 
<!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>

More posts