【html,css,javascript】todoリストの作成_1(2020/2/2) - 平凡エンジニアによる平凡ブログ

現在自分でtodoリストなるものを作成している。随時機能を追加してより良いものをしていこうと思います。

・今回作成された機能 taskの作成、削除ボタンの作成

現在作成したのは実際に入力フォームにタスクを入力し、作成ボタンを押すとタスクと削除ボタンが表示される箇所まで作成済みです。以下のような挙動をしています。

Mytodolist.html

<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Mytodolist</title>
      <link rel="stylesheet" href="todolist.css">
      <link rel="stylesheet" href="reset.css">  
    </head>
  <body>
      
    <div class="side-bar">
      <div class="side-bar_header"></div>
      <div class="side-bar_menu"></div>
    </div>

    <div class="main-form">
      <h1>Todo-list</h1>
      <form id="todo-form">
        <input type="text" id="todo-input">
        <button id="send-button">作成</button>
      </form>
      <ul id="todo-list">作業タスク</ul>
      <script src="todolist.js"></script>
    </div>

  </body>
</html>

todolist.js

(function(){
  'use strict';

  var todoForm = document.getElementById("todo-form")
  var todoInput = document.getElementById("todo-input")
  var todoList = document.getElementById("todo-list")

    var addTodo = function(e){
    e.preventDefault();
    
    var todoBox = document.createElement("div");
    var todoTask = document.createElement("li");
    var deletebutton = document.createElement("button")

    todoBox.className = "task";
    todoTask.textContent = todoInput.value;
    deletebutton.textContent = "削除"

    todoList.appendChild(todoBox)
    todoBox.appendChild(todoTask)
    todoBox.appendChild(deletebutton)
    
    
    deletebutton.addEventListener("click",deleteTodo);

    todoInput.value="";
  };
}());

◾️学んだこと・ポイント・子要素の作成→appendChild
・イベント発光→addEventListener
・入力した文字の取得→valueプロパティ
・テキストの取得、表示→textContent

まだまだ最初の段階なので、随時更新をしていきます。