- Django Rest Framework
Front JS CRUD
[index.html]
<!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">
<link rel="stylesheet" type="text/css" href="index.css">
<title>JS CRUD</title>
</head>
<body>
# 1
<h1> JS CRUD </h1>
<h1> JS CRUD 2 </h1>
<h1> JS CRUD 3 </h1>
# 2, # 4
<!-- id는 class처럼 여러 element에 적용될 수 없음 -->
<ul id="my_list">
<li class="list_item" id="'first-item" onclick="handleSingleClick(this)"> 첫 내용 </li>
<li class="list_item" id="'second-item" onclick="handleSingleClick(this)"> 둘 내용 </li>
<li class="list_item" id="'third-item" onclick="handleSingleClick(this)"> 셋 내용 </li>
</ul>
# 3
<button type="button" onclick="handleClick()"> 버어트은 </button>
<div class="divplace">
# 6
<input type="text" id="todo_item_input" placeholder="To Do List">
<button onclick="toDoAddItem()">입력 완료</button>
<ul id="my_list2">
# 5
<li class="list_item2" id="'f-item" onclick="handleSingleClick2(this)"> 첫 내용 </li>
<li class="list_item2" id="'s-item" onclick="handleSingleClick2(this)"> 둘 내용 </li>
<li class="list_item2" id="'t-item" onclick="handleSingleClick2(this)"> 셋 내용 </li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
[index.js]
console.log("index 로딩 완료")
// DOM
//변수 : const , var, let
// # 1. html에서의 js 위치 + 태그 불러오기
const mainHeader = document.querySelector('h1') // 똑같은 태그가 여러개 있다면 최상단 태드만 불러옴
const mainHeaders = document.querySelectorAll('h1') // 똑같은 태그가 여러개 있다면 모두 불러옴
// console.log(mainHeader)
// console.log(mainHeaders)
//-------------------------------------------------------------------------------------------//
// 콘솔창 정보보기
//console.log(window.document)
//-------------------------------------------------------------------------------------------//
// # 2. 우리가 주로 쓸건 태그를 가져오는게 아니라 태그안 class name이다.
const myList = document.getElementById('my_list')
const listItem = document.getElementsByClassName('list_item') // element+s (여러개 선택이 가능하기 떄문에)
console.log(myList)
console.log(listItem)
// html이 아닌 js자체에서 적용시켜주는 함수 (ex. 좋아요, 팔로우 등)
myList.classList.toggle("mystyle1");
// Array.from(변수명).forEach((element : 변수안에 element를 말함)=>{}) 형태 외우기
// class 는 id와 다르게 여러개 있을때 바로 적용 불가 -> Array로 정렬후 정의해주기
Array.from(listItem).forEach((element)=>{
console.log(element);
element.classList.toggle('mystyle2')
})
//-------------------------------------------------------------------------------------------//
// # 3. 함수정의
function handleClick(){
console.log('버어트은 실행')
Array.from(listItem).forEach((element)=>{
console.log(element);
element.classList.toggle('mystyle2')
})
}
//-------------------------------------------------------------------------------------------//
// # 4. li item 전체가 아닌 개별인식
function handleSingleClick(e){
console.log('li 싱글클릭 실행')
console.log(e)
console.log(e.id)
console.log(e.innerText)
const singleItem = document.getElementById(e.id)
singleItem.classList.toggle('mystyle3')
}
// # 5. 위의 연장선으로 css 이용해서 To Do List 만들기
function handleSingleClick2(e2){
const singleItem2 = document.getElementById(e2.id)
singleItem2.classList.toggle('mystyle4')
}
//-------------------------------------------------------------------------------------------//
// # 6. todolist에 리스트 추가하기
function toDoAddItem(){
console.log('toDoAddItem 실행')
const toDoItemInput = document.getElementById('todo_item_input')
const content = toDoItemInput.value
if (content){
console.log('content 있을때 실행')
const newList = document.createElement('li') // 태그값을 붙여줘야됨
newList.innerText = content
const myList = document.getElementById('my_list2')
myList.append(newList)
toDoItemInput.value = ''
} else{
console.log('content 없을때 실행')
alert('to do list를 적어줘라~')
}
}
[index.css]
.divplace{
margin-top: 50px;
margin-bottom: 50px;
}
/* css에서 정의된 스타일을 .js에서 정의해서 사용할 수 있음 */
.mystyle1{
background-color: plum;
}
.mystyle2{
background-color:burlywood
}
.mystyle3{
background-color:hotpink
}
.mystyle4{
text-decoration: line-through;
}'woncoding > TIL' 카테고리의 다른 글
| TIL | 11.15.화 [소수 / 조합] (1) | 2022.11.16 |
|---|---|
| TIL | 11.14.월 [DRF ↔️ JS CRUD ] (0) | 2022.11.14 |
| TIL | 11.10.목 [Algorithm] (1) | 2022.11.10 |
| TIL | 11.9.수 [DRF ↔️ JS CRUD ] (0) | 2022.11.10 |
| TIL | 11.8.화 [Django : DRF] (0) | 2022.11.09 |