snippet to view all the letters at once

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Landsat Alphabet Viewer</title>
      <style>
          body { font-family: Arial, sans-serif; text-align: center; }
          #imageContainer { display: flex; flex-wrap: wrap; justify-content: center; }
          img { width: 100px; height: 100px; margin: 5px; object-fit: cover; }
      </style>
  </head>
  <body>
      <h1>Landsat Alphabet Viewer</h1>
      <div id="imageContainer"></div>
      <script>
          const letters = {
              'A': 3, 'B': 1, 'C': 2, 'D': 1, 'E': 3, 'F': 1, 'G': 0, 'H': 1,
              'I': 4, 'J': 2, 'K': 1, 'L': 3, 'M': 2, 'N': 2, 'O': 1, 'P': 1,
              'Q': 1, 'R': 3, 'S': 2, 'T': 1, 'U': 2, 'V': 3, 'W': 1, 'X': 2,
              'Y': 2, 'Z': 1
          };
          const container = document.getElementById('imageContainer');
          const baseUrl = 'https://landsat.gsfc.nasa.gov/apps/YourNameInLandsat-main/public/images/';
  
          for (const [letter, maxNum] of Object.entries(letters)) {
              for (let i = 0; i <= maxNum; i++) {
                  const img = document.createElement('img');
                  img.src = `${baseUrl}${letter.toLowerCase()}_${i}.jpg`;
                  img.alt = `${letter}_${i}`;
                  img.title = `${letter}_${i}`;
                  container.appendChild(img);
              }
          }
      </script>
  </body>
  </html>