To Do List에서 할 일을 입력하여 추가하는 코드부분
<ul id="daily-todo-list"></ul>
안에 삽입해야 함 ✔
- submit 이벤트 발생 시 form태그가 자동으로 전송되는 걸 막고, 엔터키를 눌렀을 때 할 일에 적힌 값 가져오기
- 할일 입력받고, 엔터키 입력으로 추가 ✔
function App() {
//submit 이벤트가 발생했을 때 form태그 자동으로 전송되는 것을 막아줌
document.querySelector('#daily-form').addEventListener('submit', e => {
e.preventDefault();
});
document.querySelector('#daily-todo').addEventListener('keypress', e => {
console.log(e.key);
if (e.key === 'Enter') {
console.log(document.querySelector('#daily-todo').value); //value 속성으로 값 가져올 수 있음
}
});
}
App();
querySelector
는 HTML을 태그를 선택한다.(제일 처음에 있는 태그를 선택함)$
를 붙여서 사용한다.const $input = document.querySelector('input');
document.querySelector('body #target button'); //길다
submit
이벤트가 있다. submit은 form안에 버튼을 눌렀을 때 페이지가 새로고침되는 현상이 있음(기본동작)click
이벤트가 발생하지만 form에도 submit
이벤트가 발생한다. HTML에는 가끔 기본동작되는 것들이 있어서 저런 식으로 따로 막아줘야한다.
document.querySelector
반복되는 부분 코드 수정- 추가되는 할 일의 마크업은
<ul id="daily-todo-list"></ul>
안에 삽입해야 함 ✔
-->insertAdjacentHTML
엔터 키를 눌렀을 때li
태그 삽입
const $ = selector => document.querySelector(selector); //한줄로 써서 해당 부분을 바로 return💛
function App() {
//submit 이벤트가 발생했을 때 form태그 자동으로 전송되는 것을 막아줌
$('#daily-form').addEventListener('submit', e => {
e.preventDefault();
});
$('#daily-todo').addEventListener('keypress', e => {
console.log(e.key);
if (e.key === 'Enter') {
const dailytodo = $('#daily-todo').value;
const todoItemTemplate = dailytodo => { //사용자가 입력한 할 일을 인자로 받아와서 li태그에 넣음
return `
<li>
<span>${dailytodo}</span>
<button
type="button"
>
수정
</button>
<button
type="button"
>
삭제
</button>
</li>
`;
};
$('#daily-todo-list').insertAdjacentHTML( //💚
'beforeend',
todoItemTemplate(dailytodo)
);
}
});
}
App();
element.innerHTML
element.insertAdjacentHTML(position, text)
'beforebegin'
: element 앞에'beforebegin'
: element 안에 가장 첫 번째 child'beforeend'
: element 안에 가장 마지막 child'afterend'
: element 뒤에
- 총 할 일 개수를 count하여 상단에 보여줌 ✔
엔터 키 입력 시, todo 개수 체크하는 부분 코드 추가
-> li 개수 카운팅- 할 일이 추가되면 input은 빈값으로 초기화 ✔
const todoCount = $('#daily-todo-list').querySelectorAll('li').length; //querySelectorAll을 사용해서 모든 li태그를 가져옴
$('.todo-count').innerText = `총 ${todoCount}`;
$('#daily-todo').value = ''; //value값 조정 //$('input').value = '';도 됨
나는 변수를 선언하고 엔터 키를 눌렀을 때 +1해주는 걸 생각했었다(되긴 함)
querySelectorAll
로 해당 id의 li
태그들을 모두 가져오고 length
로 li
들의 개수 체크
- 만약 입력값이 빈값이라면 추가되지 않음 ✔
- 할 일 입력받고 확인 버튼 클릭하면 추가 ✔ -onSubmit 함수로 빼서 사용
const $ = selector => document.querySelector(selector); //한줄로 써서 해당 부분을 바로 return
function App() {
//submit 이벤트가 발생했을 때 form태그 자동으로 전송되는 것을 막아줌
$('#daily-form').addEventListener('submit', e => {
e.preventDefault();
});
const onSubmit = function () { //💜💙
if ($('#daily-todo').value === '') { ////💜💙
alert('값을 입력해주세요');
return;
}
const dailytodo = $('#daily-todo').value;
const todoItemTemplate = dailytodo => {
return `
<li>
<span>${dailytodo}</span>
<button
type="button"
>
수정
</button>
<button
type="button"
>
삭제
</button>
</li>
`;
}; //사용자가 입력한 할 일을 인자로 받아와서 li태그에 넣음
$('#daily-todo-list').insertAdjacentHTML(
'beforeend',
todoItemTemplate(dailytodo)
);
const todoCount = $('#daily-todo-list').querySelectorAll('li').length; //querySelectorAll을 사용해서 모든 li태그를 가져옴
$('.todo-count').innerText = `총 ${todoCount}`;
$('#daily-todo').value = ''; //value값 조정
};
//확인 버튼 클릭 시
$('#daily-form-submit-button').addEventListener('click', onSubmit);
//엔터 키 입력 시
$('#daily-todo').addEventListener('keypress', e => {
if (e.key !== 'Enter') {
return;
}
onSubmit();
});
}
App();
<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>TodoList</title>
</head>
<body>
<div id="app">
<div class="display-flex justify-center">
<header>
<a href="/" class="text-black">
<h1 class="text-center font-bold">🍋TO DO LIST🍍</h1>
</a>
<nav>
<button>Daily</button>
<button>Weekly</button>
<button>Monthly</button>
<button>Yearly</button>
</nav>
</header>
<main class="display-flex justify-center">
<div>
<div class="display-flex justify-between">
<h2>오늘 계획</h2>
<span class="todo-count"></span>
</div>
<form id="daily-form">
<div>
<label for="daily-todo" class="input-label" hidden>
할 일
</label>
<input
type="text"
id="daily-todo"
name="dailyTodo"
placeholder="할 일"
autocomplete="off"
/>
<button
type="button"
name="submit"
id="daily-form-submit-button"
>
확인
</button>
</div>
</form>
<ul id="daily-todo-list"></ul>
</div>
</main>
</div>
</div>
<script type="module" src="./src/js/index.js"></script>
</body>
</html>