목록todo-list (5)
Ted's Codding study
💡 요구 사항Todo 항목의 인터페이스 정의(ITodoItem)Todo 항목은 id(number), task(string), completed(boolean)Todo 리스트를 관리할 수 있는 함수 구현addTodo: 새로운 Todo 항목을 추가completeTodo: Todo 항목의 completed 상태를 true로 변경deleteTodo: Todo 항목을 삭제 각 함수는 Todo 항목 배열을 입력받고, 변경된 배열을 반환editTodo: Todo 항목의 task를 편집 - 전체 배열 / 수정하고자하는 요소의 id / 새롭게 작성될 task 내용clearCompleted: 완료된 모든 Todo 항목을 삭제 - 전체 배열getAllTodos: 모든 Todo 항목을 조회 - 전체 배열filterTodos..
로컬 스토리지를 활용한 Todo 예제 정답입니다.절대 제가 작성한 코드가 무조건 적인 정답은 아니며, 여러분의 생각과 다르다면 그것이 정답일 것입니다~~HTML 코드 Add Task 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;}..
해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다HTML 코드와 CSS 코드를 복붙한 후 main.js를 생성해서 아래 설명대로 한번 작성해보세요!HTML 코드 Add Task 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: ..
콘솔에 찍어보는 초간단 장바구니 리스트 프로젝트1. 장바구니 리스트를 담을 carts 배열 생성let carts = []; 2. addCart 함수 생성기본 로직addCart의 파라미터로는 id, name, price, quantity를 받을 것index 변수를 생성 후 carts 배열에 추가하고자 하는 상품의 id가 carts에 있는지 확인 후 할당만약 index가 -1이면, 즉 해당 상품의 id가 존재하지 않는다면 정상적으로 아이템을 추가index가 -1이 아니라면, 즉 해당 상품의 id가 이미 존재한다면 가격은 덮어쓰기, 갯수는 추가하는 로직으로 작성할 것임콘솔에 보여주기 위해서 displayCart() 함수 호출 (아직 만들지 않았음)function addCart(id, name, price, q..
콘솔에 찍어보는 초간단 Todo 리스트 프로젝트1. todo 리스트를 담을 todos 배열 생성let todos = []; 2. addTodo 함수 생성기본 로직addTodo의 파라미터로는 content를 받을 것todo 객체를 생성id는 배열의 길이 + 1로 설정content의 내용은 인자의 content가 됨completed는 기본적으로 false로 설정todos 배열에 만든 todo 객체를 push콘솔에 보여주기 위해서 displayTodos() 함수 호출 (아직 만들지 않았음)function addTodo(content) { const todo = { id: todos.length + 1, content: content, completed: false, }; todos.pus..