한 걸음씩

[JS][Udemy] todolist project 본문

JS

[JS][Udemy] todolist project

winter17 2023. 3. 20. 16:17 

<!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">
    <title>First JS Script</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Todo List</h1>
    <ul>
        <li>"new" - Add A Todo</li>
        <li>"list" - List All Todos</li>
        <li>"delete" - Remove Specific Todo</li>
        <li>"quit" - Quit App</li>
    </ul>
    <script src="todos.js"></script>

</body>
</html>
// 처음 시작할 때 
let input = prompt('What would you like to do?')
// todos 빈리스트 생성
const todos = []
// while문으로 'quit' or 'q'가 아닐경우 반복 시작
while (input !== 'quit' && input !== 'q') {
  // input 물음에서 list 입력 시 
  if (input === 'list') { 
    // for문 돌려서 todos 리스트의 길이를 세서 인덱스와 목록을 출력
    for (let i = 0; i < todos.length; i++) {
      console.log(`${i}: ${todos[i]}`)
    }
  // input 물음에서 new 입력 시 
  } else if (input === 'new') {
    // newTodo 변수를 생성해 todos에 추가할 목록 입력
    const newTodo = prompt('Ok, What is new todo?')
    // 추가할 목록 todos리스트에 푸시
    todos.push(newTodo)
    // 푸시한 후 newTodo 추가한 목록 메시지 띄우기
    console.log(`${newTodo} add todo the list!`)
  // input 물음에서 delete 입력 시 
  } else if (input === 'delete') {
    // 삭제할 메시지 띄울 변수 생성, 입력한 수를 정수로 변환해야 함
    const index = parseInt(prompt('Ok, Enter an index to delete'))
    // Number.isNaN()메서드는 주어진 값이 NaN인지 판별함
    // index의 입력값이 NaN이 아닐경우 (= 정수를 입력했을 경우)
    if (!Number.isNaN(index)) {
      // todos리스트에서 index에서 입력받은 정수를 삭제함
      const deleted = todos.splice(index, 1)
      // 앞서 삭제한 목록을 deleted변수에 저장했고, 그 부분을 삭제했다고 보여주는 메시지
      console.log(`Ok, deleted ${deleted[0]}`)
      // NaN일 경우 다음과 같은 메시지 출력
    } else {
      console.log('Unknown index')
    }
  }
  input = prompt('What would you like to do?')
} 
// 'quit' or 'q'일 경우 반복 종료
console.log('Ok, Quit the App!')

'JS' 카테고리의 다른 글

[JS][Udemy] JavaScript Functions 2  (0) 2023.03.21
[JS][Udemy] JavaScript Functions 1  (0) 2023.03.20
[JS][multicampus] Controlling event  (0) 2023.03.16
[JS][multicampus] Functions  (0) 2023.03.15
[JS][udemy] Loops  (0) 2023.03.15
'JS' Related Articles more