[MiniProject] To-do list
10464 ワード
To do listの作成
設計リファレンス:https://codepen.io/jessicaagyemang/pen/zxVmeL
STS, MYSQL
発生したイベント
InputウィンドウでEnterキーを押してイベントをトリガー
/* html */
<input type="text" id="input" onkeydown="Enter_Check()">
/* js */
function Enter_Check(){
let input = document.getElementById('input');
if(event.keyCode == 13){
리스트를 등록하는 코드가 들어갑니다.
}
input.value=""; //글을 등록했으니 input 칸을 비워주자.
}
完了したリストを未完了のリストから分離
jspでは、リストを最初にロードするときにlistでタグを使用してstatusを標準(0と1に分けて)jstlを区切ります.<ul id="todo-list">
<c:forEach var="t" items="${list}">
<c:choose>
<c:when test="${t.status eq '0'}">
<li class="list">${t.content}
<a href="#" class="del-btn" onclick="del(this)"> <i class="fa fa-trash fa-2x icon"></i>
</a>
<input type="hidden" value="${t.id}">
</li>
</c:when>
<c:otherwise>
<li class="list check">${t.content}
<a href="#"class="del-btn" onclick="del(this)"> <i class="fa fa-trash fa-2x icon"></i>
</a>
<input type="hidden" value="${t.id}">
</li>
</c:otherwise>
</c:choose>
</c:forEach>
</ul>
関連項目:https://offbyone.tistory.com/367
条件による更新
以前のプロジェクトでは、statusを0から1、1から0に更新できる機能が多かった.以前の記憶を思い出すと、コントローラで条件を区切って2つのクエリー文を使ったことを覚えています.そこで、今回はクエリー文で1つを制御できるかどうか調べてみました.update todo
set status = case
when status = 0 then 1
Else 0 end
where id = #{id};
関連項目:https://cirrus.tistory.com/entry/MySQL-UPDATE%EB%AC%B8-CASE%EC%A1%B0%EA%B1%B4%EB%AC%B8-%EC%82%AC%EC%9A%A9
チームプロジェクトの後に作成された最初のミニプロジェクトです.
初めてA-Zを1人でやるのですが、小さなプロジェクトでもいろいろ悩みますが、シンプルなCRUDはもう慣れていると思っていたのですが、まだまだ足りない点がたくさんあることに気づきました.
そして残念なことに、デザイン部分はまだ難しいです.
Reference
この問題について([MiniProject] To-do list), 我々は、より多くの情報をここで見つけました
https://velog.io/@suhyeon7846/MiniProject-To-do-list
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
/* html */
<input type="text" id="input" onkeydown="Enter_Check()">
/* js */
function Enter_Check(){
let input = document.getElementById('input');
if(event.keyCode == 13){
리스트를 등록하는 코드가 들어갑니다.
}
input.value=""; //글을 등록했으니 input 칸을 비워주자.
}<ul id="todo-list">
<c:forEach var="t" items="${list}">
<c:choose>
<c:when test="${t.status eq '0'}">
<li class="list">${t.content}
<a href="#" class="del-btn" onclick="del(this)"> <i class="fa fa-trash fa-2x icon"></i>
</a>
<input type="hidden" value="${t.id}">
</li>
</c:when>
<c:otherwise>
<li class="list check">${t.content}
<a href="#"class="del-btn" onclick="del(this)"> <i class="fa fa-trash fa-2x icon"></i>
</a>
<input type="hidden" value="${t.id}">
</li>
</c:otherwise>
</c:choose>
</c:forEach>
</ul>条件による更新
以前のプロジェクトでは、statusを0から1、1から0に更新できる機能が多かった.以前の記憶を思い出すと、コントローラで条件を区切って2つのクエリー文を使ったことを覚えています.そこで、今回はクエリー文で1つを制御できるかどうか調べてみました.
update todo
set status = case
when status = 0 then 1
Else 0 end
where id = #{id};チームプロジェクトの後に作成された最初のミニプロジェクトです.
初めてA-Zを1人でやるのですが、小さなプロジェクトでもいろいろ悩みますが、シンプルなCRUDはもう慣れていると思っていたのですが、まだまだ足りない点がたくさんあることに気づきました.
そして残念なことに、デザイン部分はまだ難しいです.
Reference
この問題について([MiniProject] To-do list), 我々は、より多くの情報をここで見つけました https://velog.io/@suhyeon7846/MiniProject-To-do-listテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol