728x90
[Javascript / 자바스크립트] Todo List / Shop List 샘플 코드
머릿말
프론트앤드 Js로 DOM 제어 복습 도중
Todo List를 추가 / 삭제 가능한 어플을 만들어 보았다
참고로 기능 구현 목적으로 만들어 디자인은 구리다
사용 기술
html / css / javascript 이고
다른 플러그인은 사용하지 않았다
프로젝트에 사용된 DOM 제어 Js 기술
엘리먼트 선택자 element.querySelector / element.getElementById
부모 엘리먼트 선택자 element.parentElement
엘리먼트 노드 생성 document.createElement('생성 원하는 태그명')
엘리먼트 노드 삭제 element.remove()
엘리먼트 속성 추가 및 삭제 등 설정 element.setAttribute('속성명','속성값')
엘리먼트 값 설정 element.value = '원하는 값'
클래스 리스트 추가 element.classList.add(추가 원하는 클래스명)
클래스 리스트 삭제 element.classList.remove(삭제 원하는 클래스명)
앱 로직
1. 할일 목록 생성
엔터 / + 버튼 클릭시 할일 목록 설정란이 생성되고 할일 입력 후
엔터 / 체크 버튼 클릭시 할일 목록의 추가가 완료 되어진다
2. 할일 목록 삭제
(1) 백스페이스 / 쓰레기통 버튼 클릭시 할일 목록 삭제
(2) 여러 목록 체크 후 쓰레기통 버튼 클릭시 체크된 할일 목록 다수가 한번에 삭제
샘플 코드
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>TODO List Example</title>
<style>
* {
box-sizing: content-box;
}
ul {
list-style: none;
margin: 0;
font-size : 20px;
}
.main {
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(ellipse at top, #ffde7d, transparent),
radial-gradient(ellipse at bottom, #ccf6c8, transparent);
width: 500px;
height: 700px;
margin: 50px auto;
border-radius: 30px;
}
.main .title {
margin: 0;
}
.main .container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 400px;
height: 600px;
background-color: #f9f9f9;
border-radius: 30px;
}
.main .items {
padding: 0;
flex-basis: 80%;
}
.item--add,
.item--delete {
cursor: pointer;
}
.main .item--add {
margin-right: 5px;
}
.item--add--icon {
cursor: pointer;
font-size : 20px;
}
.item--check {
transform: scale(1.5);
margin-right: 5px;
}
.item {
margin : 20px 0;
}
.item--title {
font-size : 20px;
margin : 0 10px;
}
</style>
</head>
<body>
<section class="main">
<div class="container">
<h1 class="title">TODOLIST</h1>
<ul class="items">
</ul>
<div class="item--add--icon">
<i class="fas fa-plus-circle before"></i>
</div>
</div>
</section>
<script>
const items = document.querySelector('.items');
const itemPlus = document.querySelector('.item--add--icon');
itemPlus.addEventListener('click', e => {
let thisElement = e.target;
if(thisElement.nodeName !== 'I'){
thisElement = e.target.firstElementChild;
}
if (thisElement.classList.contains('fa-plus-circle')) {
const itemElement = document.createElement('li');
itemElement.classList.add('item');
const checkTag = document.createElement('input');
checkTag.setAttribute('type','checkbox');
checkTag.classList.add('item--check');
const textTag = document.createElement('input');
textTag.setAttribute('type','text');
textTag.classList.add('item--title');
const spanTag = document.createElement('span');
spanTag.classList.add('item--delete');
spanTag.innerHTML = `<i class="fas fa-trash-alt"></i>`;
itemElement.append(checkTag,textTag,spanTag);
items.append(itemElement);
thisElement.classList.remove('fa-plus-circle');
thisElement.classList.add('fa-check');
textTag.focus();
} else if (thisElement.classList.contains('fa-check')) {
const itemTitles = document.querySelectorAll('.item--title');
const itemTitle = itemTitles[itemTitles.length-1];
if(itemTitle.value === null || itemTitle.value === '') {
const items = document.querySelectorAll('.item');
items[items.length-1].remove();
}
itemTitle.setAttribute('disabled', true);
itemTitle.style.border = 'none';
itemTitle.style.backgroundColor = 'transparent';
thisElement.classList.remove('fa-check');
thisElement.classList.add('fa-plus-circle');
}
});
const deleteBtns = document.querySelectorAll('.fa-trash-alt');
items.addEventListener('click',e=>{
if(e.target.classList.contains('fa-trash-alt')){
const checkboxs = document.querySelectorAll('.item--check:checked');
if(checkboxs.length > 0)
checkboxs.forEach(item => item.parentElement.remove());
else
e.target.parentElement.parentElement.remove();
}
});
window.addEventListener('keydown',e=>{
if(e.keyCode !== 13) {
e.stopPropagation();
return;
}
itemPlus.click();
})
</script>
</body>
</html>실행 결과
728x90
'샘플코드' 카테고리의 다른 글
| [Javascript] 페이스북 아이디로 로그인 하기 코드 샘플 (소스코드) (0) | 2021.05.15 |
|---|---|
| [NodeJs] 네이버 지식인 오토 프로그램 샘플 코드 [feat javascript, selenium-webdriver] 댓글 / 답글 자동 (6) | 2021.05.12 |
| [프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code (1) | 2021.02.24 |
| [프론트엔드] 애플 메인 페이지 샘플 코드(변경가능) (0) | 2021.02.20 |
| [프론트엔드] 유튜브 페이지 코드 샘플 (0) | 2021.02.17 |
댓글