데브리
// console.log(window);
// const form = document.getElementById('todo-form');
// getElementByClassName('item')
// getElementByTagName('li')
// const form = document.querySelector("#todo-form")
// console.log(form);
// const items = document.querySelectorAll('.item');
// console.log(items);
// items.forEach((item)=>console.log(item));
const todos = document.querySelector("#todo-list");
console.log(todos);
todos.style.background = "pink";
// 삭제
// todos.remove();
todos.lastElementChild.remove();
todos.firstElementChild.textContent = 'textContent교체';
todos.lastElementChild.innerHTML = '<h2>innerHTML</h2>';
// const button = document.querySelector('.submit');
// button.addEventListener('click', function(){
// console.log('clicked!!!')
// }) // 자동 새로고침. 이벤트 발생
const button = document.querySelector('.submit');
button.addEventListener('click', function(e){
e.preventDefault();
console.log(e);
console.log(e.target); // <button ~> </button> 반환
//버튼 글자 바꾸기
e.target.style.color = 'red';
console.log('clicked!!!')
})
const todoInput = document.querySelector('#todo-input');
const msg = document.querySelector('#msg')
// onSubmit(e) 함수 만들기
button.addEventListener('click', onSubmit)
function onSubmit(e){
e.preventDefault();
// 인풋 안에 집어넣을 li
if(todoInput.value === ''){ // 공백이면, 입력 안되게 처리
msg.style.display = 'block'; // <-- display:none
setTimeout(()=>msg.style.display='none', 2000)
return;
}
const li = document.createElement('li');
li.appendChild(document.createTextNode(todoInput.value));
li.classList.add('item');
todos.appendChild(li);
todoInput.value = ''; // 작성 후, 내용 지우기.
console.log(todoInput.value);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="todo_list.css">
<title>됩니깡</title>
</head>
<body>
<div class="header">
<h1>Javascript DOM</h1>
</div>
<div class="content">
<form id="todo-form">
<div>
<label for="todo-input">할 일</label>
<input type="text" id="todo-input">
</div>
<button class="submit">저장</button>
</form>
<p id="msg">안내 메시지</p>
<ul id="todo-list">
<li class="item">1.</li>
<li class="item">2.</li>
<li class="item">3.</li>
<li class="item">4.</li>
</ul>
</div>
<script src="todo_list.js"></script>
</body>
</html>*{
margin: 0;
padding: 0;
}
.header {
background: #3b5999;
color: #fff;
padding: 1rem;
text-align: center;
}
/* 레이아웃 잡기 */
.content {
display: flex;
flex-direction: column;
align-items: center;
}
#todo-form {
width: 300px;
height: 30px;
margin-top: 8rem;
display: flex; /*좌우 정렬*/
align-items: center;
justify-content: space-around;
padding: 1rem;
}
label {
font-weight: bold;
margin-right: 0.5rem;
}
input {
padding: 0.1rem;
height: 20px;
}
button {
border: none;
background: #3b5999;
color: #fff;
padding: 0.3rem 0.5rem;
border-radius: 0.2rem;
}
#todo-list {
margin-top: 3rem; /* 에러 메세지 표시 위한 간격 */
list-style: none;
width: 300px;
padding-left: 2rem;
}
.item{
padding: 1rem;
}
#msg {
font-size: 12px;
color: red;
display: none;
}https://www.youtube.com/watch?v=2FD4mW6xCJM&list=PLpJDjPqxGWGoZMK7iCyGJiIcHwAkIAvk5&index=5
'자바스크립트 예제' 카테고리의 다른 글
| new Audio() 사용 (0) | 2023.01.04 |
|---|---|
| js 타임앤타이머 기록 (1) (0) | 2023.01.03 |
| 디지털 시계 : new Date() -> getMonth()+1, getDate(), getDay() (0) | 2022.12.31 |
| 스톱워치 + 타이머 예제 (setInterval & clearInterval) (0) | 2022.12.31 |
| [노마드코더] snowflake (0) | 2022.12.30 |
| 노마드 ToDo ( javascript - react) (0) | 2022.12.17 |
| js 예제: clock - todo_list_날씨받기 (0) | 2022.11.06 |
| 환전(데이터 객체로 저장, foreach) (0) | 2022.11.02 |
댓글