today i learned 8/27 VanillaJS를 이용한 해시태그 기능 추가

해시태그 기능 구현 (미완성)

기존에 다른 프로젝트에서 진행하고 있는 관련 용어 기능을 차용하여 해시태그 기능으로 만들었다.

 

JS

        // 해시 태그 부분 //
        var elements = document.getElementById('element');
        var taskSubmit = document.getElementById('btn_add_task');
        var taskBox = document.getElementById('text_task');
        var taskList = document.getElementById('list_tasks');

        document.addEventListener('click', function(e) {
            e.preventDefault();
            var task = taskBox.value.trim();
            var newLI = document.createElement('li');
            newLI.innerText = '#';
            var removeBtn = document.createElement('button');
            var element = newLI.appendChild(document.createTextNode(task));

            if (taskBox.value != "")  {
                taskList.appendChild(newLI);
                taskList.appendChild(removeBtn);
                removeBtn.addEventListener('click', function() {
                removeBtn.parentNode.removeChild(removeBtn);
                newLI.parentNode.removeChild(newLI);
            });
            }
            taskBox.value = '';
        }, false);

        document.addEventListener('keydown', function(e) {
        var task = taskBox.value.trim();
        var newLI = document.createElement('li');
        newLI.innerText = '#';
        var removeBtn = document.createElement('button');
        var element = newLI.appendChild(document.createTextNode(task));
        if ((taskBox.value != "") && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 32))  {
            e.preventDefault();
            taskList.appendChild(newLI);
            taskList.appendChild(removeBtn);
            taskBox.value = '';
            removeBtn.addEventListener('click', function() {
                removeBtn.parentNode.removeChild(removeBtn);
                newLI.parentNode.removeChild(newLI);
            });
        }
    }, false);

keydown만 구현했더니 Add 버튼(Submit)을 눌렀을 때 해시태그가 추가되지 않는 오류가 생겨서 두 event에 대한 함수를 각각 만들었다. 이게 비효율적인 코드라고 생각하긴 하는데 내가 아는 대안이 없어서 일단 이렇게 했음 ㅠ 

 

HTML

            <input type="text"
            autocomplete="off"
            class="form-control"
            placeholder="Post A Review"
            id="text_task"
            style='outline: none; border: none; width: 140px;
                margin-block-start: 1.67em; margin-block-end: 1.67em;
                margin-left: 30px; font-family: "GmarketSansLight";'>
            <button type="submit" id="btn_add_task" class="btn btn-primary">Add</button>

CSS는 별로 안중요하니 생략한다. 삭제버튼 이미지는 대충 넣은 거라 저퀄인 상태다.

엔터, 콤마, 스페이스바를 누를 때마다 추가되는 newLI에 대해 .innerText = '#' 을 추가해줌으로써 추가했을 때 #가 앞에 붙는 효과를 만들었다. 일단 기본적으로 뜨게 하는 방법은 해결을 했으나, 앞으로 해야 될 게 많이 남았다.

 

문제점

1) 해시태그가 계속 추가되다보면 창 바깥으로 나가버림.

2) 중복된 태그를 계속 추가할 수 있음.

3) 콤마, 스페이스바를 눌러서 추가하게 하는 기능을 넣었는데, 문제는

   3-1) 영어에서만 제대로 작동함(한글에선 콤마나 스페이스바 최초 입력시 그대로 value에 추가됨)

   3-2) 콤마나 스페이스바 만 눌렀을 때에 역시 value에 추가되고, 콤마를 두번 누르면 value에 콤마 하나가 들어간 채로 추가됨

 

JS가 쉽지않다 ㅠㅠ 문제점을 고쳐나가는 방향으로 코딩해야겠다..