[HTML + Javascript] Wordle 만들어보기

어쩌다가 Wordle을 알게 되었다.

하루 한 번만 가능한데 더 하고 싶어서 만들어본다.

Wordle은 하나의 온전한 단어를 맞추는 거지만 이번에 만들어 본건 랜덤 한 영어다.

막 만들어서 코드나 동작이나 마음에는 들지 않지만 가끔 심심풀이로 하기엔 괜찮을 듯싶어 더 수정하진 않는다.

 

HTML - BODY

<div id="wrapper">
  <div id="parent">
    <div class="child" id="child0">
      <input type="text" id="on0" maxlength="1" onkeyup="input_onkeyup(event);" />
      <input type="text" id="tw0" maxlength="1" onkeyup="input_onkeyup(event);" />
      <input type="text" id="tr0" maxlength="1" onkeyup="input_onkeyup(event);" />
      <input type="text" id="fo0" maxlength="1" onkeyup="input_onkeyup(event);" />
      <input type="text" id="fi0" maxlength="1" onkeyup="input_onkeyup(event);" />
    </div>
  </div>
  <button id="btn" onclick="btn_click();">submit</button>
</div>

CSS

#wrapper {
  margin: 100px auto 0 auto;
  width: 290px;
}

#parent {
  width: 290px;
}

.child {
  width: 290px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

input {
  width: 50px;
  height: 50px;
  border: none;
  background-color: gray;
  color: white;
  text-align: center;
  font-size: 30px;
}

button {
  width: 105px;
  height: 50px;
  font-size: 30px;
}

Javascript

var result = "";
var count = 0;

function btn_click() {
  var onE = document.getElementById("on" + count);
  var twE = document.getElementById("tw" + count);
  var trE = document.getElementById("tr" + count);
  var foE = document.getElementById("fo" + count);
  var fiE = document.getElementById("fi" + count);

  var onV = onE.value;
  var twV = twE.value;
  var trV = trE.value;
  var foV = foE.value;
  var fiV = fiE.value;

  if (onV === "" || twV === "" || trV === "" || foV === "" || fiV === "") {
    alert("모두 입력해주세요.");
    return;
  }

  var match = 0;

  if (onV === result[0]) {
    match = match + 1;
    onE.style.backgroundColor = "#16b316";
  } else if (result.indexOf(onV) > -1) {
    onE.style.backgroundColor = "#cbbb24";
  } else {
    onE.style.backgroundColor = "#3c3c3c";
  }

  if (twV === result[1]) {
    match = match + 1;
    twE.style.backgroundColor = "#16b316";
  } else if (result.indexOf(twV) > -1) {
    twE.style.backgroundColor = "#cbbb24";
  } else {
    twE.style.backgroundColor = "#3c3c3c";
  }

  if (trV === result[2]) {
    match = match + 1;
    trE.style.backgroundColor = "#16b316";
  } else if (result.indexOf(trV) > -1) {
    trE.style.backgroundColor = "#cbbb24";
  } else {
    trE.style.backgroundColor = "#3c3c3c";
  }

  if (foV === result[3]) {
    match = match + 1;
    foE.style.backgroundColor = "#16b316";
  } else if (result.indexOf(foV) > -1) {
    foE.style.backgroundColor = "#cbbb24";
  } else {
    foE.style.backgroundColor = "#3c3c3c";
  }

  if (fiV === result[4]) {
    match = match + 1;
    fiE.style.backgroundColor = "#16b316";
  } else if (result.indexOf(fiV) > -1) {
    fiE.style.backgroundColor = "#cbbb24";
  } else {
    fiE.style.backgroundColor = "#3c3c3c";
  }

  if (match == 5) {
    document.getElementById("on" + count).setAttribute('readonly', true);
    document.getElementById("tw" + count).setAttribute('readonly', true);
    document.getElementById("tr" + count).setAttribute('readonly', true);
    document.getElementById("fo" + count).setAttribute('readonly', true);
    document.getElementById("fi" + count).setAttribute('readonly', true);

    const node = document.createElement("button");
    node.id = "reset";
    node.innerHTML = "reset";
    node.onclick = reset;

    document.getElementById("wrapper").appendChild(node);
    document.getElementById("btn").remove();
  } else {
    addChild();
  }
}

function input_onkeyup(event) {
  var keyCode = event.keyCode;
  var target = event.target;

  if (keyCode >= 65 && keyCode <= 90) {
    target.value = target.value.toLocaleUpperCase();
  } else if (!(keyCode == 8 || keyCode == 9 || keyCode == 16 || keyCode == 27)) {
    target.value = "";
    alert("영어만 입력해주세요.");
  }
}

function addChild() {
  document.getElementById("on" + count).setAttribute('readonly', true);
  document.getElementById("tw" + count).setAttribute('readonly', true);
  document.getElementById("tr" + count).setAttribute('readonly', true);
  document.getElementById("fo" + count).setAttribute('readonly', true);
  document.getElementById("fi" + count).setAttribute('readonly', true);

  count = count + 1;

  const node = document.createElement("div");
  node.classList.add('child');
  node.id = 'child' + count;
  node.innerHTML = inputFormat();

  document.getElementById("parent").appendChild(node);
}

function reset() {
  count = 0;

  const btn = document.createElement("button");
  btn.id = "btn";
  btn.innerHTML = "submit";
  btn.onclick = btn_click;

  document.getElementById("wrapper").appendChild(btn);
  document.getElementById("reset").remove();

  var list = document.getElementsByClassName("child");

  for (var i = list.length - 1; i >= 0; i--) {
    list[i].remove();
  }

  const node = document.createElement("div");
  node.classList.add('child');
  node.id = 'child' + count;
  node.innerHTML = inputFormat();

  document.getElementById("parent").appendChild(node);
  
  resetResult();
}

function inputFormat() {
  return "<input type='text' id='on" + count + "' maxlength='1' onkeyup='input_onkeyup(event);'/><input type='text' id='tw" + count + "' maxlength='1' onkeyup='input_onkeyup(event);' /><input type='text' id='tr" + count + "' maxlength='1' onkeyup='input_onkeyup(event);' /><input type='text' id='fo" + count + "' maxlength='1' onkeyup='input_onkeyup(event);' /> <input type='text' id='fi" + count + "' maxlength='1' onkeyup='input_onkeyup(event);'/>"
}

function resetResult() {
  result = "";
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var num = 26;
	for ( var i = 0; i < 5; i++ ) {
  	var random = Math.floor(Math.random() * num);
  	result += characters.charAt(random);
    characters = characters.slice(0, random) + characters.slice(random + 1);
    num = num - 1;
	}
  console.log("result : " + result);
}

resetResult();