index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wordle-clone</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.9.6/dist/cdn.min.js"
    ></script>
  </head>
  <body x-data="wordleClone" @keydown="handleKey">
    <header>
      <h1>Tama-Wordle</h1>
    </header>

    <div id="alerts" x-show="alerts.length !== 0">
      <template x-for="alert in alerts" :key="alert._id">
        <div class="alert" x-text="alert.message"></div>
      </template>
    </div>

    <div x-show="modal.show" id="modal">
      <div class="content" @click.outside="modal.destroy()">
        <h2 x-text="modal.text"></h2>
        <button class="replay-btn" @click="replay()">Play Again</button>
      </div>
    </div>

    <main id="board">
      <template x-for="guess in guesses" :key="guess._id">
        <div class="row" :class="guess.class" :id="`row_${guess._id}`">
          <template x-for="letter in guess.letters" :key="letter._id">
            <div
              class="letter"
              x-text="letter.text"
              :class="letter.class"
            ></div>
          </template>
        </div>
      </template>
    </main>

    <div id="keyboard">
      <button class="key" @click="addKey('Q')" :class="keys['Q']">Q</button>
      <button class="key" @click="addKey('W')" :class="keys['W']">W</button>
      <button class="key" @click="addKey('E')" :class="keys['E']">E</button>
      <button class="key" @click="addKey('R')" :class="keys['R']">R</button>
      <button class="key" @click="addKey('T')" :class="keys['T']">T</button>
      <button class="key" @click="addKey('Y')" :class="keys['Y']">Y</button>
      <button class="key" @click="addKey('U')" :class="keys['U']">U</button>
      <button class="key" @click="addKey('I')" :class="keys['I']">I</button>
      <button class="key" @click="addKey('O')" :class="keys['O']">O</button>
      <button class="key" @click="addKey('P')" :class="keys['P']">P</button>
      <div class="key-spacer"></div>
      <button class="key" @click="addKey('A')" :class="keys['A']">A</button>
      <button class="key" @click="addKey('S')" :class="keys['S']">S</button>
      <button class="key" @click="addKey('D')" :class="keys['D']">D</button>
      <button class="key" @click="addKey('F')" :class="keys['F']">F</button>
      <button class="key" @click="addKey('G')" :class="keys['G']">G</button>
      <button class="key" @click="addKey('H')" :class="keys['H']">H</button>
      <button class="key" @click="addKey('J')" :class="keys['J']">J</button>
      <button class="key" @click="addKey('K')" :class="keys['K']">K</button>
      <button class="key" @click="addKey('L')" :class="keys['L']">L</button>
      <div class="key-spacer"></div>
      <button class="key action" @click.throttle.800ms="submitWord()">
        ENTER
      </button>
      <button class="key" @click="addKey('Z')" :class="keys['Z']">Z</button>
      <button class="key" @click="addKey('X')" :class="keys['X']">X</button>
      <button class="key" @click="addKey('C')" :class="keys['C']">C</button>
      <button class="key" @click="addKey('V')" :class="keys['V']">V</button>
      <button class="key" @click="addKey('B')" :class="keys['B']">B</button>
      <button class="key" @click="addKey('N')" :class="keys['N']">N</button>
      <button class="key" @click="addKey('M')" :class="keys['M']">M</button>
      <button class="key action" @click="deleteLetter()">DEL</button>
    </div>
  </body>
</html>