<body>
<div class="ex2">
<p>2.todoapp</p>
<form action="">
<p>일정명 : <input class="input_title" type="text" /></p>
<p>일자 : <input class="input_date" type="date" /></p>
<button>추가하기</button>
</form>
<hr />
<p>검색 : <input class="search" type="text" /></p>
<p>
정렬 :
<select name="" id="">
<option value="latest">최신등록순</option>
<option value="reverse">등록순</option>
<option value="title">일정명</option>
<option value="date">시간순</option>
</select>
</p>
<p class="result"></p>
</div>
</body> let arr = localStorage.getItem("todolocalArr")
? JSON.parse(localStorage.getItem("todolocalArr"))
: [];
let copyArr = [...arr];
function fnPrint() {
document.querySelector(".ex2 .result").innerHTML = "";
copyArr.forEach((v) => {
let { id, inputTitle, inputDate } = v;
document.querySelector(".ex2 .result").insertAdjacentHTML(
"beforeend",
`
<p>날짜: ${inputDate} 할 일 : ${inputTitle}<button value='${id}'>삭제</button></p>`
); //insertAdjacentHTML
}); //foreach
}
fnPrint();
document.querySelector(".ex2").addEventListener("submit", (e) => {
e.preventDefault();
console.log(copyArr);
let inputTitle = document.querySelector(".ex2 .input_title").value;
let inputDate = document.querySelector(".ex2 .input_date").value;
let id = Date.now();
let obj = { id, inputTitle, inputDate };
arr.unshift(obj);
copyArr = [...arr];
localStorage.setItem("todolocalArr", JSON.stringify(arr));
fnPrint();
});
document.querySelector(".ex2 .search").addEventListener("input", (e) => {
copyArr = arr.filter((v) => {
return v.inputTitle.includes(e.target.value);
});
fnPrint();
});//일정명과 일자를 입력하고 버튼을 클릭하면
//하단에 목록이 추가된다
//로컬스토리지에 값을 보관한다
/* 추가된 목록은 고유의 id값을 가져아함 */
//삭제버튼을 누르면 삭제가 되어야함
/* 삭제버튼에 id값을 심어주면됨 */
//시작될때 로컬스토리지에 저장값이 있다면 arr에 다시 배열시킨다 없다면 빈배열
/* -----------------검색기능 만들기------------------------- */
//arr필터로 includes를 이용해 새로운 배열을 만들고 어레이 카피에 넣은후 출력
'프로그래밍 > Javascript' 카테고리의 다른 글
| [javascript]함수 선언 var let const 차이 (0) | 2023.09.06 |
|---|---|
| 챌린지2일차)변수,배열,객체 (0) | 2023.09.06 |
| web application program (0) | 2023.09.06 |
| 챌린지1일차) 왜 자바스크립트일까? (0) | 2023.09.05 |
| javascript 팝업창 만들기 (0) | 2023.08.21 |