beeacheater.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Letter Filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="wordList.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }

        label, input, button {
            display: block;
            width: 100%;
            margin-bottom: 15px;
        }

        label {
            font-weight: bold;
        }

        input {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px;
            font-size: 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #resultContainer {
            margin-top: 20px;
        }

        @media (min-width: 600px) {
            label, input, button {
                width: 50%;
                margin-left: auto;
                margin-right: auto;
            }
        }
    </style>
</head>
<body>
    <label for="requiredLetter">Required letter:</label>
    <input type="text" id="requiredLetter" maxlength="1" oninput="this.value = this.value.toLowerCase()" placeholder="e.g., a">

    <label for="otherLetters">Other letters:</label>
    <input type="text" id="otherLetters" maxlength="6" oninput="this.value = this.value.toLowerCase()" placeholder="e.g., bcdfgh">

    <button onclick="filterWords()">Find Words</button>
    <div id="resultContainer"></div>

    <script>
        function filterWords() {
            const requiredLetter = document.getElementById('requiredLetter').value;
            const otherLetters = document.getElementById('otherLetters').value;
            if (!requiredLetter || requiredLetter.length !== 1) {
                alert('Please enter one required letter.');
                return;
            }

            const allowedLetters = requiredLetter + otherLetters;
            const regex = new RegExp(`^[${allowedLetters}]+$`);

            const filteredWords = wordList.filter(word => 
                word.includes(requiredLetter) && regex.test(word) && word.length >= 4
            );

            const resultContainer = document.getElementById('resultContainer');
            resultContainer.innerHTML = ''; // Clear previous results

            filteredWords.forEach(word => {
                const element = document.createElement('div');
                element.textContent = word;
                resultContainer.appendChild(element);
            });
        }
    </script>
</body>
</html>