CEOS-Developers · mimizae · Sep 4, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/checkmark.svg b/checkmark.svg
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,7 +8,23 @@
  </head>
 
  <body>
- <div class="container"></div>
+ <div class="PageContainer">
+ <header>
+ <h1>To Do ✏️</h1>
+ </header>
+ <main>
+ <div class="dateContainer">
+ <h2>Today's To-Do 🍀</h2>
+ <p class="date"></p>
+ <p class="count">✅ : <span class="totalCount">0</span> 🎉 : <span class="completedCount">0</span></p>
+ <form>
+ <input type="text" placeholder="할 일 추가">
+ <button type="submit" id = "submitBtn">추가</button>
+ </form>
+ <ul class ="todoBox" ></ul>
+ </main>
+ </div>
  </body>
  <script src="script.js"></script>
 </html>
+
diff --git a/script.js b/script.js
@@ -1 +1,143 @@
 //😍CEOS 20기 프론트엔드 파이팅😍
+
+document.addEventListener("DOMContentLoaded", function () {
+ const today = new Date(); // 현재 날짜와 시간을 가져오는 Date 객체
+ const options = { month: "long", day: "numeric", weekday: "long" };
+ // 날짜, 요일 등 포맷 시 month와 weekday는 긴 형식으로 (9월, 목요일) day는 숫자 형식 (5, 25)
+
+ const formattedDate = today.toLocaleDateString("ko-KR", options); // options 형식의 한국어 날짜
+ document.querySelector(".date").textContent = formattedDate;
- document.querySelector(".date").textContent = formattedDate;
+const dateElement = document.querySelector(".date");```
- document.querySelector(".date").textContent = formattedDate;
+const dateElement = document.querySelector(".date");```
+ // .Date 요소의 textcontent를 formattedDate으로 설정
+
+ const todoInput = document.querySelector("input"); // input 요소 가지고 오기
+ const todoBox = document.querySelector(".todoBox"); // class가 .todo-box인 요소를 가지고 오기
+ const submitBtn = document.getElementById("submitBtn"); // id가 submitbtn인 요소를 가지고 오기
+ const completedCountElem = document.querySelector(".completedCount"); // 완료된 todo 수를 셀 요소
+ const totalCountElem = document.querySelector(".totalCount"); // 전체 todo 수를 셀 요소
+
+ let todoList = []; // 로컬스토리지에 저장될 todo 배열
+
+ function setting() {
+ loadStorage(); // localStorage에 저장된 todoList의 todo들 불러오기
+ submitBtn.addEventListener("click", function (event) {
+ event.preventDefault(); // input에 값 입력 후 추가 버튼을 눌러도 새로고침 되지 않도록.
+ createList();
+ });
+ }
+
+ function createList() {
+ const newTodo = todoInput.value.trim(); // 문자열 앞 뒤 공백을 제거하는 trim을 이용, 사용자가 input에 입력한 todo를 저장
+ if (newTodo === ""){
+ alert('오늘의 할 일을 적어주세요!🍀');
+ return; // 사용자가 입력하지 않았으면 함수 종료 
+ }
+ // 이미 같은 내용의 투두가 있는지 확인
+
+ const isDuplicate = todoList.some((todo) => todo.text === newTodo); //some 메서드, 배열의 각 요소를 순회하면서, 주어진 조건을 만족하는 요소가 하나라도 있으면 true를 반환하고, 조건을 만족하는 요소가 없으면 false를 반환
+ if (isDuplicate) {
+ alert("이미 동일한 투두가 있습니다!👏🏻"); // 알림창으로 중복 투두 알림
+ todoInput.value = "";
+ return; // 중복되면 함수 종료
+ }
+
+ todoList.push({ text: newTodo, completed: false }); // 배열에 입력 값 저장 
- todoList.push({ text: newTodo, completed: false }); // 배열에 입력 값 저장 
+todoList.push({ id: Date.now(), text: newTodo, completed: false });
+
- todoList.push({ text: newTodo, completed: false }); // 배열에 입력 값 저장 
+todoList.push({ id: Date.now(), text: newTodo, completed: false });
+
+ saveStorage(); // list에 새로운 todo가 추가 됨으로써 변경되었으니 다시 localStorage에 todoList 저장
+ displayTodo(newTodo, false); 
+ todoInput.value = ""; // 배열에 todo를 저장하고 렌더링 했다면 input을 지워서 다시 입력할 수 있도록
+ updateCounts(); // 전체 todo 개수에 +1
+ }
+
+ function saveStorage() {
+ localStorage.setItem("todos", JSON.stringify(todoList)); //localStorage는 문자열 형식의 데이터만 저장할 수 있기 때문에, JSON.stringify()를 사용해 자바스크립트 객체나 배열을 JSON 문자열로 변환한 후 저장. 다시 불러올 때는 JSON.parse() 이용
+ } // setItem(key,value) 특정 key에 해당 value 할당 
+
+ function loadStorage() {
+ const storedTodos = localStorage.getItem("todos"); // 기존에 localStorage에 저장되어있던 배열을 불러오기, 만약 없다면 null이 저장 됨 
+ if (storedTodos) {
+ todoList = JSON.parse(storedTodos);
+ todoList.forEach((todo) => displayTodo(todo.text, todo.completed)); // todoList 배열을 순회하며 저장된 모든 todo를 화면에 렌더링
+ }
+ updateCounts(); // 새로 고침 시 기존 todoList 배열 불러와서 총 개수 맞게 렌더링
+ }
+
+ function displayTodo(todoText, isCompleted) {
+ const li = document.createElement("li"); // 새로운 <li>요소 생성. 하나의 todo를 나타냄
+
+ const checkbox = document.createElement("input"); // 새로운 input 요소 checkbox 생성
+ checkbox.type = "checkbox"; // 이 요소의 type = checkbox
+ checkbox.classList.add("todoCheckBox"); // 스타일링을 위해 클래스 목록에 클래스 이름 추가! 즉 checkbox에 할당되는 클래스 이름이 todo-checkbox
+ checkbox.checked = isCompleted; // isCompleted가 true라면 checkbox가 체크 됨
+
+ checkbox.addEventListener("change", function () { // checkbox의 상태가 바뀔 때, 즉 checked의 속성이 변경될 때 (사용자가 체크박스를 체크하거나 해제할 때) 실행될 이벤트 핸들러
+ toggleTodoCompletion(todoText);
+ li.querySelector("span").style.textDecoration = checkbox.checked ? "line-through" : "none";
+ }); // <li> 요소의 첫 번째 <span> 요소를 찾아 스타일링. 만약 체크박스가 체크 되어있으면? 선을 긋고 해제되어 있으면 선을 없앤다!
+
+ const todoSpan = document.createElement("span"); //<li> 요소 안에 쓰여질 텍스트를 <span> 요소로 설정
+ todoSpan.classList.add("todoSpan");
+ todoSpan.textContent = todoText; // 매개변수로 전달 받은 input의 text를 변수 todoSpan의 텍스트 내용으로 저장
+ if (isCompleted) {
+ todoSpan.style.textDecoration = "line-through";
+ }
+
+ const deleteBtn = document.createElement("button"); // 새로운 <button> 요소 생성
+ deleteBtn.textContent = "삭제"; // deleteBtn의 텍스트 내용을 삭제라고 지정
+ deleteBtn.classList.add("deleteBtn");
+ deleteBtn.addEventListener("click", function () { // 버튼이 클릭 되었을 때 실행될 함수!!
+ if(confirm("정말 삭제하시겠습니까?")){
+ alert("todo가 삭제되었습니다.");
+ deleteTodo(todoText, li);
+ }else{
+ alert("Kepp going!🔥");
+ }
+ });
+
+ li.append(checkbox, todoSpan, deleteBtn); // appendChild를 append로 간소화!
+
+ todoBox.appendChild(li); // <ul> 요소를 불러 온 todoBox에 <li>들 추가
+ }
+
+ function toggleTodoCompletion(todoText) { // 배열 todoList에서 특정 할 일 항목의 완료 상태를 토글시키는 역할
+ todoList = todoList.map((todo) => { // map 메서드는 배열의 각 항목을 변형하여 새로운 배열을 반환한다!!
+ if (todo.text === todoText) { // 순회하던 배열의 특정 원소의 text와 display 함수에서 props로 전달 받은 체크 상태가 변경된 todo의 text가 동일하다면?
+ return { ...todo, completed: !todo.completed }; // 그 원소의 completed 상태 토글
+ }
+ return todo;
+ });
+ saveStorage(); // todoList가 업데이트 되어 새롭게 localStorage에 저장
+ updateCounts(); // 체크 표시 상태에 따라 완료된 todo 개수 변경
+ }
- function toggleTodoCompletion(todoText) { // 배열 todoList에서 특정 할 일 항목의 완료 상태를 토글시키는 역할
- todoList = todoList.map((todo) => { // map 메서드는 배열의 각 항목을 변형하여 새로운 배열을 반환한다!!
- if (todo.text === todoText) { // 순회하던 배열의 특정 원소의 text와 display 함수에서 props로 전달 받은 체크 상태가 변경된 todo의 text가 동일하다면?
- return { ...todo, completed: !todo.completed }; // 그 원소의 completed 상태 토글
- }
- return todo;
- });
- saveStorage(); // todoList가 업데이트 되어 새롭게 localStorage에 저장
- updateCounts(); // 체크 표시 상태에 따라 완료된 todo 개수 변경
- }
+function toggleTodoCompletion(todoText) { 
+ const todo = todoList.find((todo) => todo.text === todoText); 
+
+ if (todo) { 
+ todo.completed = !todo.completed; 
+ saveStorage(); 
+ updateCounts(); 
+ }
+}
- function toggleTodoCompletion(todoText) { // 배열 todoList에서 특정 할 일 항목의 완료 상태를 토글시키는 역할
- todoList = todoList.map((todo) => { // map 메서드는 배열의 각 항목을 변형하여 새로운 배열을 반환한다!!
- if (todo.text === todoText) { // 순회하던 배열의 특정 원소의 text와 display 함수에서 props로 전달 받은 체크 상태가 변경된 todo의 text가 동일하다면?
- return { ...todo, completed: !todo.completed }; // 그 원소의 completed 상태 토글
- }
- return todo;
- });
- saveStorage(); // todoList가 업데이트 되어 새롭게 localStorage에 저장
- updateCounts(); // 체크 표시 상태에 따라 완료된 todo 개수 변경
- }
+function toggleTodoCompletion(todoText) { 
+ const todo = todoList.find((todo) => todo.text === todoText); 
+
+ if (todo) { 
+ todo.completed = !todo.completed; 
+ saveStorage(); 
+ updateCounts(); 
+ }
+}
+
+ function deleteTodo(todoText, li) {
+ todoList = todoList.filter((todo) => todo.text !== todoText); // 배열을 순회하면서 props로 전달 받은 text와 동일하지 않은 text만 걸러서 즉, 전달받은 text는 존재하지 않는 배열을 새롭게 만들어 낸다
+ saveStorage();
+ li.classList.add('remove'); // 삭제될 요소의 스타일링을 위해 class name 부여
+ li.addEventListener('animationend', () => {
+ li.remove(); // 애니메이션 끝난 후 실제로 제거
+ });
+ updateCounts();
+ }
+
+ let isAllCompleted = JSON.parse(localStorage.getItem("isAllCompleted")) || false; // localStorage에서 값을 가져오거나 없으면 false로 초기화
+
+ function updateCounts() {
+ const totalTodos = todoList.length;
+ const completedTodos = todoList.filter((todo) => todo.completed).length; // 완료된 todo 필터링
+
+ completedCountElem.textContent = completedTodos;
+ totalCountElem.textContent = totalTodos;
+
+ // 만약 할 일이 모두 완료되었고, 그 상태가 처음으로 발생한 경우에만 alert 표시
+ if (totalTodos > 0 && completedTodos === totalTodos && !isAllCompleted) {
+ alert('축하합니다! 모든 할 일을 완료하셨습니다! 🎉');
+ isAllCompleted = true; // 모든 할 일이 완료되었다고 기록
+ localStorage.setItem("isAllCompleted", JSON.stringify(isAllCompleted)); // 상태를 localStorage에 저장
+ } else if (completedTodos < totalTodos) {
+ // 할 일이 삭제되거나 새로 추가되면 상태를 초기화
+ isAllCompleted = false;
+ localStorage.setItem("isAllCompleted", JSON.stringify(isAllCompleted)); // 상태를 localStorage에 저장
+ }
+ }
+
+ setting();
+});
diff --git a/style.css b/style.css
@@ -1 +1,207 @@
 /* 본인의 디자인 감각을 최대한 발휘해주세요! */
+body{
+ margin: 0;
+}
+.PageContainer{
+ display: flex;
+ width: 100vw; 
+ height: 100vh;
+ flex-direction: column; /* 요소 정렬 방향: 세로 */
+ align-items: center; /* 수평 정렬, 세로 축이 주축이므로 교차 축인 가로 축에서의 정렬을 담당 */
+ overflow-x:hidden; /* 가로 스크롤 제거 */
+}
+header{
+ display: flex;
+ background-color: rgba(110, 190, 110, 0.895);
+ width: 100%; /* 화면 꽉 차게 */
+ height: 4rem;
+ color: white;
+ font-weight: bold;
+ align-items: center; /* 주축: 가로 축, 수직 정렬*/
+ justify-content: center; /* 수평 정렬 */
+}
+
+h1{
+ display: flex;
+ margin: 0;
+ text-shadow: 0 5px 5px rgba(0, 0, 0, 0.205);
+}
+h2{
+ display: flex;
+ margin: 0;
+}
+
+main{
+ display: flex;
+ flex-direction: column;
+ width: 30rem;
+ height: 90%; /* 화면의 100% 높이로 고정 */
+ overflow-y: scroll; /* 할 일이 많아지면 스크롤이 생기도록 설정 */
+ box-shadow: 0 0.875rem 1.75rem rgba(0,0,0,0.25), 0 0.625rem 0.625rem rgba(0,0,0,0.22);
+ border-radius: 2rem;
+ /*box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color]; 깊이감과 입체감을 더하기 위해 2개 그림자 사용*/
+}
+
+/* 스크롤바 숨기기 (웹킷 기반 브라우저(Chrome, Safari 등)전용) */
+main::-webkit-scrollbar {
+ display: none; /* 스크롤바 숨기기 */
+}
+
+
+.dateContainer{
+ display: flex;
+ flex-direction: column;
+ margin: 3.125rem;
+ gap: 0.3125rem;
+ color: rgba(84, 170, 84, 0.922);
+}
+.date{
+ display: flex;
+ font-size: 0.9375rem;
+}
+
+.count{
+ margin-top: 0;
+}
+
+form {
+ display: flex;
+ position: relative;
+ width: calc(100% - 5rem);
+ padding: 1.3rem 1.3rem 1.3rem 3.3rem; /* background로 넣은 체크 이미지와 안 겹치도록 왼쪽 패딩 추가*/
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.11), 0 5px 5px rgba(0, 0, 0, 0.178);
+ border-radius: 0.625rem;
+ background-image: url('checkmark.svg');
+ background-size: 1.5rem;
+ background-position: 1rem center; /* background 이미지 위치, 왼쪽으로부터 1rem 떨어진 곳*/
+ background-repeat: no-repeat;
+}
+
+input{
+ width:calc(100% - 4rem); /* 왼쪽 추가 버튼이 차지한 공간을 제외한 부분*/
+ font-size: 1rem;
+ border: none;
+ outline: 0;
+}
+input::-webkit-input-placeholder {
+ color: rgb(94, 169, 139);
+}
+
+#submitBtn {
+ position: absolute; /* 부모 요소인 form 기준으로 배치 */
+ top: 50%; /* 부모 요소의 상단에서 50% 지점에 배치 */
+ transform: translateY(-50%); /* 자신의 높이의 50%만큼 위쪽으로 이동, 수직 중앙 정렬 시키기 */
+ right: 1.25rem; /* 부모 요소의 오른쪽에서 1.25rem */
+ background-color: transparent;
+ color: rgb(94, 169, 139);
+ padding: 5px 10px;
+ border: 1.5px solid rgb(94, 169, 139);
+ border-radius: 0.625rem;
+ cursor: pointer;
+}
+
+#submitBtn:hover {
+ background-color:#b5b6b779;
+ font-weight: bold;
+}
+
+.todoBox {
+ display: flex;
+ gap: 0.625rem; /* todo끼리의 gap*/
+ padding: 0;
+ flex-direction: column;
+ }
+
+.todoBox li {
+ display: flex;
+ width: calc(100% - 2.5rem);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.11), 0 5px 5px rgba(0, 0, 0, 0.178);
+ padding: 1rem 1.3rem 1rem 1rem;
+ font-size: 1rem;
+ color: white;
+ border: none;
+ border-radius: 10px;
+ justify-content: space-between;
+ align-items: center; /* 수직 정렬 */
+ font-size: 1rem;
+ color: rgb(94, 169, 139);
+ animation: slideDown 0.3s ease-out; /* ease-out, 애니메이션이 끝날 때 속도가 점점 줄어드는 효과 */
+ }
+
+ .todoBox .todoSpan{
+ width: 15.625rem;
+ overflow-wrap: break-word;
+ }
+
+ /* 새로운 요소가 추가될 때 slide 되는 애니메이션 */
+ @keyframes slideDown {
+ 0% {
+ opacity: 0; /* 요소가 처음에는 투명함 */
+ transform: translateY(-20px); /* 애니메이션이 시작 될 때, 처음엔 위쪽에 위치 */
+ }
+ 100% {
+ opacity: 1; /* 투명도가 0에서 1로 변화 */
+ transform: translateY(0); /* 제자리로 이동, 원래의 위치! */
+ }
+} /* 결국 위에서 아래로 부드럽게 이동하는 효과*/
+
+/* 요소가 삭제될 때 애니메이션 */
+.todoBox .remove {
+ animation: fadeOut 0.3s forwards; /* fadeOut 애니메이션의 마지막 상태가 계속 유지 됨. 즉 투명한 상태로!! */
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1; /* 처음에는 완전히 보이고 */
+ transform: scale(1); /* 원래 크기임 */
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.9); /* 요소가 원래 크기의 90%로 축소 */
+ }
+}
+
+
+.todoBox .deleteBtn {
+ border: none;
+ color: rgba(209, 46, 46, 0.664);
+ padding: 5px 10px;
+ border-radius: 10px;
+ cursor: pointer;
+ background-color: transparent;
+ border: 1.5px solid rgba(193, 49, 49, 0.664);
+ }
+
+.todoBox li button.deleteBtn:hover {
+ background-color: #b5b6b779; /* 삭제 버튼에 호버 효과 */
+ font-weight: bold;
+ }
+
+ /* Custom Checkbox */
+.todoCheckBox {
+ width: 1.5rem;
+ height: 1.5rem;
+ cursor: pointer;
+ appearance: none; /* 기본 체크박스 스타일 제거 */
+ border-radius: 50%; /* 둥근 모양 */
+ border: 2px solid rgb(94, 169, 139); /* 체크되지 않았을 때 테두리 */
+ background-color: transparent; /* 기본 배경 투명 */
+}
+
+/* 체크박스가 체크되었을 때 */
+.todoCheckBox:checked {
+ background-color: rgb(103, 219, 147); /* 체크 시 배경색 */
+ border-color: rgb(103, 219, 147); /* 테두리도 배경색과 동일하게 */
+ position: relative;
+}
+
+/* 체크박스가 체크되었을 때의 내부 체크 표시 */
+.todoCheckBox:checked::before {
+ content: '✓'; /* 체크 표시 */
+ font-size: 1rem;
+ color: white; /* 체크 표시 색상 */
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%); /* 중앙 정렬 */
+}