Description

Author pangrams with ease! Marks used letters in green and repeated letters in yellow. Includes a customisable alphabet and a dictionary.

Created on 21 Apr 2026

Code

<style>
  :root {
    color-scheme: light dark;
    font-family: Georgia, serif;
  }

  body { margin: 5vw; }

  textarea, [contenteditable] {
    font: inherit;
    display: block;
    font-size: 2rem;
    width: 100%;
  }

  iframe {
    width: 100%;
    height: 50vh;
  }
</style>

<label>
  Your pangram:
  <textarea id='pangram' rows='5'>Sphinx of black quartz, judge my vow.</textarea>
</label>

<label>
  Alphabet:
  <div id='alphabet' contenteditable>abcdefghijklmnopqrstuvwxyz</div>
</label>

<iframe src='https://wiktionary.org'></iframe>

<script>
  const pangramInput = document.querySelector('#pangram'),
    alphabetInput = document.querySelector('#alphabet');

  (pangramInput.oninput = () => {
    const letterCounts = {};
    const alphabet = [ ...alphabetInput.textContent.toLowerCase() ];
    
    for (let char of pangramInput.value) {
      char = char.toLowerCase();
      if (alphabet.includes(char)) {
        letterCounts[char] ??= 0;
        letterCounts[char]++;
      }
    }
    
    alphabetInput.innerHTML = alphabet
      .map(letter => `<span style='color: ${letterCounts[letter] ? (letterCounts[letter] > 1 ? 'gold' : 'green') : 'auto'}'>${letter}</span>`)
      .join('');
  })();
</script>