javascript, html, css를 익숙하게 하기 위해 간단한 todolist를 선택했다.
전체적인 틀부터 하나하나 생각하며 코드를 짜보니 생각보다 시간도 많이 걸리고 자바스크립트가 어렵다는 것이다. 하지만 결과물을 완성하고 나서는 바로 바로 보이는 화면구현의 재미와 전체적인 흐름 이해, 모르는 것은 직접 검색하며 찾다보니 이러한 과정 자체가 내 것이 될 수 있다는 점이 좋았다.
📌구현기능
만들기전 구현하고 싶은 기능을 크게 몇가지로 나누었다.
📌구현방법
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<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>
<link rel="stylesheet" href="style.css"/>
...
</head>
<body>
<div class="wrapper">
<header>TodoList</header>
<div class="inputField">
<input type="text" id="addValue" placeholder="할 일 추가하기" autofocus/><!--자동포커스-->
<button type="button" id = "btn" onclick="addTodo()"><i class="xi-plus xi-2x"></i></button>
</div>
<div>
<ul id="addTodo" class="Todolist">
<li><div id='result'></div></li>
</ul>
</div>
<div class="footer">
<button type="button" id = "allClear" onclick="allClearList()">모두 삭제</button>
</div>
</div>
<script src="list.js"></script>
</body>
</html><head>에 css파일 링크를 연결하고,
<body>에 할 일 입력창과, 할 일 추가를위해 아이콘을 사용한 +버튼
마지막에는 모두 삭제 버튼을 만들어서 TODOLIST의 기본적인 틀을 만들었다.
2.CSS
기본적인 코드는 생략하고 중요한 부분만 적기로했다.
body{
height: 100vh;
width: 100%;
background: linear-gradient(to bottom, #E6E6FA 0%, #FFF0F5);linear-gradient : 배경 그라데이션
to bottom을 써서 위에서 아래 방향으로 색 그라데이션을 지정했다.
.inputField input{
color: black;
padding-left: 15px;
width: 600px;
height: 100%;
border: none;
font-size: 15px;
border-radius: 5px;
outline: none;
}outline: none; : 클릭시 테두리 안보이게 지정
.inputField button{
width: 50px;
height: 100%;
border: none;
border-radius: 3px;
background: rgb(6, 6, 6);
cursor: pointer;
}cursor: pointer;을 사용해 ➕버튼에 마우스를 올리면 👆모양으로 바뀌도록 지정했다.
.Todolist li{
width: 650px;
list-style: none;
line-height: 40px;
position: relative;
margin-bottom: 9px;
text-indent: 15px;
background: rgb(241, 242, 241);
border-radius: 3px;
font-weight: 400;
cursor: pointer;
}list-style: none; 으로 li에 기호나 숫자 표시를 없앴다.
line-height: 텍스트간의 줄 간격을 조절할 때 사용
text-indent : 들여쓰기
.wrapper .footer{
font-weight: 600;
text-indent: 15px;
display: flex;
width: 100%;
margin-top: 30px;
justify-content: right;
}justify-content : 가로 축을 기준으로 좌우에 대한 정렬을 사용해 모두 삭제 버튼을 오른쪽에 위치하도록 했다.
.footer button:hover{
color : rgb(6, 6, 6);
background-color: white;
}:hover 이벤트를 사용해 마우스를 버튼에 올렸을 때 배경색과 글씨 색이 변하도록 지정했다.
3.JavaScript
🖇️1.할일 추가 + 2.특정목록 삭제 +3.경고창
const btn = document.getElementById('btn'); //버튼
let addValue = document.getElementById('addValue'); //할일 입력
let result = document.getElementById('result'); //추가된 할일
//할일 추가시
function addTodo(){
if(addValue.value==false){ /*''도 가능 */
alert('내용을 입력하세요!');
}else{
let list = document.createElement("li");
let del = document.createElement('button');
list.innerHTML = addValue.value;
result.appendChild(list); //추가된 할일에 할일 리스트 추가하기
list.appendChild(del); //할일 리스트 추가시 삭제버튼도 추가
del.innerText = "x"; //삭제버튼에 들어갈 'x'자 문자
del.style.fontSize = "20px";
del.style.border = "none";
del.style.float = "right";
del.style.right = "17px";
del.style.marginTop = "10px";
del.style.cursor = "pointer";
del.addEventListener("click", deleteList); //삭제버튼 클릭시 리스트지우기 이벤트 실행
del.style.position='relative';
})
}
}
//할일 목록 삭제시
function deleteList(e){ //삭제 버튼(x) 클릭시
let removeOne = e.target.parentElement; //선택한 목록 한개만 지우기(부모 객체를 지운다)
removeOne.remove();
}1.할일 추가하기
할일을 입력하고 ➕버튼 클릭시 실행 되는 함수로 list변수에 li형태로 createElement를 사용해 생성할 엘리먼트를 담고, innerHTML을 사용해 새로운 할일 변수에 값이 들어오면 list에 담는다.
그 다음에 값이 담긴 list를 appendChild을 사용해서 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙여서 노드를 현재 위치에서 새로운 위치, 여기선 보여지기 목록 result에 계속 추가되도록 했다.
2.특정 목록만 삭제하기
할일이 입력된 후 삭제할 수 있는 ❌ 버튼도 동시에 생성되도록 했다.
innerText를 사용해 삭제 버튼에 들어갈 문자를 지정했고, del코드가 깔끔하지 않은데 x버튼의 위치가 계속 틀어지는 바람에 위의 코드처럼 작성했다.
삭제 버튼 클릭시 deleteList함수가 실행되고 .target.parentElement로 부모 태그를 찾으면 해당하는 목록만 지우도록했다.
3.비어있는 입력창을 추가할 때 경고창 뜨기
if문으로 할 일 변수에 들어온 값이 없을때 alert를 사용해서 내용을 입력하라는 경고 메시지 창을 띄워 빈 값이 추가되지 않도록 했다.
🖇️4.목록 완료
function addTodo(){
addValue.value = ""; //할일 입력창 초기화
addValue.focus(); //강제 커서 깜빡임
list.addEventListener("click", function(){ //할일 완료 후 클릭시 밑줄로 표시
list.style.textDecoration = "line-through";
list.style.color = "gray"; //클릭시 색변환
})
}
}이 코드도 할 일 추가 함수에 같이 작성했는데 기능을 나눠서 설명하기 위해 잠시 코드를 분리했다.
할 일 목록이 추가돼면 입력창이 초기화 되도록했고, focus() 로 입력창에 포커스를 줘서 입력할 때마다 창을 클릭해야하는 번거로움을 없앴다.
그리고 addEventListener으로 목록 완료 후 클릭하면 .style.textDecoration을 사용해 글씨 가운데 줄이 그어지도록 했으며, 글 색변환도 주었다.
🖇️5.전체 목록 삭제 + 선택,경고창
function allClearList(e){
if(confirm("정말 삭제하시겠습니까?")==true){ //취소메시지가 true(ok)일때
if(result.innerText==''){ //목록칸이 비어있다면
alert("삭제할 목록이 없습니다"); //삭제할 목록이 없다는 경고창뜨기
}else{ //삭제할 목록이 있다면
result.innerText=''; //전체 삭제
}
}else{ //취소메시지가 false(no)일때
return false; //삭제 취소
}
}전체 목록 삭제는 if문으로 경고창과 함께 실행되도록 했다. 모두 삭제 버튼 클릭시 confirm창이 뜨면서 사용자가 Ture , False 값을 리턴받을 수 있도록 했다. 사용자가 확인을 클릭하면 삭제가 가능하도록 innerText==''로 값이 비워지게 했고, 취소를 하면 실행되지 않는다.
그리고 if문 안에 다시 if문을 사용해서 목록칸이 비어있는 경우엔 삭제할 목록이 없다는 alert 경고창이 뜨도록 했다.
투두리스트를 만들면서 느낀 점은 머리속으로 생각한 코드를 직접 구현하는 것은 생각보다 만만치 않다는 것이었다. 보완할 점은 다음에는 수정하기 기능을 추가해 보려고 한다.
🔗완성된 코드🔗
body-addTodo-result에서
왜ul과li를 사용하신건가요?