반응형
해당 스크립트를 넣어준다
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 250px;
}
ul {
margin: 0;
padding: 0;
}
h2 {
margin: 5px;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: "";
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #00ffd0;
color: white;
}
.header {
background-color: #00ffd0;
padding: 30px 40px;
color: white;
text-align: center;
}
.header:after {
content: "";
display: table;
clear: both;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2>To Do 목록</h2>
<input type="text" id="myInput" placeholder="할일을 적어주세요." />
<span class="addBtn">추가</span>
</div>
<ul id="myUL">
<li>파이썬 완성 책 완독</li>
<li class="checked">북한산 가기</li>
<li>자바스크립트 온라인 강의 듣기</li>
<li>코스트코 다녀오기</li>
</ul>
<script>
const myNodelist = document.getElementsByTagName("LI");
//리스트에 X 가 생기게 하기 위한 코드입니다.
//아래 문제를 해결하는데 참고 하세요.
for (let i = 0; i < myNodelist.length; i++) {
const span = document.createElement("SPAN");
const txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
let close = document.getElementsByClassName("close");
for (let i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
};
}
const list = document.querySelector("ul");
list.addEventListener("click", toggleChecked, false);
function toggleChecked(e) {
if (e.target.tagName === "LI") {
e.target.classList.toggle("checked");
}
}
//3. class 가 addBtn 인 span에 click 이벤트를 등록해 주세요.
let addBtn = document.querySelector('.addBtn');
addBtn.addEventListener('click', newElement, false);
//4. 추가가 클릭되면 목록에
function newElement() {
const li = document.createElement("li");
const inputValue = document.getElementById("myInput").value;
const t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === "") {
alert("할일을 입력하세요!!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
// 새롭게 내용이 추가된 후 x 버튼을 붙인다.
const span = document.createElement("SPAN");
const txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (let i = 0; i < close.length; i++) {
close[i].onclick = function () {
let div = this.parentElement;
div.style.display = "none";
};
}
}
</script>
</body>
</html>
작동한다
할일 값을 입력 받으면, 응답으로 할일을 보여주도록 구성해보자
1) ruls.py에 path를 추가한다.
2) views.py에 path를 추가한 함수를 구현한다.
3) 응답을 위한 템플릿 파일을 알맞구 수정한다.
할일을 등록했을때, 데이터베이스에 저장해서 사용하고 싶다.
1) Model객체를 생성해 준다.
2) python manage.py makemigrations -- 내가 만들거나 수정한 model객체를 DB에 적용할 수 있도록 준비해준다!
3) python manage.py migrate
데이터 구조가 바뀔때마다 python manage.py makemigration을 해줘야 한다.
'경기도 인공지능 개발 과정 > Python' 카테고리의 다른 글
| [Python 데이터분석] 데이터 분석 기초 1 (0) | 2022.06.30 |
|---|---|
| [Python 데이터분석] matplotlib을 이용한 기본 시각화 (0) | 2022.06.30 |
| [Django] 장고 구조 및 템플릿 사용해보기 (0) | 2022.06.10 |
| [Django] 장고 가상환경 만들기 (0) | 2022.06.09 |
| [Django] 웹서버 란? (0) | 2022.06.09 |