1. 🌊 쇼핑 목록앱 만들기
1.1. 구현 요소
완료
- HTML/CSS
- + 버튼을 누르면 리스트 추가하기
- input을 입력후 엔터를 누르면 리스트 추가하기
- 휴지통 버튼을 누르면 해당 리스트 삭제되기
1.2. 느낀점
- 이렇게 금방 끝낼 줄 알았으면 저번에 완료할 걸..
1.3. 구현 방법
1.3.1. HTML
<html />
<section id="shopping">
<header
id="header"
class="gradient-bar"
>
Shopping List
</header>
<div class="basket-container">
<ul class="basket-list"></ul>
<input
type="text"
class="input"
/>
</div>
<footer
id="footer"
class="gradient-bar"
>
<button id="list-add_btn">
<div class="horizontal"></div>
<div class="vertical"></div>
</button>
</footer>
</section>
고민했던 부분
- 클래스명 짓기
조금 더 직관적으로, 남들이 알아 볼 수 있게 정하고자 했다. - 버튼 안에 div 태그
사실 가상요소 선택자인 before, after로 하는 것이 더 좋은 방법일 거라고 늘 생각해서 선호하지 않는 방식이나 이렇게 한 번 구현해봤다.
1.3.2. CSS
<css />
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff')
format('woff');
font-weight: 400;
font-style: normal;
}
* {
margin: 0;
padding: 0;
font-family: 'Pretendard-Regular';
box-sizing: border-box;
}
li {
list-style: none;
}
#shopping {
width: 480px;
height: 80vh;
border-radius: 1rem;
margin: 10vh auto;
display: flex;
flex-direction: column;
border-radius: 1rem;
overflow: hidden;
}
.gradient-bar {
padding: 1rem;
background: linear-gradient(45deg, #e6bfd6, #8dbbef);
text-align: center;
color: #fff;
font-size: 1.5rem;
}
.basket-container {
flex: 1;
background: #eee;
display: flex;
flex-direction: column;
}
.basket-list {
flex: 1;
}
.basket-list li {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.list-remove_btn {
width: 30px;
height: 30px;
background: url('trash.png');
background-size: contain;
border: none;
cursor: pointer;
}
.input {
border: none;
width: 100%;
line-height: 1.6;
height: 30px;
}
#list-add_btn {
background: #fff;
width: 40px;
height: 40px;
border-radius: 100%;
border: none;
cursor: pointer;
position: relative;
}
#list-add_btn:focus {
background: #000;
}
#list-add_btn div {
position: absolute;
background: #333;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#list-add_btn:focus div {
background: #fff;
}
.horizontal {
width: calc(100% - 10px);
height: 3px;
}
.vertical {
width: 3px;
height: calc(100% - 10px);
}
1.3.3. JS
<javascript />
// dom 요소 불러오기.
const input = document.querySelector('.input');
const addBtn = document.querySelector('#list-add_btn');
const ul = document.querySelector('.basket-list');
// 리스트 추가 함수
const addList = () => {
const text = input.value;
if (text === '') {
input.foucs();
return;
}
const li = document.createElement('li');
const span = document.createElement('span');
const button = document.createElement('button');
button.classList.add('list-remove_btn');
button.addEventListener('click', removeItem);
span.textContent = text;
li.append(span, button);
ul.append(li);
input.value = '';
};
// 리스트 삭제 함수
const removeItem = (e) => {
e.target.parentElement.remove();
};
// 리스트 추가 이벤트, addList() 함수를 실행시켰다.
addBtn.addEventListener('click', function (e) {
addList();
});
input.addEventListener('keypress', function (key) {
if (key.key === 'Enter') {
addList();
}
});
1.4. 그 외
드림코더 엘리님의 브라우저101 중 쇼핑 목록앱 만들기입니다.
저작권 문제로 풀이 과정은 올리지 않습니다.
프론트엔드 필수 브라우저 101
프론트엔드 개발자라면 필수로 알아야 하는 브라우저와 Web APIs 그리고 자바스크립트로 멋지게 코딩하기 (10개의 실전 프로젝트)
academy.dream-coding.com
'🐹 TIL > Project' 카테고리의 다른 글
| 🍰 [Main Project] 기획 회고 (0) | 2023.07.02 |
|---|---|
| 🍰 [Project] Youtube clone (0) | 2023.06.03 |
| 🍰 [Project] Coz shopping (0) | 2023.05.19 |
| 🍰 [Project] Todo list (2) | 2023.05.02 |
| 🍰 [Project] 쇼핑 목록앱 만들기 (4) | 2023.04.14 |
