Ted's Codding study

로컬 스토리지 Todo 예제 본문

JavaScript

로컬 스토리지 Todo 예제

Ted93 2024. 6. 2. 10:52

해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다

HTML 코드와 CSS 코드를 복붙한 후 main.js를 생성해서 아래 설명대로 한번 작성해보세요!

HTML 코드 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo List Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="text" id="todoInput" placeholder="Add new task..." aria-label="New task input">
        <button onclick="addTodo()">Add Task</button>
        <ul id="todoList"></ul>
    </div>
    <script src="main.js"></script>
</body>
</html>
CSS 코드 
body {
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  width: 500px;
}

input[type='text'] {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #5cb85c;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #4cae4c;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  background: #eee;
  margin-top: 8px;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.deleteBtn {
  background-color: #d9534f;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  color: white;
  cursor: pointer;
  width: 80px;
  min-width: 60px;
}

button.deleteBtn:hover {
  background-color: #c9302c;
}

#error {
  color: red;
  text-align: center;
}
.hidden {
  visibility: hidden;
}

1. 할 일 목록을 저장할 빈 배열을 선언

let todos = [];

 

2. DOMContentLoaded 이벤트가 발생하면, 즉 문서 로딩이 완료되면 함수들을 실행

☝ 로직
1. 기존에 todos에서 로컬스토리지에 저장된 값이 있다면 꺼내오고 없다면 빈 배열을 할당
2. 렌더링 함수를 호출 (밑에서 구현 예정)

 

3. 할 일을 추가하는 함수

☝ 로직
1. addTodo 함수 구현
2. input을 가져오고, 새로운 투두에 그 인풋의 값을 넣어줌
3. 만약 새로운 투두가 있다면, 투두리스트에 추가해주고
4. 로컬 스토리지에도 추가해줌
5. 렌더링 함수를 호출하고, 인풋의 값은 비워줌

 

4. 할 일 목록을 렌더링하는 함수

☝ 로직
1. list를 가져오고, list의 HTML을 빈 값으로 할당
2. todos배열을 순회하면서, li 요소를 생성
3. li 요소의 값은 todo로 채워줌
4. delete 버튼을 생성하고 값은 Delete로 채워줌
5. delete 버튼을 클릭했을 때 removeTodo 함수를 호출
6. removeTodo 함수는 (밑에서 구현 예정)
7. li 요소의 자식으로 버튼을 추가하고
8. list의 자식으로 li를 추가

 

5. 할 일을 삭제하는 함수

☝ 로직
1. index를 인자로 받아옴
2. 배열의 메소드를 호출해서 인자로 넣어준 index를 삭제
3. 로컬 스토리지에도 업데이트
4. 렌더링 함수를 호출

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/Todo-23b6602b8fe44956a57fc234c81d8fe1?pvs=4

 

로컬 스토리지 Todo 예제 | Notion

해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다

short-echidna-b16.notion.site

 

저작자표시 비영리 변경금지
'JavaScript' Related Articles more