[js] 자바스크립트로 끝말잇기 구현하기

자바스크립트를 이용하여,
끝말잇기를 구현하는 예제입니다.

예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다.

순수 자바스크립트

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        //화면구성
        let body = document.createElement('h1');
        document.body.append(body);
        body.textContent = '끝말잇기';
        //제시단어
        let firstWord = document.createElement('div');
        firstWord.textContent = '시작';
        document.body.append(firstWord);
        let form = document.createElement('form');
        document.body.append(form);
        let input = document.createElement('input');
        form.append(input);
        let btn = document.createElement('button');
        btn.textContent = '클릭'
        form.append(btn);
        let result = document.createElement('div');
        document.body.append(result);

        //버튼 클릭이벤트
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            //제시단어.textContent의 마지막 글자 = input.value의 첫글자
            if (firstWord.textContent[firstWord.textContent.length - 1] == input.value[0]) {
                result.textContent = '딩동댕'
                firstWord.textContent = input.value;
                input.value = '';
                input.focus();
            } else {
                result.textContent = '땡'
                input.value = "";
                input.focus();
            }
        })
    </script>
</body>

</html>

화면 결과(Result 클릭)

저작자표시 비영리 변경금지

'💻CODING > javascript' 카테고리의 다른 글

[js] 자바스크립트로 틱택토 구현하기 (ft. e.target.value, forEach) (0)	2020.12.22
[js] 자바스크립트로 숫자야구 게임 구현하기 (0)	2020.12.18
[js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) (0)	2020.12.12
[js] 자바스크립트로 검색 기능 구현하기 (9)	2020.12.07
[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) (2)	2020.12.06