LocalStorage를 이용해서 todolist만들기

회사에서 시간을 짬내 LocalStorage로 todolist를 만들어보았습니다.

제가 사용 한 코드가 다른 코드보다 조금 더 깔끔하지 못할 수 있다는 부분 이해 해주시길 바라겠습니다!

html

<div class="todo-add-item">
        <div class="input-wrap">
            <h1>일정을 등록하세요</h1>
            <input type="text" id="myInput">
            <button onclick="addTodo()" class="todo_btn">추가</button>
        </div>
        <ul class="todo_list"></ul>
</div>

javascript

const input = document.querySelector('input');
const todoBtn = document.querySelector('.todo_btn');
const todoUl = document.querySelector('.todo_list');

let myArr = JSON.parse(localStorage.getItem('todo')) || [];

function addTodo() {
  	let inputVal = input.value;
  
  	if (inputVal !== '') {
    	myArr.push(inputVal);
    	localStorage.setItem('todo', JSON.stringify(myArr))
    	console.log(JSON.parse(localStorage.getItem('todo')));
    	input.value = '';
    	createEl(inputVal);
  	}
}

input.addEventListener('keydown', (e) => {
  	let inputVal = input.value;
  
    if (e.keyCode === 13 && e.target.value !== '') {
      	myArr.push(inputVal);
      	localStorage.setItem('todo', JSON.stringify(myArr))
      	input.value = '';
      	createEl(inputVal);
    }
})

function createEl(content) {
  	if (JSON.parse(localStorage.getItem('todo')).length !== 0) {
    	const li = document.createElement('li');
    	const span = document.createElement('span');
    	const button = document.createElement('button');
    	button.className = 'delete_btn';
    	span.innerHTML = content;
    	button.innerHTML =`X`
    
    	button.addEventListener('click', function () {
      		this.parentElement.remove();
      		const findIndex = myArr.indexOf(content);
      		myArr.splice(findIndex, 1);
      		localStorage.setItem('todo', JSON.stringify(myArr))
    	})
      
    	todoUl.appendChild(li);
    	li.appendChild(span);
    	li.appendChild(button);
  	}
}

myArr.forEach(createEl);