← Back to gallery
Peggy Sue Got Married poster

Project walkthrough

Peggy Sue Got Married

Explore the concept, hints, and starter code for this Nic Cage inspired build.

Project Title: “Nostalgic Notifications: Peggy Sue’s Time Alerts”

Description

“Peggy Sue Got Married” features a narrative where the protagonist unexpectedly travels back in time to her high school years. Inspired by this, “Nostalgic Notifications” leverages the Web Notifications API to create a service that sends users reminders of their own past life events, encouraging them to reminisce or reconsider significant choices, much like Peggy Sue in the film.

This web application allows users to enter dates and details of past events, and at the configured time, it sends notifications that mimic Peggy Sue’s time travel experience, reflecting on what might have been and appreciating what has changed since then. This could be used as a fun, reflective tool or even as a reminder system for anniversaries and important milestones.

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.

Here’s how you might set up a simple version of “Nostalgic Notifications”:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nostalgic Notifications</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
    }
</style>
</head>
<body>
    <h1>Enter a past event to remember:</h1>
    <input type="text" id="event" placeholder="Event description">
    <input type="datetime-local" id="time">
    <button onclick="scheduleNotification()">Set Reminder</button>
<script>
    function scheduleNotification() {
        const eventDescription = document.getElementById('event').value;
        const eventTime = document.getElementById('time').value;
        const timeDelay = new Date(eventTime) - new Date(); // Calculate delay until the event time

        if (timeDelay > 0) {
            setTimeout(() => {
                if (Notification.permission === "granted") {
                    new Notification("Remember this?", {
                        body: eventDescription,
                        icon: 'https://placehold.co/64x64.png?text=PS'
                    });
                }
            }, timeDelay);
        }
    }

    // Request permission to send notifications
    document.addEventListener('DOMContentLoaded', () => {
        if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");
        } else if (Notification.permission !== "denied") {
            Notification.requestPermission();
        }
    });
</script>
</body>
</html>

References

This project idea aligns the nostalgic journey of Peggy Sue with a practical and interactive use of modern web technology to engage users in a personal narrative exploration.