JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<input type="text" name="title" id="title">
  <button type="button" name="btn-add" id="btn-add">등록</button>
  <ul id="todo-list">
  </ul>

JavaScript

var todos = [];

function newTodo(event) {
  let ul = document.getElementById('todo-list');
  let title = document.getElementById('title');
  let todosHTML;
  
  todos.push(title.value);

  title.value = '';
  todosHTML = '';

  for(let i=0; i < todos.length; i++) {
    todosHTML = `${todosHTML}<li>${todos[i]}</li>`;
  }

  ul.innerHTML = todosHTML;
}

var btnAdd = document.getElementById('btn-add');

btnAdd.addEventListener('click', newTodo);