상세 컨텐츠

본문 제목

투두리스트 만들기

카테고리 없음

by bumychoi 2023. 4. 30. 17:29

본문

<!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>Document</title>
    <style>
        html,
        body,
        h1,
        h2,
        h3,
        div,
        span,
        a,
        button,
        input {
            margin: 0;
            padding: 0%;
            box-sizing: border-box;
        }

        body {
            background-color: rgb(235, 235, 235);
        }

        .wrap {
            background-color: #f2f4f8;
            width: 350px;
            height: 700px;
            margin: auto;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .flex-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .wrap-todo {
            padding: 16px;
        }

        h1 {
            font-size: 18px;
            margin: 16px auto 20px 0;
           
        }

        .todo {
            padding: 16px;
            background-color: aqua;
            border-radius: 8px;
            width: 300px;
            height: 50px;

            margin-bottom: 8px;
        }

        .todo-content {
            margin-left: 8px;
            margin-right: auto;
           
        }

        .todo>input {
            zoom: 1.5;
            background-color: transparent;
        }

        .add-form {
            padding: 16px;
            background-color: #fff6f8;
            border: 1px solid red;
            border-radius: 8px;
            width: 300px;
            height: 50px;
            display: none;
        }

        .add-form-btns {
            margin-left: auto;
        }

        .add-form-btns>button {
            margin: 0px 4px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }

        .add-form>input {
            background-color: transparent;
            border: none;
            font-size: 16px;
            width: 200px;
        }

        .add-form>input:focus-visible {
            outline: none;

        }

        .add-btn {
            padding: 16px;
            background-color: transparent;
            border: 1px dashed gray;
            border-radius: 8px;
            width: 300px;
            height: 50px;
            cursor: pointer;
        }

        .add-btn>span {
            margin-bottom: 5px;
        }

        .add-btn>button {
            margin-left: 8px;
            margin-right: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }
       
        .todo-content-modify>input{
            border: none;
            margin-left: 8px;
            margin-right: auto;
            font-size: 16px;
            background-color: transparent;
            color: gray;
            width: 160px;

        }
        .todo-content-modify>input:focus-visible{
            outline: none;
        }
        .todo-content-modify>button{
            margin: 0px 3px;
            font-weight: 600;
            cursor: pointer;
            background-color: transparent;
            border: none;
            font-size: 11PX;
        }
        .todo>button{
            background-color: transparent;
            cursor: pointer;
            border: none;
            font-weight: 600;
            font-size: 11px;
            color: red;
        }
        .calender{
            background-color: wheat;
        }
        .calender>h2{
            margin: 16px 0;
            cursor: pointer;
        }
        .days{
            display: grid;
            grid-template-columns: repeat(7,1fr);
            grid-gap:18px;
            margin-bottom: 20px;
        }
        .days>div{
            width: 30px;
            height: 30px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        .dates{
            display: grid;
            grid-template-columns: repeat(7,1fr);
            grid-gap:18px;
            margin-bottom: 20px;
        }
        .dates>div{
            width: 30px;
            height: 30px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            cursor: pointer;
        }
        .dates>div.clicked{
            background-color: black;
            border-radius: 50%;
            color: white;
        }
    </style>
    <script>
        $(document).ready(() => {
            listcontent()
            loadCalender()
            todayClicked()
        })
        function loadCalender(){
            let today =new Date();
            let year =today.getFullYear();
            let month=today.getMonth()+1;
            $('#this-month').text(`${year}년 ${month}월`)

            let first_day= (new Date(year,month-1,1)).getDay()
            let last_day= (new Date(year,month,0)).getDate()
           
           
            for(let i=0; i<first_day; i++){
                let temp_html =`<div></div>`
                $(`#dates`).append(temp_html)
            }
            for(let i=0; i<last_day; i++){
                let id =`${year}-${month}-${i+1}`

                let targat_day = (new Date(year,month-1,i+1)).getDay()
                let color =''
                if (targat_day==0){
                    color='red'
                }
                else if (targat_day==6){
                    color='blue'
                }
                let temp_html =`<div class="${color}" onclick="addClicked('${id}')" id="${id}">${i+1}</div>`
                $(`#dates`).append(temp_html)
            }

        }
        function addClicked(id){
            $('#dates>div').removeClass('clicked')
            $(`#${id}`).addClass('clicked')

            $(`#today-todo`).text(`${id}.오늘의 할일`)
        }
        function todayClicked(){
            let today = new Date();
            let year =today.getFullYear();
            let month=today.getMonth()+1;
            let date =today.getDate();
           
            let id=`${year}-${month}-${date}`
            $(`#${id}`).trigger('click');
        }
        function showaddForm() {
            $('#add-form').css('display', 'flex');
            $('#add-btn').hide();
        }
        function hideaddForm() {
            if (confirm("정말 취소합니까?.")) {
                $('#add-form').hide();
                $('#add-btn').css('display', 'flex');
            }

        }
        function addcontent() {
            let content = $('#content').val()

            let formData = new FormData()
            formData.append("content_give", content)

            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'];
                rows.forEach((row) => {
                    let content = row['content']
                    let _id =row['_id']
                    let check =row['check']

                    let txt_checked=''
                    let txt_style=''
                    if(check=='true'){
                        txt_checked="checked"
                        txt_style='style="text-decoration:line-through"'
                    }

                    let temp_html =`<div id="${_id}" class="todo flex-row" >
                                        <input ${txt_checked} type="checkbox" onchange="checkContent('${_id}')">
                                        <span ${txt_style} onclick="showUpdateForm('${_id}')" class="todo-content">${content}</span>
                                        <button  onclick="deleteContent('${_id}')">삭제</button>
                                        <div style="display: none;" class="todo-content-modify flex-row" >
                                            <input value="${content}" type="text">
                                            <button  onclick="modifyContent('${_id}')">수정</button>
                                            <button  onclick="hideUpdateForm('${_id}')">취소</button>
                                        </div>  
                                    </div>`                
                    $('#todos').append(temp_html);
                })
            })
        }
        function showUpdateForm(_id) {
            $(`#${_id}>span`).hide();
            $(`#${_id}>button`).hide();
            $(`#${_id}>input`).hide();
            $(`#${_id}>div`).css('display','flex');
        }
        function hideUpdateForm(_id) {
            $(`#${_id}>span`).show();
            $(`#${_id}>button`).show();
            $(`#${_id}>input`).show();
            $(`#${_id}>div`).css('display','none');
        }
        function modifyContent(_id){
            let new_content =$(`#${_id}>div>input`).val();
            let formData = new FormData()
            formData.append("id_give", _id)
            formData.append("content_give",new_content)

            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()
            })
        }
        function checkContent(_id){
            let is_checked =$(`#${_id}>input`).is(':checked');
            let formData = new FormData()
            formData.append("id_give", _id)
            formData.append("check_give",is_checked)

            fetch('/check', { method: "POST", body: formData }).then(res => res.json()).then(data => {
                alert(data["msg"])
                window.location.reload()
            })
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="calender flex-col">
            <h2 onclick="todayClicked()" id="this-month">2023.2월</h2>
            <div  class="days">
                <div class="red">일</div>
                <div>월</div>
                <div>화</div>
                <div>수</div>
                <div>목</div>
                <div>금</div>
                <div class="blue">토</div>
            </div>
            <div id="dates" class="dates">
               
            </div>
        </div>
        <div class="wrap-todo flex-col">
            <h1 id="today-todo">
                오늘의 할 일
            </h1>
            <div id='todos' class="todos flex-col">

            </div>
            <div id="add-form" class="add-form flex-row">
                <input id='content' type="text">
                <div class="add-form-btns flex-row">
                    <button onclick="addcontent()">추가</button>
                    <button onclick="hideaddForm()">취소</button>
                </div>
            </div>
            <div id="add-btn" onclick="showaddForm()" class="add-btn flex-row">
                <span>+</span>
                <button>추가하기</button>
            </div>
        </div>
</body>

</html>

티스토리툴바