World Trade Center

Title: “Rescue Operations Log: A Tribute to World Trade Center with Storage API”

Description:

Inspired by Nicolas Cage’s heroic portrayal of John McLoughlin in “World Trade Center” (2006), this project creates a tribute by simulating the logging of rescue operations during disaster scenarios. By integrating the Storage API, we aim to store and retrieve information about rescue tasks and operations, representing the continuous efforts of first responders. This project provides a dynamic and heartfelt homage to the dedication and organization required during such critical missions.

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.

This project will use HTML, JavaScript, and the Storage API to log and retrieve rescue operations.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rescue Operations Log: Tribute to World Trade Center</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
        text-align: center;
        padding: 20px;
    }

    header {
        margin-bottom: 20px;
    }

    form {
        margin-bottom: 20px;
    }

    #rescueTask {
        padding: 10px;
        font-size: 16px;
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }

    #logContainer {
        margin-top: 20px;
    }

    .task {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        margin: 10px;
        padding: 20px;
        width: 300px;
        display: inline-block;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
</style>
</head>
<body>
    <header>
        <h1>Rescue Operations Log: Tribute to World Trade Center</h1>
        <p>A heartfelt simulation inspired by the heroism of first responders, featuring dynamic logging of rescue operations.</p>
    </header>
    <main>
        <form id="rescueForm">
            <input type="text" id="rescueTask" placeholder="Enter rescue task" required>
            <button type="submit">Log Task</button>
        </form>
        <div id="logContainer"></div>
    </main>
<script>
    document.getElementById('rescueForm').addEventListener('submit', function(event) {
        event.preventDefault();
        logRescueTask();
    });

    function logRescueTask() {
        const taskInput = document.getElementById('rescueTask');
        const task = taskInput.value.trim();

        if (task) {
            const tasks = JSON.parse(localStorage.getItem('rescueTasks')) || [];
            tasks.push(task);
            localStorage.setItem('rescueTasks', JSON.stringify(tasks));
            taskInput.value = '';
            displayTasks();
        }
    }

    function displayTasks() {
        const logContainer = document.getElementById('logContainer');
        logContainer.innerHTML = ''; // Clear previous tasks

        const tasks = JSON.parse(localStorage.getItem('rescueTasks')) || [];

        tasks.forEach((task, index) => {
            const taskDiv = document.createElement('div');
            taskDiv.classList.add('task');
            taskDiv.textContent = `Task ${index + 1}: ${task}`;
            logContainer.appendChild(taskDiv);
        });
    }

    // Display tasks on page load
    document.addEventListener('DOMContentLoaded', displayTasks);
</script>
</body>
</html>

References:

• Film Reference: World Trade Center (2006) - Nicolas Cage as John McLoughlin
• API Reference: Storage API

Praise Cage! This project not only honors the bravery of first responders but also demonstrates the practical use of the Storage API in logging and retrieving essential information dynamically.