counters/charcounter.html at main · alosk256/counters · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Counter</title>
    <style>
        body { font-family: 'Courier New', Courier, monospace; margin: 20px; }
        #textarea { width: 90%; height: 200px; font-family: 'Courier New', Courier, monospace;}
        .feedback { margin-top: 10px; font-size: 16px; }
        .warning { color: red; }
        .typedChars { color: purple ; }
    </style>
</head>
<body>
    <h1>Character Counter</h1>
    <br>
    <p>Max length is <span id="maxLengthDisplay">4095</span></p>
    <input type="number" id="maxLengthInput" value="4095" min="1">
    <button onclick="selectAllText()">Copy to Clipboard</button>
    <textarea id="textarea" maxlength="4095" placeholder="Type here..."></textarea>
    <div class="feedback">
        <p>Typed characters: <span id="typedChars">0</span></p>
        <p>Remaining characters: <span id="remChars">4095</span></p>
    </div>


    <script>
        // Get references to DOM elements
        const textarea = document.getElementById('textarea');
        const remChars = document.getElementById('remChars');
        const typedChars = document.getElementById('typedChars');
        const maxLengthInput = document.getElementById('maxLengthInput');
        const maxLengthDisplay = document.getElementById('maxLengthDisplay');

        // Initialize the maximum length
        let maxLength = 4095;
        textarea.maxLength = maxLength;

        // Event listener for changes to the max length input
        maxLengthInput.addEventListener('input', () => {
            // Update the max length based on user input, default to 4095 if invalid
            maxLength = parseInt(maxLengthInput.value) || 4095;
            // Set the textarea's maxlength attribute
            textarea.maxLength = maxLength;
            // Update the display of the max length
            maxLengthDisplay.textContent = maxLength;
            // Recalculate and update the character counts
            const charsUsed = textarea.value.length;
            const charsLeft = maxLength - charsUsed;
            typedChars.textContent = charsUsed;
            remChars.textContent = charsLeft;
            // Add or remove warning class based on remaining characters
            if (charsLeft <= 0) {
                remChars.classList.add('warning');
            } else {
                remChars.classList.remove('warning');
            }
        });

        // Event listener for input in the textarea
        textarea.addEventListener('input', () => {
            // Calculate characters used and remaining
            const charsUsed = textarea.value.length;
            const charsLeft = maxLength - charsUsed;

            // Update the display elements
            typedChars.textContent = charsUsed;
            remChars.textContent = charsLeft;

            // Apply warning style if no characters left
            if (charsLeft <= 0) {
                remChars.classList.add('warning');
            } else {
                remChars.classList.remove('warning');
            }
        });

        // Function to select all text in the textarea and copy it to the clipboard
        function selectAllText() {
            textarea.focus();
            textarea.select();
            navigator.clipboard.writeText(textarea.value);
        }

    </script>
</body>
</html>