[JavaScript] 위시리스트 만들기

JavaScript
[JavaScript] 위시리스트 만들기

퓨어맨 2022. 5. 30. 08:53
<!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>위시리스트</title>
    <link rel="StyleSheet" href="css/input.css">
    <link rel="StyleSheet" href="css/list.css">
</head>
<body>
    <div id = "wrapper">
        <h2>나의 위시리스트</h2>
        <!-- onsubmit = return false : 새로고침 안되게 만드는 방법-->
        <form onsubmit="return false">
            <input type = "text" id = "item">
            <button id = "add" class = "addBtn">추가</button>
        </form>
        <!--위시리스트를 추가할 때마다 해당하는 데이터가 하나씩 추가될 공간-->
        <div id = "itemList">
            <ul>
                <li>
                    스카이다이빙하기
                    <span class = "close">X</span>
                </li>
            </ul>
        </div>
    </div>

    <script>
        // 1. 사용자가 추가하기를 누른 데이터를 가져와서
        //    itemList안쪽에다가 ul 태그 형식으로 출력
        // 1-1) 태그들 가져오기
        let btn = document.getElementById('add')
        // input 태그 가져오기
        let input = document.getElementById('item')

        // itemList라는 id 값을 가진 div 태그 가져오기
        let list = document.getElementById('itemList')

        // 배열 하나 생성하기(어디에 생성해야 할까?)
        let arr = []

        // itemList라는 div 태그 안에
        // 내가 추가한 데이터를 전부 집어넣어주고
        // span태그에게 클릭이벤트를 추가해주는 함수
        let show = function(){
                let content = '<ul>'
                // div 태그 내부에 배열의 마지막 인덱스 데이터부터
                // 순차적으로 배치해서 출력하기
                for(let i = arr.length-1; i>=0; i--){
                    content += '<li>'+arr[i]+'<span id = "'+i+'" class = "close">X</span>'+'</li>'
                }
                content += '</ul>'
                // div 태그 안쪽에 ul 태그 형식으로 해당하는 데이터 보여주기
                list.innerHTML = content

                // 2. span 태그를 가져오기
                let span = document.querySelectorAll('span')

                // 3. span 태그들에게 전부 클릭 이벤트를 걸어주기
                for(let i = 0; i<span.length; i++){
                    // 참조하는 형식으로 추가해주기
                    span[i].onclick = remove
                }
        }

        let remove = function(){
                    // 4. 내가 클릭한 span태그와 대응되는 배열안에 데이터를 삭제하기
                    arr.splice(this.id,1)
                    // this 키워드는 클릭이벤트가 발생한 태그 자체를 의미한다.
                    
                    // 5. 다시 사용자에게 div 태그 안쪽에 ul 태그들을 보여주기
                    show()
        }


        // 1-2) 버튼에 이벤트 처리하는 기능 추가하기
        btn.addEventListener('click',()=>{
            // 1-3) input 태그 안에 있는 글자 가져오기
            let text = input.value

            // 클릭할 때마다 배열 안에 input 태그안에 있는 글자 추가하기
            arr.push(text)

            // 1-4) 출력하기
            show()

            // 1-5) input 태그 안에 있는 글자 지우기
            input.value = ''
        })


    </script>
</body>
</html>