간단히 사용할 스티커 메모를 만들어보자!

자주 가는 예제 사이트를 보다가 자바스크립트를 사용하여 스티커 메모를 만든 예제를 보았다.

업무 할 때 유용하게 사용 될 것 같아 따라서 코딩을 해봤다!

 

메모를 입력할 수 있는 div를 클릭하면 텍스트를 넣고 엔터키를 누를경우 새로운 div가 추가되게끔

appendChild 메소드를 활용했다. 

 

자바스크립트 코드는 다음과 같다.

    <script>

        let createBox = document.getElementsByClassName('createbox')[0];

        let notes = document.getElementsByClassName('notes')[0];

        let input = document.getElementById('input_memo');

        let i = 0;

        createBox.addEventListener('keydown', content);

        document.getElementById('create').addEventListener('click', function(){

            createBox.style.display = 'block';

        });

        function content(e){

            if(e.keyCode == '13'){

                divStyle(input.value);

                input.value = "";

                createBox.style.display = "none";

            }

        };

          function color(){

            let randomColors = ["#bbe364", "#eeace6", "#8ad0f0", "#c19ddb", "#e9d194"];

            if(i > randomColors.length - 1){

                i = 0;

            }

            return randomColors[i++];

        };

        function divStyle(text){

            let div = document.createElement("div");

            div.className = "note";

            div.innerHTML = '<div class="details">'+'<h3>'+text+'<h3>'+'</div>';

            div.addEventListener("dblclick", function(){

                div.remove();

            })

            div.setAttribute("style", "background:"+color()+"");    

            notes.appendChild(div);

        };

    </script>

영상을 보며 따라했는데 얼마든지 자유롭게 수정 할 수 있으며, 혼자 메모 적기 편리해서 자주 사용할 듯 하네 ㅎㅎㅎ

 

스티커메모 결과 화면