Moonstruck

Project Title: “Moonstruck Messages: Love Notes through Channels”

Description:

In the enchanting 1987 film “Moonstruck,” Nicolas Cage portrays Ronny Cammareri, a passionate and somewhat eccentric man who falls deeply in love with Loretta Castorini. Inspired by the heartfelt and whimsical exchanges between Ronny and Loretta, “Moonstruck Messages: Love Notes through Channels” is a web application designed to rekindle the romance of handwritten notes in a digital format.

Utilizing the Channel Messaging API, this application enables users to send digital “love notes” to their partners through private, secure channels. The notes can include text, digital drawings, and even voice clips. This feature fosters a personal connection reminiscent of the intimate and dramatic interactions in “Moonstruck,” while adapting it for a modern, digital audience.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moonstruck Messages</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f2e9e4;
        color: #222;
        margin: 0;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    #noteForm {
        background: #c9ada7;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    textarea {
        width: 300px;
        height: 100px;
        margin-bottom: 10px;
        border: none;
        padding: 10px;
        font-size: 16px;
    }

    button {
        background-color: #9a8c98;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 4px;
    }
</style>
</head>
<body>
    <div id="noteForm">
        <h1>Send a Moonstruck Message</h1>
        <textarea id="messageContent" placeholder="Write your love note here..."></textarea>
        <button onclick="sendMessage()">Send Love Note</button>
    </div>
<script>
    const channel = new MessageChannel();
    const port1 = channel.port1;
    const port2 = channel.port2;

    port1.onmessage = function(event) {
        console.log('Message received:', event.data);
    };

    function sendMessage() {
        const messageContent = document.getElementById('messageContent').value;
        port2.postMessage(messageContent);
        console.log('Message sent:', messageContent);
    }
</script>
</body>
</html>

References:

• Film: Moonstruck (1987)
• API: Channel Messaging API Documentation

“Moonstruck Messages: Love Notes through Channels” transforms the art of love note writing into a delightful digital experience, promoting deeper connections and personal communication in the spirit of “Moonstruck.”