완성한 코드

To Do List(본 페이지/간단하게)

fpzmfks 2024. 7. 12. 18:18

본페이지

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>일정표</title>
</head>
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>
    .header {
        display: block;
        width: 1000px;
        background-color: rgb(70, 172, 236);
        margin: 20px auto 20px auto;
        padding: 20px auto;
    }

    .title>h1 {
        text-align: center;
    }

    .input {
        background-color: rgb(127, 225, 255);
        text-align: center;

        border: 5px solid rgb(0, 30, 255);
        border-radius: 5px;

    }

    .contentbox {
        width: 800px;
    }

    .input>input {
        margin: 10px;
    }

    .content {
        display: block;
        width: 1000px;
        margin: 0 auto;
        background-color: rgb(250, 251, 219);

        border: 5px solid rgb(121, 235, 239);
    }




    .cardlist {
        display: flex;
        flex-wrap: wrap;

        margin: 10px;
        padding: 10px;
    }


    .card text-bg-light mb-3 {
        width: 18rem;
        height: 18rem;
        margin: 30px auto 0px auto;
        padding: 10px;
    }
</style>

<body>
    <div class="todolist">
        <div class="header">
            <div class="title">
                <h1>To Do List</h1>
            </div>
            <div class="input">
                <input type="text" id="dateinput" placeholder="날짜를 입력하세요"><br>
                <input type="text" id="titleinput" placeholder="제목을 입력하세요"><br>
                <input type="text" class="contentbox" id="contentinput" placeholder="할 일을 입력하세요(각 텍스트박스에 입력해 수정하세요)">
                <button type="button" id="addbutton" class="btn btn-primary">등록</button>
            </div>
        </div>
        <div class="content">
            <div id="cardlist" class="cardlist">

            </div>
        </div>
    </div>
</body>
<script src="script.js"></script>

</html>
 

js파일

const addbutton = document.querySelector("#addbutton")
const dateinput = document.querySelector("#dateinput")
const titleinput = document.querySelector("#titleinput")
const contentinput = document.querySelector("#contentinput")
const cardlist = document.querySelector("#cardlist")



addbutton.addEventListener('click', function () {
    let createlist = document.createElement('div');

    let cardhead = document.createElement('div');
    let deletebtn = document.createElement('button');
    let editbtn = document.createElement('button');

    let creatbody = document.createElement('div');
    let cardtitle = document.createElement('h5');
    let cardcontent = document.createElement('p');

    let combtn = document.createElement('button');


    cardlist.appendChild(createlist);

    createlist.appendChild(editbtn);
    createlist.appendChild(cardhead);

    createlist.appendChild(creatbody);
    creatbody.appendChild(cardtitle);
    creatbody.appendChild(cardcontent);

    createlist.appendChild(combtn);
    createlist.appendChild(deletebtn);


    cardhead.innerText = dateinput.value;
    cardtitle.innerText = titleinput.value;
    cardcontent.innerText = contentinput.value;

    combtn.innerText = '완료!';
    deletebtn.innerText = 'X';
    editbtn.innerText = '수정';



    createlist.className = "card text-bg-light mb-3"
    createlist.style = "max-width: 18rem;"

    cardhead.className = "card-header"
    deletebtn.id = "deletebtn"
    deletebtn.className = "btn btn-outline-danger"
    editbtn.className = "btn btn-primary"
    editbtn.id = "editbtn"

    creatbody.className = "card-body"
    cardtitle.className = "card-title"
    cardcontent.className = "card-text"

    combtn.id = "complete"
    combtn.className = "btn btn-outline-success"

    cardlist.style.wordBreak = 'keep-all';



    combtn.addEventListener('click', function () {
        cardhead.style.textDecoration = "line-through";
        cardtitle.style.textDecoration = "line-through";
        cardcontent.style.textDecoration = "line-through";

    })

    deletebtn.addEventListener('click', function () {
        cardlist.removeChild(createlist);
    })

    editbtn.addEventListener('click', function () {
        cardhead.innerText = dateinput.value;
        cardtitle.innerText = titleinput.value;
        cardcontent.innerText = contentinput.value;
    })


    dateinput.value = '';
    titleinput.value = '';
    contentinput.value = '';
})

 

간단하게

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>
    .header {
        display: block;
        width: 1000px;
        background-color: rgb(70, 172, 236);
        margin: 20px auto 20px auto;
        padding: 20px auto;
    }

    .title>h1 {
        text-align: center;
    }

    .input {
        background-color: rgb(127, 225, 255);
        text-align: center;

        border: 5px solid rgb(0, 30, 255);
        border-radius: 5px;

    }

    .input>input {
        margin: 10px;
        width: 500px;
    }

    .content {
        display: block;
        width: 1000px;
        margin: 0 auto;
        background-color: rgb(250, 251, 219);

        border: 5px solid rgb(121, 235, 239);
    }

    .cardlist {
        text-align: center;
        list-style-type: none;
    }
</style>

<body>
    <div class="todolist">
        <div class="header">
            <div class="title">
                <h1>To Do List</h1>
            </div>
            <div class="input">
                <input type="text" id="textinput" placeholder="내용를 입력하세요(여기에 입력해 수정하세요)">
                <button type="button" id="addbutton" class="btn btn-primary">등록</button>
            </div>
        </div>
        <div class="content">
            <div id="listcard" class="cardlist">
                <h2>List</h2>
            </div>
        </div>
    </div>
</body>
<script src="script(간단하게).js"> </script>

</html>

 

js 파일

const input = document.querySelector("#textinput")
const addbutton = document.querySelector("#addbutton")
const listcard = document.querySelector("#listcard")

addbutton.addEventListener('click', function () {
    let li = document.createElement('li');
    let delbtn = document.createElement('button');
    let combtn = document.createElement('button');
    let editbtn = document.createElement('button');

    li.innerText = input.value;
    combtn.innerText = '완료';
    delbtn.innerText = '삭제';
    editbtn.innerText = '수정';

    listcard.appendChild(li);
    listcard.appendChild(combtn);
    listcard.appendChild(editbtn);
    listcard.appendChild(delbtn);

    combtn.addEventListener('click', function () {
        li.style.textDecoration = "line-through";
    })

    delbtn.addEventListener('click', function () {
        listcard.removeChild(li);
        listcard.removeChild(delbtn);
        listcard.removeChild(combtn);
        listcard.removeChild(editbtn);
    })

    editbtn.addEventListener('click', function () {
        li.innerText = input.value;
    })

    input.value = '';
    li.style.fontSize = '30px';
    delbtn.style.backgroundColor = 'rgb(245, 227, 246)';
    combtn.style.backgroundColor = 'rgb(245, 227, 246)';
    editbtn.style.backgroundColor = '#0d6efd';
    editbtn.style.color = 'white';

    editbtn.style.margin = '0 3px';
    li.style.wordBreak = 'keep-all';

})

'완성한 코드' 카테고리의 다른 글

영화 팀 프로젝트 리뷰 파트  (0) 2024.08.13
영화 카드 리스트 js파일*2  (0) 2024.07.26
자기소개 페이지 메인 프레임(내 파트만)  (0) 2024.07.17
한식 메뉴 렌더링  (0) 2024.07.08
숫자 기억 게임  (0) 2024.07.08

'완성한 코드'의 다른글

  • 현재글To Do List(본 페이지/간단하게)

관련글

티스토리툴바