Create Todo list with Javascript

Question

Excuse the question. I am Japanese. I have been studying Javascript since a month ago.

I want to make a Todo list like this. https://gyazo.com/d2c1c87a05c786e2ded8873d13fd0a0d

However, it is not possible to display the values entered directly under the ID, comment, and status (displayed in a misaligned manner).

■ What I tried I tried using tr, td, etc. using the table tag, but I could not solve it well.

■ What you want to know How to display ID, comment, the value entered directly under the status

Sorry to trouble you, but please confirm it.

document.addEventListener('DOMContentLoaded', function() {
// 必要なDOM要素を取得。
      const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
      const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
      const addTaskValue = document.getElementsByClassName('addTask-value')[0];  
      //ID用のインデックスを定義
let nextId = 0;
const addTask = (task,id) => {
    // 表のタグを生成する
    const tableItem=document.createElement('thead');
    const addButton = document.createElement('button');
    const removeButton = document.createElement('button');
    // それぞれ作業中、削除という言葉をボタンに入れる
    addButton.innerText = '作業中';
    removeButton.innerText = '削除';
    //ボタンを押したら以下の作業をする
    removeButton.addEventListener('click', () => removeTask(removeButton));
    // IDを表示するspan要素を作成して tableItem に追加
    const idSpan = document.createElement('span');
    idSpan.innerText = id;
    tableItem.append(idSpan);
    const taskSpan = document.createElement('span');
    taskSpan.innerText = task;
    tableItem.append(task);

     //入力タスクを表示
     addTaskTarget.appendChild(tableItem);   
    // 作業中ボタンを追加
    tableItem.appendChild(addButton);    
    // 削除ボタンを追加
    tableItem.appendChild(removeButton);



};
// 追加ボタンに対して、タスク登録イベントを設定
addTaskTrigger.addEventListener('click', event => {
    const task = addTaskValue.value;
    addTask(task,nextId ++);
    addTaskValue.value = '';
});
});



  
  
  
  Todoリスト


  Todoリスト
  
    全て
    作業中
    完了
    



    ID　コメント　状態
      
        
      
      
        


        

      
    

    新規タスクの追加

ABGR · Accepted Answer

There was a small mistake in your code that I fixed:

Change tableItem.append(task); to tableItem.append(taskSpan); so that the span element containing the task text is added instead of the text of task. Also, added a few styling. See the comments.

Hope this helps.

Apart from that you need to implement removeTask code.

document.addEventListener('DOMContentLoaded', function() {
// 必要なDOM要素を取得。
      const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
      const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
      const addTaskValue = document.getElementsByClassName('addTask-value')[0];  
      //ID用のインデックスを定義
let nextId = 0;
const addTask = (task,id) => {
    // 表のタグを生成する
    const tableItem=document.createElement('thead');
    const addButton = document.createElement('button');
    const removeButton = document.createElement('button');
    addButton.style.margin = "5px"; //<------- Added a style here
    removeButton.style.margin ="5px"; //<------- Added a style here
    // それぞれ作業中、削除という言葉をボタンに入れる
    addButton.innerText = '作業中';
    removeButton.innerText = '削除';
    //ボタンを押したら以下の作業をする
    removeButton.addEventListener('click', () => removeTask(removeButton));
    // IDを表示するspan要素を作成して tableItem に追加
    const idSpan = document.createElement('span');
    idSpan.innerText = id;
    idSpan.style.marginRight = "20px"; //<------- Added a style here
    tableItem.append(idSpan);

    const taskSpan = document.createElement('span');
    taskSpan.style.width = "60px";  //<------- Added a style here
    taskSpan.style.display = "inline-block"; //<------- Added a style here
    taskSpan.style.overflow = "hidden"; // <----- This styling for trimming the text if it exceeds certain width
    taskSpan.style.textOverflow = "ellipsis"; // <------- This will append a (...) to the exceeding text
    taskSpan.innerText = task;
    taskSpan.title = task; //If you hover on the text full text will be displayed. In production code, you might like to use fancy tooltips, say, from bootstrap, for this
    tableItem.append(taskSpan); //<------- changed this

     //入力タスクを表示
     addTaskTarget.appendChild(tableItem);   
    // 作業中ボタンを追加
    tableItem.appendChild(addButton);    
    // 削除ボタンを追加
    tableItem.appendChild(removeButton);



};
// 追加ボタンに対して、タスク登録イベントを設定
addTaskTrigger.addEventListener('click', event => {
    const task = addTaskValue.value;
    addTask(task,nextId ++);
    addTaskValue.value = '';
});
});



  
  
  
  Todoリスト


  Todoリスト
  
    全て
    作業中
    完了
    



    ID　コメント　状態
      
        
      
      
        


        

      
    

    新規タスクの追加

Create Todo list with Javascript

Answers (1)

Related Questions