1. To-Do List
미니프로젝트랍시고 요새 바닐라JS로 이것저것 만들고는 있지만.. 혼자 하다보니 코드들이 어디 내놓기 너무너무 부끄러운 수준이다^_ㅠ 그래서 안올리는데 이거는.. 진짜 어이없는 실수로 1시간 반동안 헤매다가 완성해서 다시는 이런 짓을 하지 않으리라는 다짐을 하기 위해 올림.
그 실수란.. 삭제 버튼의 클래스 네임에 삭제할 리스트의 아이디를 주고(사실 이 아이디도 아주아주 낮은 확률이기는 하지만 같은 수가 나올 수도 있어서 완벽하지 않음ㅎㅅㅎ) 쿼리셀렉터로 버튼을 찾았는데 크롬에서 자꾸 이건 셀렉터가 아니라고 하는 것이다. 그래서 'variable로 저장된 클래스 이름은 쿼리셀렉터로 못찾나??'하면서 구글링 했는데 된다는 것이다. 뭐가 문제인지 고민하다가 깨달았음. 클래스랑 아이디가 Math.random, 그러니까 숫자로 시작해버렸다는걸^^... 진짜 넘 멍청하다!ㅎㅎ
2. Codes
(1) HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/style.css">
<script src="./assets/app.js" defer></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
/>
<title>To-Do Lists</title>
</head>
<body>
<div class="main">
<form id="main_form">
<h1>To-Do Lists</h1>
<div class="get_input">
<input type="text" id="todo" placeholder="What should I do today?">
<button id="submit_btn">Click!</button>
</div>
</form>
<div class="todo_container">
<ul id="todo_list"></ul>
</div>
</div>
</body>
</html>(2) CSS
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600&display=swap');
* {
box-sizing: border-box;
font-family: 'Baloo 2', cursive;
}
body {
background-color: rgb(243, 225, 228);
text-align: center;
}
.main {
display: fixed;
background-color: rgba(255, 255, 255, 0.829);
text-align: center;
width: 800px;
padding: 4rem 10rem;
margin: 0 auto;
margin-top: 5%;
border-radius: 20px;
box-shadow: 0px 10px 19px -5px rgba(107,107,107,1);
}
h1 {
margin: 0;
font-weight: 800;
font-size: 3rem;
}
#todo, #submit_btn {
font-size: 1rem;
}
#todo {
border: 1px solid steelblue;
border-radius: 5px;
margin-top: 20px;
width: 400px;
}
#submit_btn {
background-color: pink;
border: none;
cursor: pointer;
padding: 0.1rem 1rem;
}
#del-btn {
background: none;
color: rgb(177, 49, 49);
font-size: 1.2rem;
float: right;
border: none;
cursor: pointer;
margin-right: 1rem;
}
li {
list-style: none;
text-align: left;
margin-bottom: 5px;
font-size: 1.4rem;
}(3) JavaScript
const todoInput = document.getElementById('todo');
const submitBtn = document.getElementById('submit_btn');
const todoList = document.getElementById('todo_list');
const addListHandler = () => {
const listItem = todoInput.value; //get the input value
const eachList = document.createElement('li'); //create li
eachList.id = 'id'+Math.floor(Math.random()*9999999); //make each list an id
let listId = eachList.id.toString();
eachList.innerHTML = `<span>${listItem}</span><button id="del-btn" class="${listId}"><i id="del-btn__btn" class="far fa-trash-alt"></i></button>`
todoList.append(eachList);
const delBtn = eachList.querySelector('.'+listId);
const delListHandler = () => {
const delList = delBtn.parentElement;
delList.remove();
}
delBtn.addEventListener('click',(e) => {
e.preventDefault();
delListHandler();
});
}
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
addListHandler();
todoInput.value = '';
});
지금 카톡 프사가 이거라서 그런걸까?
https://dev.to/ninahwang