티스토리 뷰

개발

[JS] 바닐라 자바스크립트로 ToDo-List 만들기 - (1) 기능정의 및 HTML/CSS

woody._.k 2021. 11. 2. 12:00

목차

  1. 기능정의 및 HTML/CSS
  2. 할 일 추가하기
  3. 할 일 목록에서 할 일 삭제, 완료 처리 구현
  4. 할 일 수정하기
  5. 전체 완료 처리 및 남은 할 일 개수
  6. 하단 버튼 기능 구현

 

바닐라 자바스크립트를 이용해 todo-list를 만들어 보았습니다. 투두리스트의 동작 방식은 TodoMVC-VanilaJS 와 같이 작동하도록 개발하였으며, 다음과 같은 형태입니다.

 

1. 기능 정의하기

  1. 전체 선택 
    • 해당 버튼을 누르면 모든 할 일이 완료된 상태로 바뀜
    • 이미 모두 완료된 상태일 때, 누르면 전체 할 일 리스트가 완료되지 않은 상태로 변함
    • 전체 완료되지 않음 상태 일 때는 회색으로 표시
    • 전체 완료된 상태는 초록색으로 표시
  2. 할 일 입력 
    • 사용자로부터 입력을 받음
    • Enter Key를 누르면 할 일이 추가됨
    • 할 일이 추가된 이후, 입력창의 value를 초기화
  3. 체크박스
    • 완료된 일이면, 체크표시
    • 해당 버튼을 누를 시, 할 일의 완료상태(isCompleted) 값을 토글 시킨다.
  4. 할 일 내용
    • 할 일 내용이 표시됨
    • 완료된 일이면 이태리체, 회색, 가운데선으로 표시
    • 마우스로 더블 클릭 시, 할 일 내용을 수정할 수 있음
  5. 할 일 삭제
    • 해당 할 일을 투두리스트에서 삭제함
  6. 완료되지 않은 할 일 개수 표시
    • 완료되지 않은 할 일(Active)의 개수를 표시한다. 
  7.  All 버튼
    • 투두리스트의 모든 할 일을 보여준다.
  8. Active 버튼
    • 투두리스트에서 아직 완료되지 않은 일을 보여준다.
  9. Clear Completed 버튼
    • 완료된 일을 투두리스트에서 삭제한다.

 

2. HTML과 CSS 적용하기

일단 reset.css 를 적용해주었습니다. reset.css는 원래 브라우저 간의 스타일 불일치를 해소하는 것을 목적으로 하지만, 기본적으로 설정돼있는 스타일 설정이 개발하는데, 불편을 주기 때문에 reset.css를 통해 이미 설정되어 있는 스타일을 리셋한 후 개발하였습니다.

HTML과 CSS는 다음과 같이 적용하였습니다.

<!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="reset.css"> // reset.css 적용
    <link rel="stylesheet" href="style.css">
    
    <title>TODO-VanilaJS</title>
</head>
<body>
    <div class="todo-wrapper">
        <div class="todo-title">todos</div>
        <div class="todo-box">

            <div class="todo-input-box">
                <button class="complete-all-btn">✔</button>
                <input type="text" class="todo-input" placeholder="해야 할 일을 입력해주세요.">
            </div>
            
            <ul class="todo-list">
               {!-- <li class="todo-item checked">
                    <div class="checkbox">✔</div>
                    <div class="todo">첫번째 할 일</div>
                    <button class="delBtn">x</button>
                </li>
                <li class="todo-item">
                    <div class="checkbox"></div>
                    <div class="todo">두번째 할 일</div>
                    <button class="delBtn">x</button>
                </li>
                <li class="todo-item">
                    <div class="checkbox"></div>
                    <div class="todo">세번째 할 일</div>
                    <button class="delBtn">x</button>
                </li> --!}
            </ul>
            <div class="todo-bottom">
                <div class="left-items">3 items left</div>
                <div class="button-group">
                    <button class="show-all-btn selected" data-type="all">All</button>
                    <button class="show-active-btn" data-type="active">Active</button>
                    <button class="show-completed-btn" data-type="completed">Completed</button>
                </div>
                <button class="clear-completed-btn">Clear Completed</button>
            </div>
        </div>
        <p class='info'>더블클릭 시 수정 가능!</p>
       
    </div>
    <script src="todo.js" ></script>
</body>
</html>
html {
	height: 100%;
}

body {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    background-color: #F5F5F5;
    min-height: 100%;
}

.todo-wrapper {
    justify-content: center;
    margin-top: 3rem;
    min-width: 600px;
}

.todo-title {
    padding: 2rem;
    text-align: center;
    color: rosybrown;
    font-size: 5rem;
}

.todo-box {
    background-color: white;
    border: 1px solid #ddd;
}

.todo-input-box {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 3rem;
    border-bottom: 1px solid #ddd;
    justify-content: flex-start;
    align-items: center;
}

button {
    background-color: transparent;
    border: 0;
}

.complete-all-btn {
    color: gray;
    min-width: none;
    min-height: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.5rem 0.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1.2rem;
    
}

.complete-all-btn.checked {
    color: green
}

.todo-input {
    width: 80%;
    text-align: center;
    border: 0;
    outline: none;
    font-size: 1.3rem;
}

.todo-item {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 3rem;
    border-bottom: 1px solid #ddd;
}

.todo-item:hover .delBtn {
    opacity: 1;
}

.checkbox {
    min-width: none;
    min-height: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.5rem 0.5rem;
    border-radius: 50px;
    border: 1px solid lightgray;
    cursor: pointer;
    text-align: center;
}

.todo-item.checked .checkbox{
    border: 2px solid darkgray;
    color: green;
}

.todo {
    font-size: 1.3rem;
    padding: 0 1rem;
    width: 80%;
}

.todo-item.checked .todo{
 font-style: italic;
 text-decoration: line-through;
 color: lightgray;
}

.delBtn {
    opacity: 1;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    font-weight: lighter;
    cursor: pointer;
}

.todo-bottom {
    height: 3rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.button-group{
    flex-direction: row;
    flex-wrap: nowrap;
}

.button-group button {
    border: 1px solid #eee;
    padding: 0.2rem 0.5rem;
    margin: 0 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}

.button-group button.selected {
    border: 2px solid rosybrown;
    padding: 0.2rem 0.5rem;
    margin: 0 0.5rem;
    border-radius: 8px;
}

.clear-completed-btn:hover {
    font-style: italic;
    text-decoration: underline;
    cursor: pointer;
}

.edit-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 590px;
    height: 2.8rem;
    margin: 0;
}

p.info {
    margin-top: 1.5rem;
    text-align: center;
    color: #ccc;
}

 

위의 HTML과 CSS를 적용하여 다음과 같이 나온다면 정상적으로 실행된 것 입니다.

 

 

저작자표시 비영리

'개발' 카테고리의 다른 글

[RN] 리액트 네이티브 - Android 이미지 resizing 문제 해결  (0) 2021.11.04
[JS] 바닐라 자바스크립트로 ToDo-List 만들기 - (2) 할 일 추가하기  (2) 2021.11.03
[JS] Intersection Observer API 사용법과 활용  (0) 2021.10.30
[JS] 비밀번호 유효성 검사  (0) 2021.10.29
[JS] Event.stopPropagation()를 활용한 모달 만들기  (0) 2021.10.28
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함