Wind Talkers

Project Title: “CodeGuard: Cryptic Counter Tracker”

Description:

Inspired by “Windtalkers,” where Nicolas Cage plays Joe Enders, a Marine who protects a Navajo Code Talker during WWII, “CodeGuard: Cryptic Counter Tracker” is a web application designed to simulate the tracking and management of encoded messages. Utilizing the CSS Counter Styles API, this app provides a unique interface for users to encode and count the frequency of use of various elements in their messages, reflecting the cryptographic aspect of the Navajo code used in the film.

The application serves as an educational tool for understanding code encryption and message tracking, integrating historical elements with modern web technology to teach users about the importance of secure communications.

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>CodeGuard: Cryptic Counter Tracker</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f0f0f0;
        color: #333;
        text-align: center;
        padding: 20px;
    }

    textarea {
        width: 300px;
        height: 100px;
        margin-top: 20px;
    }

    #encodedOutput, #usageStats {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fff;
    }
</style>
</head>
<body>
    <h1>Cryptic Message Encoder</h1>
    <textarea id="messageInput" placeholder="Type your message here..." oninput="updateMessage()"></textarea>
    <div id="encodedOutput">Encoded Message: </div>
    <div id="usageStats">Character Usage:</div>
<script>
    document.getElementById('messageInput').addEventListener('input', function() {
        const inputText = this.value;
        const encodedOutput = document.getElementById('encodedOutput');
        const usageStats = document.getElementById('usageStats');

        let encodedText = '';
        let charCount = {};

        for (let char of inputText) {
            let encodedChar = String.fromCharCode(char.charCodeAt(0) + 2);  // Simple Caesar cipher for example
            encodedText += encodedChar;

            if (charCount[encodedChar]) {
                charCount[encodedChar]++;
            } else {
                charCount[encodedChar] = 1;
            }
        }

        encodedOutput.textContent = `Encoded Message: ${encodedText}`;
        usageStats.textContent = 'Character Usage:
';

        for (let key in charCount) {
            usageStats.textContent += `${key}: ${charCount[key]} times
`;
        }
    });
</script>
</body>
</html>

References:

• Film: Windtalkers (2002)
• API: CSS Counter Styles API Documentation

“CodeGuard: Cryptic Counter Tracker” not only reflects the cryptographic communication elements from “Windtalkers” but also provides a platform for users to learn about basic coding and message encoding techniques. This project enhances understanding of how encoded communications can be generated and tracked, paralleling the complexities of wartime communication strategies depicted in the film.