HOHO- 240321 TODO

< 돔 요소에 접근하고 속성가져 오기>

!! 코드 분석 !!

const inputBox = document.getElementById("input-box");

인풋 박스라는 변수는 input- box 아이디를 가진 요소에 접근한다.

const listContainer = document.getElementById("list-container");

리스트컨테이너라는 변수는 list-container 아이디를 가진 요소에 접근한다.

function addTask() {

if (inputBox.value === '') {

alert("You must write something!");

}

else {

let li = document.createElement("li");

li.innerHTML = inputBox.value;

listContainer.appendChild(li);

}

함수 addtask 는

만약 조건이 truea

변수 inputBox의 값이 ‘’ 과 타입까지 같으면(true)

“you must write something!” 이라는 문자열의 알림창을 표시해줘

html

  <div id="dolist-content">
    <input
      id="input-box"
      type="text"
      placeholder="입력하시오"
      [(ngModel)]="value"
    />
    <button (click)="addTask()" type="submit">add</button>
  </div>
  <ul id="list-container">
    @for(todo123 of todos; track todo123.id){
    <li style="display: flex">
      <p style="margin-right: 6px">
        {{ todo123.id }}
      </p>
      <p>
        {{ todo123.content }}
      </p>
    </li>
    }
  </ul>
</main>

ts

interface Todo {
  id: number;
  content: string;
}

@Component({
  selector: 'app-todo',
  standalone: true,
  imports: [
    FormsModule
  ],
  templateUrl: './todo.component.html',
  styleUrl: './todo.component.scss'
})
export class TodoComponent {

  test?: string;
  id: number = 0;
  value = '';
  todos: Todo[] = [];

  addTask() {
    if (this.value === '') {
      alert('값이 없습니다.');
      return;
    }

    console.log(this.value);

    const addedTodo = {
      id: this.id++,
      content: this.value
    }

    this.todos.push(addedTodo);
    this.value = '';
  }

}