フロントエンド調整:To Do Listの作成

4188 ワード

HTML


  • 」を貼り付け、カンマ
  • を削除します.

  • <link rel="stylesheet" href="style.css" /> 
    適用されません
    <link rel="stylesheet" type="text/css" href="./style.css" >
    置換
    3.input text valueをプレースホルダに置き換える

    CSS

  • px->remの
  • に変更
    すべての
  • :*{}の
  • に適用

    JS


  • LowerCamelCase:頭文字小文字+次の単語の頭文字は大文字

  • After creating a new <li> you should call the strikeThrough() function again the add the eventlistener, so inside the createElement() function:
  • ul.appendChild(li);
    input.value = "";
    strikeThrough(li);
  • 切り替えclasslist->の学習
    *選択者.classList.([追加または削除するオブジェクト](Objects To Add or Delete))を切り替えます.
    ->classの追加または削除(追加時に削除、削除時に追加)
    ->add+removeを同時に使用可能
    ++++
    strikeThrough(li);
    delete buttonを実装するときに入れる必要があります:関数を実行する必要があります
  • 「改訂前コード」
  • document.getElementById("deleteButton").onclick = function cross() {
      var str = getElementById("li");
      var result = str.strike();
      str.replace = result;
    };
    <エラー>
    1.「deleteButton」はドキュメントに保存されていません(最初の実行時に存在する必要があります)
    liのvalueはstringじゃないからstrikeの無効化
    <修正されたコード>
    deleteButton.onclick = function cross() {
        var str = document.getElementById("li");
        str.style.textDecoration = "line-through";
      };
  • console.ログデバッグおよびクロム開発ツール
  • の使用
    ソース:https://blog.naver.com/dpqmstnqlsdl/221910895991
    注意:
    https://stackoverflow.com/questions/60929824/javascript-strikethrough
    https://blog.naver.com/wldks79/222204458644
    https://blog.naver.com/nettycherry/222192915808

    考慮すべき問題


    1.DOMとは何ですか。DOMを操作する方法は何ですか。


    https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

    2.変数名はどうやってつけたらいいですか?


    役割の理解

    3.git commit単位を機能別に区分するのはなぜですか?


    コメント/コラボレーションの効率化のため、

    4.コードポインタを使用する理由


    間違いを見つけて、他人が読みやすいようにする.

    好奇心のある場所

  • どこまでhtmlで実現して、どこまでjsで
  • を実現します
  • paddingとmargingを使用する場合、または%を使用する場合、
  • より多くの機能を実装したい

  • drag&drop
  • に順次変換