728x90
과제내용
- todo 리스트 제작
- 삭제버튼 추가
결과물
❗이슈내용❗
제작을 마치고 프로그램을 실행하여 리스트가 정상적으로 작동되는 것도 확인하고 삭제가 이루어지는 것도 확인하였으나 CSS 수정 이후 에러 발생!
아직 방법을 찾지 못해 해결진행 예정...
추가로 알게 된 내용
input 속성 중 placeholder
- 입력을 받을 input 박스 안에 데이터를 띄울 수 있다.
- 사용자가 데이터를 입력하면 입력받은 데이터가 노출되고 띄워진 데이터는 사라진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<style>
body{
position: relative;
width: 100%;
height: 100%;
}
.g{
position: absolute;
left: 50%;
transform: translate(-50%);
width: 1000px;
height: 2000px;
display: flex;
justify-content: space-around;
}
h1{
display: flex;
margin-top: 100px;
margin-bottom: 50px;
justify-content: center;
font-size: 50px;
}
#btn{
width: 150px;
height: 50px;
font-size: 20px;
}
.insert1{
width: 200px;
height: 30px;
font-size: 20px;
}
.insert2{
width: 200px;
height: 30px;
font-size: 20px;
}
label{
font-size: 23px;
}
li{
width: 800px;
height: 80px;
display: flex;
}
li > div{
width: 200px;
height: 80px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
li > button{
width: 200px;
height: 80px;
border: 1px solid;
}
</style>
</head>
<body>
<div>
<h1>Todo 리스트</h1>
</div>
<div class="g">
<!--input을 이용하여 할일을 입력받는다.-->
<label for="date">마감일</label>
<input class="insert1" type="date">
<input class="insert2" type="text" placeholder="할 일을 입력하세요">
<button id="btn">할 일 추가</button>
</div>
<!--입력받은 할 일이 노출된다.-->
<div id="list"></div>
</body>
<script>
let index = 0;
let text = '{"key" : "value"}';
console.log(text);
console.log(JSON.parse(text));
let obj = {key : 25};
console.log(JSON.stringify(obj));
//input으로 할일을 입력받게 되면 정보가 추가되어 노출될 함수
//window.localStorage.clear();
function addList(){
let put = document.querySelectorAll("input"); //html의 input태그를 가리키는 변수 put을 선언한다.
let date = window.localStorage.getItem("리스트"); //함수 안에서 setitem으로 선언될 "리스트"키의 값을 가리키는 변수 data를 선언한다.
if(window.localStorage.length == 0){ //window에 입력받은 내용이 없어 로컬스트리지 length가 0이면 실행
// setItem의 문법: setItem("키", 값)
window.localStorage.setItem("리스트",`{"date" : "${put[0].value}", "text" : "${put[1].value}", "index" : "${index}"}`);
}
else{
window.localStorage.setItem("리스트",date + "|" + `{"date" : "${put[0].value}", "text" : "${put[1].value}", "index" : "${index}"}`);
}
// let text = JSON.parse(window.localStorage.getItem("리스트"));
// console.log(text);
/*
let inner = window.localStorage.getItem('리스트');
inner = inner.split("|");
*/
index++;
view();
}
console.log(window.localStorage.getItem("리스트"));
function view(i){
let inner = window.localStorage.getItem('list');
list.innerHTML = "";
inner = inner.split("|");
console.log(inner);
let _ul = document.createElement("ul");
let _li = document.createElement("li");
let _div1 = document.createElement("div");
let _div2 = document.createElement("div");
let _div3 = document.createElement("div");
let _del = document.createElement("div");
_div1.innerHTML = "날짜";
_div2.innerHTML = "할 일";
_div3.innerHTML = "번호";
_del.innerHTML = "삭제";
_li.append(_div1,_div2,_div3,_del);
_ul.append(_li);
inner.forEach(function(i,index){
// let _ul = document.createElement("ul");
let _li = document.createElement("li");
let _div1 = document.createElement("div");
let _div2 = document.createElement("div");
let _div3 = document.createElement("div");
let _del = document.createElement("button");
_div1.innerHTML = JSON.parse(i).date;
_div2.innerHTML = JSON.parse(i).text;
_div3.innerHTML = `${index}`
_del.classList.add("del");
_del.onclick = function() {
let value = window.localStorage.getItem("list");
console.log(index);
inner.pop(index);
console.log(inner);
console.log(inner.join("|"));
let str = inner.join("|")
window.localStorage.setItem("list",str);
};
_li.append(_div1,_div2,_div3,_del);
_ul.append(_li);
});
list.append(_ul);
}
if(window.localStorage.length !=0){
view();
}
btn.addEventListener("click",addList);
</script>
</html>728x90
'블록체인_9기 > 과제' 카테고리의 다른 글
| 35강_230522_Node.js(회원가입, 로그인 기능이 있는 게시판 페이지 구현) (0) | 2023.05.29 |
|---|---|
| 19강_230328_과제_묵찌빠 배팅게임_renewal (0) | 2023.03.30 |
| 11강_230314_과제_묵찌빠 배팅 - 함수 적용 (0) | 2023.03.15 |
| 10강_230313_과제_Javascript 묵찌빠 게임 (0) | 2023.03.14 |
| 9강_230310_과제_구구단, 수상자 호출, 3의 배수 구하기 (0) | 2023.03.14 |
