JavaScript로 요즘 유행하는 Wordle 게임 만들기 (개쉬움)

요즘 신세대들은 아침마다 이거합니다
애플코딩아님 codingapple.com
구독자용 10% 할인코드 : YT123 (맨날 바뀜 최근영상 참고)

[@niceyoungmo]

9:03 비밀이구요 ㅋㅋㅋ

[@왕방빵-q6z]

오 이거 , 선착순으로 가장 빨리 맞춘 사람 뽑아오는 거 넣고 선물주게하고 공유 뿌릴 수 있게 하면 재밌겠네요

[@테스트-b9j]

근데 완전 손해에요. 선물이 나가기만 하고 오는건 없으니까

[@soohwan8701]

@@테스트-b9j 그냥 친구들한테 깊티같은거 주고 싶을때 쓸수 있지 않을까요?

[@테스트-b9j]

@@soohwan8701 ㅇㅎ

[@유만-t5l]

@@테스트-b9j 광고를 달면되죠

[@테스트-b9j]

@@유만-t5l 광고로 안돼요

[@erller123]

숫자야구 인싸판 ㅋㅋㅋ

[@okabari]

영어 워드 사전 같은거 임포트가 되면 거기서 5글자 단어를 랜덤으로 뽑아오는 코딩.
하단 키보드 구현을 위해서 눌렀던 글자 핸들링.
강의 내용과 위 두가지 정도만 할 수 있다면 기본은 하겠네유;

[@조아라-i9m]

ㅋㅋ 따라친다고 실력 상승하는 거 아니랰ㅋㅋㅋㅋ웃겨요

[@snoudoubts1745]

뼈 때리는…

[@KGeeeU]

근데 예를 들어 답이 abcde 인데 입력이 faaaa 이면 a 4개는 다 노란색 되는게 맞는건가요??
a 갯수는 하나니까 맨 앞 a 만 노란색 되야되는건 아니려나..?

[@codingapple]

맞읍니다

[@jamesban]

이런 경우에는 a하나만 노란색이고 나머지는 다 회색 됩니다. 만약 a 하나가 맞는 위치에 있으면 그 하나만 초록색이고 나머지는 회색 되고요. 만약 정답이 aabcd 인데 zzaaz을 입력하면 a둘다 노란색이고, azaaz을 입력하면 맞는 위치에 있는건 초록색, 하나는 노란색, 하나는 회색으로 뜹니다

[@woonseol123]

저도 같은 문제로 고민 중인데... 방법이 있나요...? 저는 막 else if를 하나 더 만들고.... 난리를 쳤거든요.....

[@김민수-y6i2l]

8:55 강의중에 "왜그려냐구요? 비밀이구요 " ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@minseokwon6484]

???: 이건 어떻게 하나요?
???: 네~알려드렸습니다~

[@하이퍼노마드]

입력 예외처리도 해야되구 은근 자잘하게 할 게 많네요 ㅋㅋ 잘봤습니다!

[@lesh6842]

저렇게 간단하다니...

[@dalaymann]

좋은 주제네요

[@tem4rary]

위대한 코딩애플 👍

[@purple7814]

1빠! 오늘도 감사합니당! ㅎㅎ

[@깜냥-f5i]

선생님 자바스크립트 프젝 더 부탁드려요😢 제일 이해 잘가게 알려주심 흑흑 개쌉문과 디자이너가 부탁드립니다😢😢

[@가명임]

요즘 한창 뜨는 데브 옵스도 한번 다뤄주세요 !

[@이진우-j6d]

와 지린다 ㄷㄷ

[@햄도그o]

와 하는법 드디어 알아갑니다 ㄱㅅ

[@카를페르루스]

왜 코딩이 알고리즘에 뜨는거지?
코딩 노예로 전직하란 거신가?

[@Alice-u8r9p]

한... 한 달전 쯤 부터 북미쪽 게임 스트리머들이 엄청 하더라구여

[@tangO_Ov]

코딩애플특) 개쉬움

[@moory1791]

bullcow게임이네요 ㅋㅋ

[@dangdangi-slime]

이거 오류 왜 생기는지 모르겠네요 에서 마지막 괄호 표시가 오류 난다는데...



Document

input {
width: 50px;
height: 50px;
font-size: 40px;
text-align: center;
}






제출

var 답 = 'mouse';
document.querySelector('button').addEventListener('click',function(){
var input = document.querySelectorAll('.input');
for(let i = 0; i < 5; i++){
if (input[i].value == 답[i]){
input[i].style.background = 'green';
} else if (답.includes(input[i].value)){
input[i].style.background = 'yellow';
} else {
input[i].style.background = 'lightgrey';
}
input[i].classList.remove('input');
}

var template = '





';
document.querySelector('body').insertAdjacentHTML('beforeend', template);
})

정확히 이렇게 적었는데 왜 오류가 날까요...?

[@칠성-n7i]

' -> `

[@andy_0110]

야구게임과 흡사하네용

[@열사사]

숫자야구 비슷하네요

[@tv-nt7cj]

아무리 해도 안되 네요



워들






제출

var 답 = 'drink';
document.querySelector(

[@not-apple-Korea]

"ligntgray" 가 아니라 'lightgray'인것 같습니다

[@민준홍-d1t]

오타 있습니다 button태그 쪽 잘 살펴보세요

[@쾌걸조로-w9n]

내가 산 로또, 당첨 번호 확인 하기

[@유환-k9h]

7:20

[@puhahah7167]

숫자 야구 단어판 이네요?

[@dalidaganumerzer]

킹받네 안알랴줌

[@serene3431]

엄마준비식사ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@mimir3100]

야구겜 같은 거네요

[@아이니아]

오

[@나는야퉁퉁이-d5x]

뭐라는거야 십알.. 코딩 하나도 모르는데 왜 뜨는거얌,.

[@HongJeKim]

어서와

[@soohwan8701]

ㅋㅋㅋ 이제부터 알아가시면 됩니다 :)

[@enslow]

어서와 코딩노예는 처음이지?

[@조원기-f8l]

ㅋㅋㅋ

[@띠로링-g3k]

비밀ㅋㅋ 안알랴줌

[@안한다고안해색갸]

그래서 input클래스 왜지우는지 누가 알려주실분?

[@gpwl9610]

class명이 input인 놈들을 가져와서 답과 일치하는지 반복문을 돌리며 확인 > 확인 완료 후 input 클래스가 5개 더 생김 > 다시 제출 버튼 클릭 시 기존에 입력한 input들의 값을 다시 확인하게됨(중복 검사) + 반복문 횟수를 5회로 지정했기때문에 처음 입력한 input만 답과 비교하여 확인하게 됨
>> 기존에 확인한 input을 지우면 위의 문제가 간단히 해결되니까 지운다고 이해했습니다.

[@okabari]

input 이라는 클래스를 다시 써야되니까요; 안지우면 전거랑 같은 클래스 이름. 중복으로 들어가겠죠