할일 목록 앱을 만드는 방법
16265 단어 javascripthtmlcsswebdev
이 할 일 앱을 사용하면 작업을 쉽고 효과적으로 추가, 제거 및 수정할 수 있습니다. 프로젝트 내에서 이 경량 코드를 쉽게 통합하여 필요에 따라 즉석에서 할 일 목록을 만들 수 있습니다.
시작하자!
프로젝트에 부트스트랩 5 추가
가장 먼저 해야 할 일은 프로젝트를 설정하고 HTML 코드를 추가하는 것입니다.
<div> 태그를 사용하여 할 일 목록의 컨테이너를 만든 다음 나중에 JavaScript를 추가합니다.먼저 Bootstrap 5 CSS를 HTML 파일의
<head> 섹션에 추가해 보겠습니다.<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
완료되면 HTML 코드를
<body> 섹션에 추가해 보겠습니다.할 일 목록 HTML 코드 추가
<div class=" container rounded-3 border-dark border border-2 my-5 bg-white" style="height:auto;">
<div>
<h1 class=" h1">To Do List</h1>
<div class="row">
<div class=" col-8">
<input class=" py-3 form-control shadow" placeholder="Add a task" type="text" id="inputText">
</div>
<div class="col-2">
<button id="addButton" onclick="addList()" class=" mt-2 btn btn-success"> Add Task</button>
</div>
</div>
</div>
<hr>
<div class="row rounded bg-white">
<div class=" col-12">
<ul class=" list-group" id="list"></ul>
</div>
</div>
</div>
엄청난! 스켈레톤 코드를 구현했습니다. 이제 JavaScript를 추가할 차례입니다.
let input = document.getElementById("inputText");
let list= document.getElementById("list");
let minimalValue = 3;
let listNum = 0;
addList=()=>{
// get
let inputText = filterList(input.value);
// set
if (inputText) {
list.innerHTML += ` <li class=" my-3 py-3 shadow list-group-item " id="list${listNum}">
<div class="row">
<div class="col-1">
<input class="" type="checkbox" id="check${listNum}" onclick="done(${listNum})">
</div>
<div class="col-6">
<span class=" h4" id="text${listNum}"> ${inputText} </span>
</div>
<div class="col-4">
<button class=" btn btn-danger" onclick="deleteList(${listNum})">Delete</button>
<button class=" btn btn-primary" onclick="editList(${listNum})">Edit</button>
</div>
</div>
</li> `;
input.value=" ";
listNum++;
}
}
done=(listId)=>{
let checkbox = document.getElementById(`check${listId}`);
let current = document.getElementById(`text${listId}`);
let classExit=current.classList.contains("text-decoration-line-through");
if (classExit == true) {
current.classList.remove("text-decoration-line-through");
}else{
current.classList.add("text-decoration-line-through");
}
}
// filter the list
filterList=(x)=>{
if (x) {
if (x.length >= minimalValue) {
return x;
}
else{
alert("Please enter more than 3 words")
}
}
else{
return false;
}
}
// edit list
editList=(listId)=>{
let currentText = document.getElementById(`text${listId}`);
let newText = prompt("Type a new task",currentText.innerHTML);
if (filterList(newText)) {
currentText.innerHTML = newText;
}
}
// delete list
deleteList=(listId)=>{
let current = document.getElementById(`text${listId}`).innerHTML;
let deleteComfirm = confirm(`Are you sure you want to delete the task:${current}?`);
if (deleteComfirm) {
let p = document.getElementById("list")
let c = document.getElementById(`list${listId}`);
p.removeChild(c);
}
else{
console.log("deleted");
}
};
결론
엄청난! JavaScript 코드를 구현했습니다. 이제 할 일 목록에 작업을 추가할 수 있으며 동적으로 업데이트됩니다.
🤝 시간을 내어 이 기사를 읽어주셔서 감사합니다! 도움이 되었기를 바라며 오늘 새로운 것을 배웠습니다! 추가하고 싶은 것이 있으면 댓글을 남겨주세요.
☕️ 제 콘텐츠Buy me a coffee를 즐겨 읽으신다면 계속해서 멋진 품질의 블로그를 만드는 데 도움이 될 것입니다!
👨🏽💻 더 많은 Web Dev 코드 스니펫, 팁 및 요령을 보려면 내Grepper Platform를 확인하십시오.
🎨 제 포트폴리오here도 확인하실 수 있습니다.
🐦 또한 저를 팔로우하여 제 독학 여정과 웹 개발에 대한 더 많은 팁을 확인할 수 있습니다.
Reference
이 문제에 관하여(할일 목록 앱을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anthonys1760/how-to-create-a-todo-list-app-37lj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
