Toy Project 001 ToDoList

20597 ワード
JavaScript linear-gradient CSS todoList clone coding テキストリンク

🎯 ターゲット:コードの基本論理をクローンして理解します!



1.一部HTML抜粋

<body>
	<div class="container">
		<div class="addTask">
			<input type="text" placeholder="Add a Task" />
			<button>add</button>
		</div>
		<ol class="notCompleted">
			<h3>Not Completed</h3>
		</ol>
		<ol class="completed">
			<h3>Completed</h3>
		</ol>
	</div>
	<script src="main.js"></script>
</body>

2.一部CSS抜粋

body {
 height: 100vh;
 background: #03dfff;
 background: linear-gradient(139deg, #03ddffcb 0%, #ff038ab6 90%);
}

.addTask > input[type="text"] {
  width: 90%;
  color: #333;
  border: none;
  border-bottom: 2px solid #666;
  background: none;
  padding: 10px;
  font-size: 22px;
  outline: none; 
}

ol {
  list-style: none;
  counter-reset: my-counter;
}

ol li {
  width: 100%;
  padding: 18px;
  margin: 5px 0;
  background: #e96969bb;
  font-size: 22px;
  border-radius: 10px;
  counter-increment: my-counter;
}

ol.completed li {
  background: #00ff62;
}

ol li::before {
  content: counter(my-counter);
  background: #231381;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-block;
  line-height: 2rem;
  text-align: center;
  color: #fff;
  margin-right: 0.5rem;
}

🚩 CSSで新しい内容を学ぶ


勾配周期、
  • 背景色と線形に相関
    詳細指定
  • セレクタ
    ex).addTask > input[type="text"]
    • 番号
  • カウンタ
  • pxを用いる、反応型単位
    • を用いる.

    3. JavaScript

    const btn = document.querySelector("button");
const input = document.querySelector("input");

btn.addEventListener("click", onClick);
input.addEventListener("keyup", (e) => {
	e.keyCode === 13 ? onClick(e) : null;
});

function onClick(e) {
  const notCompleted = document.querySelector(".notCompleted");
  const completed = document.querySelector(".completed");

  const newLi = document.createElement("li");
  const checkBtn = document.createElement("button");
  const delBtn = document.createElement("button");

  checkBtn.innerHTML = '<i class="fa fa-check"></i>';
  delBtn.innerHTML = '<i class="fa fa-trash"></i>';

  if (input.value !== "") {
	newLi.textContent = input.value;
    input.value = "";
	notCompleted.appendChild(newLi);
    newLi.appendChild(checkBtn);
	newLi.appendChild(delBtn);
  }

  checkBtn.addEventListener("click", function () {
	const parent = this.parentNode;
	parent.remove();
	completed.appendChild(parent);
	checkBtn.style.display = "none";
  });

  delBtn.addEventListener("click", function () {
	const parent = this.parentNode;
	parent.remove();
  });
}

    🔎 JavaScriptのコードを行単位で解釈


  • button要素をJSにロードします.

  • Input要素もJSにロードされます.

  • ボタンをクリックすると、onClick関数を実行します

  • Inputでkeyupというキーボードイベントが発生した場合、triange演算子を実行します.イベントを起動するキーコードが13(enter key)の場合、onClick関数を実行します.そうしないと応答しません.

  • onClick関数の定義

  • 関数でlocalvariablesを宣言します(global variablesとして宣言されている変数がある場合、結果の値が異なります.これらの内容についてさらに説明します).

  • classがnotCompletedのol要素をJSにロードします.新しく生成されたli要素はol element内で生成されるのでparent element召喚!

  • classで完了したol要素をJSに読み込む

  • li tag付き要素の作成

  • check buttonの作成

  • del buttonの作成

  • ボタンのinnerHTMLプロパティにcheck icon画像(font-awesomeはtext)を入れる

  • ボタンのinnerHTMLプロパティにdel icon画像(font-awesomeはtext)を入れます

  • Inputウィンドウの入力値が空の文字列でない場合、条件文を実行します.

  • 新しく作成したli tagでinputします.textContext propertyを使用してvalueをtextとして作成し、li要素を完了するために内容を入力します.

  • Inputウィンドウを空白にする

  • 新しく作成したli要素をNotCompleted olに貼り付けます

  • liラベルを作成したらcheck buttonとdelbuttonを貼り付けます

  • checkボタンをクリックするイベントが発生した場合は匿名関数を実行します

  • check buttonのparentNodeを新しいvariableに割り当てます.

  • removeメソッドを使用してオブジェクトのparentNodeを削除するには、ボタンをクリックします.

  • 削除した親ノードを完了したolに貼り付け

  • チェックボタンが不要なため、完了したリストをクリアします.

  • del buttonをクリックするイベントが発生した場合、匿名関数を実行します.

  • このdel buttonのparentNodeを新しいvariableに割り当てます.

  • removeメソッドを使用してオブジェクトのparentNodeを削除するには、ボタンをクリックします.

    • 10071 JavaScript新知

  • キー値を使用して関数を作成
    キーコードの確認

    • Mellow JavaScript codeで質問は?

  • イベントに割り当てられた関数は簡単であればあるほど良いと言われていますが、この関数の内容は多すぎませんか?
  • 関数で宣言された関数を変更して分離するために、変数の役割ドメインによって実行できない機能が生成されます.どのように再構築しますか?
  • check buttonとdelbuttonで同じ変数を宣言しましたが、重複しない作成方法はありますか?
    • linux ntfsパーティションの自動マウント
    head、tail、tr、wcコマンド