(1) html 틀 만들기
- ul, li 리스트 생성은 했지만, 추후 자바스크립트에서 classList 로 새로 생성했기때문에
자바스크립트 작성 후엔 주석처리했음
-
<!DOCTYPE html>
<html lang="ko">
<!-- en-> ko 로 변경 -->
<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>TODO List</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 꺽쇠없이 div.wrapper 엔터 치면 에밋기능으로 자동완성 -->
<div class="wrapper">
<header>
<h1> Todo List</h1>
</header>
<section>
<div class="input-container">
<input type="text" class="input-text">
<button class="add-button">추가</button>
</div>
<div class="list-container">
<ul class="list">
<li>
<span class="like">
<i class="material-icons favorite">favorite_border</i>
</span>
<span class="item">자바스크립트 투두11</span>
<span class="manage">
<i class="material-icons check">check</i>
<i class="material-icons clear">clear</i>
</span>
</li>
<li>
<span class="like">
<i class="material-icons favorite">favorite_border</i>
</span>
<span class="item">자바스크립트 투두</span>
<span class="manage">
<i class="material-icons check">check</i>
<i class="material-icons clear">clear</i>
</span>
</li>
</ul>
</div>
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>- 아이콘 사용할 사이트의 링크 적용
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
- 아이콘 클래스 복사 후 개별 클래스 이름 붙여주기
<span class="manage">
<i class ="meterial-icons check" >check</i>
- 외부 stylesheet 경로 적용
<link rel="stylesheet" href="css/style.css">
(2) css stylesheet 작성
*{ /* 전체 여백 초기화 */
margin: 0;
padding: 0;
}
.wrapper {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
header {
color :white;
background: linear-gradient(5deg,#C6FFDD,#FBD786,#f7797d);
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.input-container{
width: 100%;
height: 30px;
display: flex;
border-bottom: 1px solid #ccc;
}
.input-text{
width: 90%;
padding: 0.3em;
border: none;
}
.add-button{
width: 10%;
border: none;
background: #61553a;
color :white;
outline:none;
}
.add-button:hover{
/* 마우스 올려놨을때 색 전환 */
cursor:pointer;
background:#696761;
}
.list{
list-style: none;
}
.list li{
display: flex;
border-bottom: 1px solid #ccc ;
padding: 1em;
align-items: center;
}
.like {
flex:1;
}
.item{
flex:8;
}
.manage{
flex:1;
display: flex;
justify-content: space-between;
}
.like i{
/* like 아이콘 i 색상 변경 */
color:salmon;
}
.check{
/* check 아이콘 i 색상 변경 */
color:aquamarine
}
.clear{
/* clear 아이콘 i 색상 변경 */
color: salmon;
}
.done .item {
text-decoration: line-through;
}
.done .check {
visibility: hidden;
}.done .item ( 완료시 목록 줄긋기)
.done .check (완료시 체크아이콘 숨기기)
(3) js 작성
자바스크립트는 따로 혼자 1-10까지 입력해보고
기능별 내용을 따로 포스팅해야겠다..
왜냐면.. 강의가 조금 정신없었기때문 ㅋㅋㅋ
const inputText = document.querySelector(".input-text");
const addButton = document.querySelector(".add-button");
const list = document.querySelector(".list");
function addItem(){
// 값이 빈칸이면 리턴을 시킨다. (함수가 종료됨)
// 공백제거 trim
if(inputText.value.trim()=== "") return;
// (2) like
const like = document.createElement("span"); //span 태그 생성
// like안에 아이콘 넣기 위해 i태그 생성
const likeIcon = document.createElement("i");
//like 에 스타일 클래스 리스트 추가
like.classList.add("like");
// likeicon에 클래스 리스트 추가
likeIcon.classList.add("material-icons");
likeIcon.innerText = "favorite_border";
like.appendChild(likeIcon);
//item
const item = document.createElement("span"); //span 태그 생성
item.classList.add("item")
item.innerText = inputText.value;
//manage
const manage = document.createElement("span"); //span 태그 생성
const checkIcon = document.createElement("i");
const clearIcon = document.createElement("i");
checkIcon.classList.add("material-icons","check");
clearIcon.classList.add("material-icons","clear");
checkIcon.innerText = "check"
clearIcon.innerText = "clear"
manage.classList.add("manage")
manage.appendChild(checkIcon)
manage.appendChild(clearIcon)
/* html 요소인 li태그를 하나 만들겠다는 의미 */
const li = document.createElement("li");
// 생성할 당시에 이벤트를 추가해야한다.
//favorite event
like.addEventListener("click",(e)=>{
const target = e.target;
// 조건? 했을때 : 안했을때
const text = target.innerText === "favorite" ? "favorite_border" : "favorite";
target.innerText = text;
})
//check event (줄긋기)
checkIcon.addEventListener("click",(e)=>{
const target = e.target.parentNode.parentNode;
target.classList.add("done")
})
//clear event (삭제)
clearIcon.addEventListener("click",(e)=>{
const target = e.target.parentNode.parentNode;
list.removeChild(target)
})
li.appendChild(like)
li.appendChild(item)
li.appendChild(manage)
/* (1) */
list.appendChild(li)
/* (1) ul같은 태그 안에 자식요소로 어떤 ele를 넣을때 사용하는 메서드
input 입력창에 공부하기 를 넣고 추가를 누르면
밑에 여러개가 리스트화 된다 !
(2) li를 추가할때, 아이콘도 생성해서 넣어야하고,
like, claer, check 버튼도 함께 생성해야함
-> 총 3개의 span을 만들고 그 span 을 생성한 li에 appendchild로 집어넣고
집어넣은 li를 다시한번 더 list에 넣어주면 된다. =아이콘도 동일 */
inputText.value="";
inputText.focus()
}
/* addListener : 이 메서드는 지정한 이벤트가 대상에 전달될때마다 호출할
함수를 설정한다. 일반적인 대상은 element,document,window지만,
XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다. */
inputText.addEventListener("keypress",e =>{
if(e.keyCode === 13){
addItem()
}
})
addButton.addEventListener("click",addItem)
============결과물=============
삭제기능 누르기 전 리스트 (1)
삭제기능 누른 후 삭제된 리스트 (2)
'공부 > javascript' 카테고리의 다른 글
| 2022.02.12 - 약관동의 js, jquery (0) | 2022.02.12 |
|---|---|
| 2022.01.29 - 스타벅스 사이트 만들기 (1) 헤더 (0) | 2022.01.29 |
| 2022.01.29 - javascript (1) (0) | 2022.01.29 |
| 2022.01.12 - 바닐라javascript - 반복문, OOP, DOM (0) | 2022.01.13 |
| 2021.11.17 - 국비수업 17일차 / javascript (0) | 2021.11.17 |
