<!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="style.css" />
<script src="main.js" defer></script>
<script
src="https://kit.fontawesome.com/0a63898d1f.js"
crossorigin="anonymous"
></script>
<title>shopping list</title>
</head>
<body>
<section class="list">
<header class="header">Shopping List Clone</header>
<ul class="items">
<!-- <li class="item__row">
<div class="item">
<span class="item__name">Carrot</span>
<button class="item__delete">
<i class="fa-solid fa-trash-can"></i>
</button>
</div>
</li> -->
</ul>
<footer class="footer">
<input type="text" class="footer__input" />
<button class="footer__button">
<i class="fa-solid fa-plus"></i>
</button>
</footer>
</section>
</body>
</html>
* {
box-sizing: border-box;
/* padding, border가 width height에 포함됨 */
}
ul {
padding: 0;
}
body {
background-color: #e8e8ff;
text-align: center;
}
button {
outline: none;
background: transparent;
border: none;
cursor: pointer;
}
.list {
width: 400px;
margin: auto;
background-color: #f1f0f7;
border-radius: 20px;
-webkit-box-shadow: 5px 5px 15px 5px #000000;
box-shadow: 5px 5px 15px 5px #000000;
}
.header {
height: 48px;
padding: 8px;
font-size: 24px;
background: linear-gradient(
31deg,
rgba(34, 193, 195, 1) 0%,
rgba(190, 128, 188, 1) 100%
);
border-radius: 20px 20px 0 0;
}
.items {
height: 500px;
overflow-y: auto;
}
.item {
display: flex;
justify-content: space-between;
padding: 9px 32px;
margin-bottom: 10px;
position: relative;
/* relative 없으니깐 줄이 안움직임 */
}
/* .li::after {
content: "";
display: block;
width: 100px;
border-bottom: 1px solid darkgray;
} */
.footer {
background: linear-gradient(
31deg,
rgba(34, 193, 195, 1) 0%,
rgba(190, 128, 188, 1) 100%
);
border-radius: 0 0 20px 20px;
}
.item::after {
content: "";
border-top: 1px solid white;
position: absolute;
margin: 30px auto;
width: 350px;
}
.item__delete {
transition: all 300ms ease-in;
}
.item__delete:hover {
color: red;
scale: 1.1;
}
.footer__input {
width: 100%;
height: 32px;
border: none;
outline: none;
font-size: 24px;
padding: 0 16px;
}
.footer__button {
width: 48px;
height: 48px;
background-color: black;
border-radius: 50%;
color: white;
font-size: 20px;
transition: all 200ms ease-in;
}
.footer__button:hover {
transform: scale(1.1);
}
'use strict'
const items = document.querySelector('.items');
const input = document.querySelector('.footer__input');
const addBtn = document.querySelector('.footer__button');
function onAdd() {
//1. 사용자가 입력한 텍스트를 받아옴.
const text = input.value;
if (text === '') {
input.focus();
return;
}
//2. 새로운 아이템을 만듬(텍스트+삭제버튼)
const item = createItem(text);
//3. items컨테이너 안에 새로운 아이템 추가
items.appendChild(item);
//3.5. 새로 추가된 아이템으로 스크롤링
item.scrollIntoView({ block: 'center' });
//4. 인풋을 초기화 한다.(텍스트 없어짐->자동포커스)
input.value = '';
input.focus();
}
let id = 0;//uuid
function createItem(text) {
const itemRow = document.createElement('li');
itemRow.setAttribute('class', 'item__row');
itemRow.setAttribute('data-id', id);
itemRow.innerHTML = `
<div class="item">
<span class="item__name">${text}</span>
<button class="item__delete" data-id=${id}>
<i class="fa-solid fa-trash-can" data-id=${id}></i>
</button>
</div>
`;
id++;
return itemRow;
}
// const item = document.createElement('div');
// item.setAttribute('class', 'item');
// const name = document.createElement('span');
// name.setAttribute('class', 'item__name');
// name.innerText = text;
// const deleteBtn = document.createElement('button');
// deleteBtn.setAttribute('class', 'item__delete');
// deleteBtn.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
// deleteBtn.addEventListener('click', () => {
// items.removeChild(itemRow);
// })
// item.appendChild(name);
// item.appendChild(deleteBtn);
// itemRow.appendChild(item);
addBtn.addEventListener('click', () => {
onAdd();
});
input.addEventListener('keypress', (event) => {
console.log('key');
if (event.key === "Enter") {
onAdd();
}
})
items.addEventListener('click', event => {
const id = event.target.dataset.id;
//dataset에 아이디가 있다면,
if (id) {
console.log('he');
const toBeDeleted = document.querySelector(`.item__row[data-id="${id}"]`);
toBeDeleted.remove();
}
})
