Time To Kill

Project Title: “Measured Moments: Time to Resize”

Description:

“Time to Kill,” starring Nicolas Cage as Enrico Silvestri, explores themes of destiny and consequence in a war-torn setting. Inspired by this narrative, “Measured Moments: Time to Resize” is a web application designed for historians and educators to explore and present historical timelines dynamically.

Utilizing the Resize Observer API, this interactive tool allows users to create custom timelines where the amount of information displayed adapts based on the screen size or the resizing of the browser window. As the viewing area changes, the timeline can dynamically expand or contract, showing more detailed events or summarizing them, thus helping users focus on what’s most relevant based on their current viewing context.

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>Measured Moments: Time to Resize</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f8;
        color: #333;
        margin: 0;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    #timelineContainer {
        width: 80%;
        border: 1px solid #ccc;
        padding: 10px;
        overflow: auto;
    }

    .timeline {
        background-color: #e8ecef;
        margin: 5px;
        padding: 10px;
        border-radius: 5px;
    }
</style>
</head>
<body>
    <div id="timelineContainer">
        <div class="timeline">1900 - Event Description</div>
        <div class="timeline">1910 - Another Event</div>
        <!-- More timeline items -->
    </div>
<script>
    const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            console.log('Size changed, new dimensions:', entry.contentRect.width, entry.contentRect.height);
            // Adjust the visibility or detail level of timeline events based on size
            document.querySelectorAll('.timeline').forEach(el => {
                if (entry.contentRect.width < 500) {
                    el.style.fontSize = '12px';
                } else {
                    el.style.fontSize = '16px';
                }
            });
        }
    });

    resizeObserver.observe(document.getElementById('timelineContainer'));
</script>
</body>
</html>

References:

• Film: Time to Kill (1989)
• API: Resize Observer API Documentation

“Measured Moments: Time to Resize” not only provides a useful tool for educational purposes but also reflects the film’s exploration of the impact of time and space, adapting its presentation to the available temporal ‘space’ of the user’s screen.