フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

1. 簡単な紹介

HTML、CSS、およびいくつかの JS を学習した後、ブロガーは空き時間を利用して、シンプルな JS アプリケーションに関するデモも作成しました。メインのアプリケーションは、データの追加、削除、変更、およびクエリを実行でき、localStorage を使用してローカルの永続的なデータストレージを実現できる Todolist (メモ帳に似ています) です。詳細については、引き続きお読みください。

2. スクリーンショットを実行する

ここに画像の説明を挿入

入力ボックスにコンテンツを入力します:

ここに画像の説明を挿入

追加後、デフォルトで未完了列に追加されます。

ここに画像の説明を挿入

追加した項目を変更します。

ここに画像の説明を挿入

変更が成功しました:

ここに画像の説明を挿入

正常に変更された項目を完了として設定します。

ここに画像の説明を挿入

「食べる」と「寝る」を削除します。

ここに画像の説明を挿入

3. コードの紹介

では、早速コードを紹介します。

HTML部分:

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>ToDoリスト</title>
		<link rel="スタイルシート" type="text/css" href="index.css" rel="外部 nofollow" />
	</head>
	<本文>
		<!-- ヘッダー -->
		<div id="ヘッダー">
			<label class="text">ToDoリスト</label>
			<input id="todo" class="head" type="text" placeholder="ToDo 項目を入力してください">
			<button id="add" class="add" onclick="add()">追加</button>
		</div>
		<!-- コンテンツ -->
		<div id="コンテナ">
			<h1 class="title">未完成</h1>
			<span id="todocount"></span>
			<ol id="todolist">
			</ol>
			<h1 class="title">完了</h1>
			<span id="完了カウント"></span>
			<ol id="完了リスト">
			</ol>
		</div>
	</本文>
	<script type="text/javascript" src="index.js"></script>
</html>

大きく分けて2つの部分に分かれており、1つはヘッダー入力ボックス、もう1つはコンテンツ表示部分です。Todocountとdonecountは未完了と完了した項目の数を示し、listは特定の項目を表示します。デフォルトではこのような項目はないので、js内で項目を追加して表示しています。

CSS部分:

* {
	マージン: 0;
	パディング: 0;
}

体 {
	背景色: #b8c9ff;
}

#ヘッダー{
	マージン: 0 自動;
	フォントサイズ: 50px;
	幅: 700ピクセル;
	テキスト配置: 中央;
	高さ: 150px;
}

。タイトル {
	ディスプレイ: インラインフレックス;
}

。頭 {
	-webkit-appearance: なし;
	境界線の半径: 25px;
	幅: 500ピクセル;
	高さ: 60px;
	ボックスの影: 5px 5px 10px #556677;
	境界線: 1px 実線 #556677;
	フォントサイズ: 30px;
	左パディング: 25px;
	アウトライン: 0;
	マージン: 0 自動;
	ディスプレイ: インラインフレックス;
}

。追加 {
	幅: 80ピクセル;
	高さ: 50px;
	境界線の半径: 25px;
	アウトライン: 0;
	境界線: 1 実線 #556677;
	フロート: 右;
	マージン: 20px 0 0;
	フォントサイズ: 20px;
}

＃容器 {
	マージン: 0 自動;
	幅: 700ピクセル;
	高さ: 150px;
}

.del {
	幅: 120ピクセル;
	高さ: 70px;
	境界線の半径: 25px;
	アウトライン: 0;
	境界線: 1 実線 #556677;
	フォントサイズ: 20px;
	ディスプレイ: フレックス;
	マージン: 0 自動;
}

オル {
	上マージン: 20px;
	下マージン: 20px;
}

オルリ{
	幅: 600ピクセル;
	高さ: 30px;
	背景色: #fff;
	リストスタイル: なし;
	テキスト配置: 中央;
	フォントサイズ: 20px;
	境界線の半径: 25px;
	上マージン: 10px;
	パディング: 10px;
	ボックスの影: 5px 5px 10px #556677;
}

ol li span {
	フロート: 左;
}

ol li ボタン {
	フロート: 右;
	幅: 70ピクセル;
	高さ: 30px;
	上マージン: 0px;
	左マージン: 10px;
	境界線の半径: 25px;
	ボックスの影: 5px 5px 10px #556677;
	アウトライン: 0;
}

.del1 {
	背景色: #f40;
	境界線の半径: 25px;
	幅: 50px;
	高さ: 30px;
	ボックスの影: 5px 5px 10px #556677;
	アウトライン: 0;
}

。編集 {
	背景色: ロイヤルブルー;
	境界線の半径: 25px;
	幅: 50px;
	高さ: 30px;
	ボックスの影: 5px 5px 10px #556677;
	アウトライン: 0;
	色: #FFFFFF;
}

#todocount {
	幅: 30ピクセル;
	高さ: 30px;
	背景色: #FFFFFF;
	表示: インラインブロック;
	境界線の半径: 50%;
	フロート: 右;
	フォントサイズ: 1em;
	上マージン: 10px;
	テキスト配置: 中央;
	行の高さ: 30px;
}

#完了回数 {
	幅: 30ピクセル;
	高さ: 30px;
	背景色: #FFFFFF;
	表示: インラインブロック;
	境界線の半径: 50%;
	フロート: 右;
	フォントサイズ: 1em;
	上マージン: 10px;
	テキスト配置: 中央;
	行の高さ: 30px;
}

ここでは CSS の部分については詳しく説明しません。ブロガーは自分が素晴らしい仕事をしたと考えています。もしあなたがそれをやったのであれば、自分で最適化することができます。

JS部分:

window.addEventListener("load", load); //ページが読み込まれた後、つまりページの初期化後にload関数を呼び出します。document.getElementById("todo").onkeypress = function (event) {
	if (event.keyCode === 13){/*13 は Enter キーを押すことを意味します*/
		(イベント)を追加します。
	}
};
var todolist;//グローバル変数を定義 function load() { //すべての項目を読み込む関数 var todo = document.getElementById("todolist");//DOM要素を取得 var done = document.getElementById("donelist");
	var todonum = document.getElementById("todocount");
	var donenum = document.getElementById("donecount");
	var todocontent = ""; //初期値を設定します var donecontent = "";
	var todocount = 0;
	var 完了回数 = 0;
	var list = localStorage.getItem("todolist"); //ローカルのtodolistデータを取得します。 if (list != null) { //空でない場合 todolist = JSON.parse(list); //JSONオブジェクトをJSオブジェクトに変換します。 } else {
		todolist = []; // 空 }
	todolist != null の場合 {
		for (var i = 0; i < todolist.length; i++){//jsオブジェクトに変換されたtodolistを走査します
			if (todolist[i].done == false) //done が false の場合、まだ完了していないことを意味します todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>変更</button>" + 
				 "<button click=" + "del(" + i + ") class='del1'>削除</button>" +
				"<button οnclick=" + "changedone(" + i + ")>完了を確認</button>"
				 + "</li>"; // 後で使用するために文字列を連結します todocount++; // 未完了の項目の数を 1 つ増やします } else {
				donecontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>変更</button>" +
				"<button click=" + "del(" + i + ") class='del1'>削除</button>" + 
				"<button οnclick=" + "changetodo(" + i + ")>完了をキャンセル</button>"
				+ "</li>";
				donecount++; //完了した項目の数に1を加えた数 }
		}
		todo.innerHTML = todocontent;//todo で表されるタグにコンテンツを追加します。 done.innerHTML = donecontent;//done で表されるタグにコンテンツを追加します。 todonum.innerHTML = todocount;//todonum で表されるタグにコンテンツを追加します。 donenum.innerHTML = donecount;//donenum で表されるタグにコンテンツを追加します。 } else { //todolist が空の場合 todo.innerHTML = "";
		完了.innerHTML = "";
		todonum.innerHTML = 0;
		完了数.innerHTML = 0;
	}
}

function add(e) { //項目を追加する関数 var newtodo = {
		todo: "", //ユーザーが入力したコンテンツ done: false //done はタスクが完了したかどうかを示します };
	var temp = document.getElementById("todo").value; //temp を使用して todo タグの値を保存します if (temp.length == 0 && temp.trim() == "") { //入力が空の場合 alert('入力項目は空にできません');
		戻る;
	}
	var flag = confirm('この項目を追加してもよろしいですか?'); //確認ボックスをポップアップ表示します if(flag){//はいを選択します newtodo.todo = temp; //newtodo オブジェクトの todo 属性に temp 値を割り当てます todolist.push(newtodo); //todolist にオブジェクトを追加します document.getElementById("todo").value = ""; //入力ボックスを初期化します save(); //保存します alert('正常に追加されました');
	}それ以外{
		alert('操作エラー');
		戻る ;
	}
}

function changedone(i){ // 未完了の項目を完了済みに変更します var flag = confirm('この項目を完了してもよろしいですか?');
	if(フラグ){
		todolist[i].done = true; //完了ステータスを変更する save();
		alert('変更が成功しました');
	}それ以外{
		alert('操作エラー');
		戻る ;
	}
}

function changetodo(i){ //完了した項目を未完了に変更します var flag = confirm('タスクをキャンセルしてもよろしいですか?');
	if(フラグ){
		todolist[i].done = false; //完了ステータスを変更する save();
		alert('変更が成功しました');
	}それ以外{
		alert('操作エラー');
		戻る ;
	}
}

function edit(i) { // 項目の内容を変更します var temp = prompt("変更したい内容を入力してください", todolist[i].todo); 
	if(temp != null && temp.trim() != ""){//変更後にコンテンツが空でない場合 todolist[i].todo = temp; //コンテンツを変更 alert('変更に成功しました');
		保存（）;
	}それ以外{
		alert('入力文字列が空なので、変更に失敗しました');
	}
}

function del(i) { //対応する項目を削除します var flag = confirm('この項目を削除してもよろしいですか?');
	if(フラグ){
		todolist.splice(i, 1); //指定された要素を削除する save();
		alert('正常に削除されました');
	}それ以外{
		alert('操作エラー');
		戻る ;
	}
}

function save(){ // アイテムを保存する関数 localStorage.setItem("todolist", JSON.stringify(todolist)); // JS オブジェクトを JSON オブジェクトに変換してローカルに保存 load(); // 保存するたびにページを更新します}

このデモの主な用途は js 部分であるため、ここでのコード内のコメントは比較的包括的で、主に追加、削除、変更、チェックのためのいくつかの機能、およびいくつかの初期化の注意事項と永続データの使用が含まれています。変更または追加のたびに、コンテンツを保存して再読み込みする必要があることに注意してください。そうしないと、コンテンツが時間内に更新されません。また、ここにあるコードをそのままコピーすると、デバイスの違いによりスタイルに若干の違いが生じる可能性があります。ここのブロガーはクロスデバイス処理を行っていません。

4. まとめ

このデモでは、これまで学んだ知識のほとんどを適用することができ、練習の過程で忘れていた知識ポイントもいくつか復習できました。このデモは特に完璧ではなく、その過程で情報検索に遭遇しましたが、それでも全体的には多くのことを学びました。また、フロントエンドを学び始めたばかりの多くの初心者は、最初の段階を完了した後、時間内にいくつかのデモを行うことをお勧めします。結局のところ、プログラミングでは練習の方が重要です。

HTML+CSS+JSで簡単なTODOLIST（メモ帳）を作る方法についての記事はこれで終わりです。より関連性の高いTODOLIST操作例については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: