Little Jay

Simple Wordle Game! 본문

FrontEnd

Simple Wordle Game!

Jay, Lee 2022. 2. 26. 15:36

wordle이라는 게임이 있는데 살짝 행맨 같은 게임이다.

다시 생각해보니 행맨 보다는 단어로 하는 야구게임이 오히려 더 어울리는 것 같다.

 

https://www.nytimes.com/games/wordle/index.html

위의 사이트에서 해볼 수 있다.

 

css를 먹이면 조금 따라할 수 있을 것 같은데 일단 이정도만 구현하는 거로 해봐도 괜찮은 것 같다.

너무나 간단하기 때문에 live를 사용하였고, 배포도 안할 예정이다.

<!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>Document</title>
  </head>
  <body>
    <style>
      input {
        width: 50px;
        height: 50px;
        font-size: 40px;
        text-align: center;
      }
    </style>

    <input type="text" class="input" />
    <input type="text" class="input" />
    <input type="text" class="input" />
    <input type="text" class="input" />
    <input type="text" class="input" />
    <button>제출</button>

    <script>
      const answer = "abcde";
      document.querySelector("button").addEventListener("click", function () {
        const input = document.querySelectorAll(".input");
        for (let i = 0; i < 5; i++) {
          if (input[i].value === answer[i]) {
            input[i].style.background = "green";
          } else if (answer.includes(input[i].value)) {
            input[i].style.background = "yellow";
          } else {
            input[i].style.background = "lightgray";
          }

          input[i].classList.remove("input");
        }

        const template = `<div>
        <input type="text" class="input" />
        <input type="text" class="input" />
        <input type="text" class="input" />
        <input type="text" class="input" />
        <input type="text" class="input" />
        </div>`;
        document
          .querySelector("body")
          .insertAdjacentHTML("beforeend", template);
      });
    </script>
  </body>
</html>
저작자표시 (새창열림)

'FrontEnd' 카테고리의 다른 글

[JS] Vanila JS로 querySelector 구현  (0) 2023.01.11
[React] Netlify build 중 버전 충돌 오류  (0) 2022.12.27
[React] KakaoTalk 공유하기 연동 중 sendDefault 에러 상황  (1) 2022.12.19
[React] CRA에서 eject없이 Decoration 사용하기  (0) 2022.02.11
'FrontEnd' Related Articles more
Comments