Seeking Justice

Project Title: “Seeking Justice: Navigating Through History with the History API”

Description:

In this project, we integrate the thrilling and suspenseful narrative of Seeking Justice with the capabilities of the History API. Seeking Justice follows a man who becomes involved with a vigilante group after his wife is attacked, delving into themes of revenge and justice. Similarly, this project will allow users to navigate through a web application’s history, providing a seamless and intuitive user experience.

Features:

1. History Navigation: Use the History API to enable navigation through the web application’s history.
2. State Management: Manage and manipulate the state of the application to provide dynamic content.
3. Thematic Design: Implement a design inspired by the tense and suspenseful atmosphere of Seeking Justice.

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 a basic setup to get you started. This includes the initial HTML, CSS, and JavaScript to integrate the History API and create an interactive navigation experience.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seeking Justice: History Navigation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #111;
        color: #fff;
        text-align: center;
        padding: 20px;
    }

    h1 {
        color: #ff4500;
    }

    button {
        background-color: #ff4500;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        margin: 5px;
    }

    #output {
        margin-top: 20px;
        font-size: 18px;
        white-space: pre-wrap;
        text-align: left;
    }
</style>
</head>
<body>
    <h1>Seeking Justice: History Navigation</h1>
    <p>Navigate through history with the History API!</p>
    <div id="content">
        <button onclick="navigateTo('home')">Home</button>
        <button onclick="navigateTo('about')">About</button>
        <button onclick="navigateTo('contact')">Contact</button>
    </div>
    <div id="output"></div>
<script>
    function navigateTo(page) {
        const state = { page: page };
        const title = `${page.charAt(0).toUpperCase() + page.slice(1)} - Seeking Justice`;
        const url = `#${page}`;

        history.pushState(state, title, url);
        updateContent(page);
    }

    window.onpopstate = function(event) {
        if (event.state) {
            updateContent(event.state.page);
        }
    };

    function updateContent(page) {
        const output = document.getElementById('output');
        switch (page) {
            case 'home':
                output.innerHTML = '<h2>Home</h2><p>Welcome to the Seeking Justice web application.</p>';
                break;
            case 'about':
                output.innerHTML = '<h2>About</h2><p>This application demonstrates the use of the History API.</p>';
                break;
            case 'contact':
                output.innerHTML = '<h2>Contact</h2><p>Contact us at: seekingjustice@example.com</p>';
                break;
            default:
                output.innerHTML = '<h2>Home</h2><p>Welcome to the Seeking Justice web application.</p>';
                break;
        }
    }

    // Initialize content based on the current URL hash
    const initialPage = location.hash ? location.hash.substring(1) : 'home';
    navigateTo(initialPage);
</script>
</body>
</html>

References:

• Seeking Justice (2011):
  • Wikipedia
• History API:
  • MDN Web Docs

Praise Cage! Embark on this coding adventure and create an interactive navigation experience that leverages the History API, inspired by the suspenseful narrative of Seeking Justice.