고정 헤더 영역
상세 컨텐츠
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
h1,h2,h3,body,div{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex-row{
display: flex;
flex-direction: row;
align-items:left;
justify-content: left;
}
.flex-col{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.list{
cursor: pointer;
width: 300px;
height: 700px;
background-color: aqua;
}
.body{
width: 700px;
background-color: yellowgreen
}
.list-modify>input{
border: none;
background-color:transparent;
width: 180px;
height: 20px;
font-size: 16px;
color: tomato;
font-weight: 500;
cursor: pointer;
margin-left: 0px;
margin-right: auto;
}
.list-modify>input:focus-visible{
outline: none;
}
.list-modify>button{
margin: auto;
font-size: 7px;
font-weight: 600;
cursor: pointer;
background-color: transparent;
border: none;
}
li{
width: 150px;
background-color: bisque;
}
.btn{
margin: 0ox 8px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
background-color: transparent;
border: none;
color: hotpink;
}
</style>
<script>
$(document).ready(()=>{
listContent()
})
function save(){
let title = $('#title').val();
let body = $('#body').val();
let formData = new FormData()
formData.append("title_give",title)
formData.append("body_give", body)
fetch('/post', { method: "POST", body: formData }).then(res => res.json()).then(data => {
alert(data["msg"])
window.location.reload()
})
}
function listContent(){
fetch("/list").then(res => res.json()).then(data => {
let rows = data['result'];
// $('#list').empty()
rows.forEach((row)=>{
let title =row['title']
let _id = row['_id']
let body =row['body']
let temp_html = `<div id="${_id}-1" class="list-modify class="flex-row">
<li onclick="showUpdateFrom('${_id}')">${title}</li>
<button class="btn" onclick="deleteContent('${_id}')">삭제</button><button id="btn" onclick="readContent('${_id}')">조회</button>
</div>
<div id="${_id}-2" style="display: none;" class="list-modify flex-row">
<input type="text" value="${title}">
<button onclick="modifyContent('${_id}')">수정</button>
<button onclick="hideUpdateFrom('${_id}')">취소</button>
</div>
`
$('#list').append(temp_html)
})
})
}
function showUpdateFrom(_id){
$(`#${_id}-1`).hide();
$(`#${_id}-2`).show();
}
function hideUpdateFrom(_id){
$(`#${_id}-1`).show();
$(`#${_id}-2`).hide();
}
function modifyContent(_id){
let new_title = $(`#${_id}-2>input`).val();
let formData = new FormData()
formData.append("id_give",_id)
formData.append("title_give",new_title)
fetch('/modify', { method: "POST", body: formData }).then(res => res.json()).then(data => {
alert(data["msg"])
window.location.reload()
})
}
function deleteContent(_id){
let formData = new FormData()
formData.append("id_give",_id)
fetch('/delete', { method: "POST", body: formData }).then(res => res.json()).then(data => {
alert(data["msg"])
window.location.reload()
})
}
</script>
</head>
<body>
<div class="flex-row">
<div class="list">
<h1><a href="/">WEB</a></h1>
<ol id="list">
<!-- <li onclick="showUpdateFrom()" id="122">플라스크배우기</li>
<div id="122" style="display: none;" class="list-modify flex-row">
<input type="text" value="플라스크배우기">
<button>수정</button>
<button onclick="hideUpdateFrom()">취소</button>
</div> -->
</ol>
</div>
<div class="body">
<h2>welcome</h2>
hello,web
</div>
<div class="from">
<h2>수업추가하기</h2>
<p>프로그램명<input id="title" type="text" placeholder="title"></p>
<p>수업 소개</p><textarea id="body" placeholder="body" cols="30" rows="5"></textarea>
<button onclick="save()">저장</button>
</div>
</div>
</body>
</html>
'html, css' 카테고리의 다른 글
| 사이트 생성 (0) | 2024.03.25 |
|---|---|
| 로컬 홈피 완성 (0) | 2023.02.23 |
| 날씨 api 적 (0) | 2023.02.17 |
| 스파르타 1차 완성 (0) | 2023.02.15 |
| 웹사이트 따라 만들기 (0) | 2023.01.07 |
