JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html>
<head>
    <title>English Word Checker</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 2rem; }
        .container { max-width: 600px; margin: 0 auto; }
        input { width: 300px; padding: 8px; font-size: 16px; }
        .valid { color: green; border: 2px solid green; }
        .invalid { color: red; border: 2px solid red; }
        #result { margin-top: 10px; font-weight: bold; }
        .loading { color: #666; }
        .error { color: darkred; }
    </style>
</head>
<body>
    <div class="container">
        <h1>English Word Verifier</h1>
        <div id="status" class="loading">Loading dictionary (69,903 words)...</div>
        <input type="text" id="wordInput" placeholder="Enter a word" disabled>
        <div id="result"></div>
    </div>

    <script>
        const wordList = new Set();
        const wordInput = document.getElementById('wordInput');
        const statusDiv = document.getElementById('status');
        const resultDiv = document.getElementById('result');

        // Fetch and process word list
        fetch('https://public.websites.umich.edu/~jlawler/wordlist')
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.text();
            })
            .then(data => {
                const words = data.split('\n');
                words.forEach(word => {
                    const cleanWord = word.trim().toLowerCase();
                    if (cleanWord) wordList.add(cleanWord);
                });
                
                wordInput.removeAttribute('disabled');
                statusDiv.textContent = `Dictionary loaded (${wordList.size} words)`;
                statusDiv.style.color = 'green';
            })
            .catch(error => {
                statusDiv.textContent = `Error loading dictionary: ${error.message}`;
               ...