정구리의 우주정복

[Javascript] to-do list 만들기 본문

STUDY/K-DIGITAL

[Javascript] to-do list 만들기

Jungry_ 2022. 9. 4. 22:43
반응형

<!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">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <title>Document</title>

    <style>
        body{
            margin: 0;
        }

        .container{
            border: 1px solid #000;
            min-height: 100vh;
        }
        .task-area{
            border: 1px solid #eee;
        }
        .task-tabs{
            border: 1px solid #eee;
            display: flex;
        }
        .task-tabs div{
            padding : 1em;
        }

        .task{
            display: flex;
            justify-content: space-between;
            padding:1em;
        }

        .task-done {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Todo List</h1>

        <div class="input-area">
            <input type="text" id="task-input">
            <button id="add-button">+</button>
        </div>

        <section class="task-area">
            <div class="task-tabs">
                <div>전체</div>
                <div>진행중</div>
                <div>완료</div>
            </div>

            <div id="task-board">
                <!-- <div class="task">
                <div>공부하기</div>
                <div>
                    <button>Check</button>
                    <button>Delete</button>
                </div>
                </div> -->
            </div>
        </section>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
    <script src="./quiz02_answer.js"></script>
    </div>
</body>
</html>

CSS 에서 간단하게 적어보자면 bootstrap 을 적용하면 float 가 적용이 안된다고 한다 ㅜㅜ 이것도 모르고 계속 float:right로 버튼 오른쪽으로 옮기려 하다가 주먹으로 부숴버릴뻔 ㅜㅜ 그래서 display:flex 해서 justify-content:space-between 해가지고 오른쪽에 붙여줬다 (양쪽 끝에 붙는 성질임)

 

let taskInput = document.getElementById('task-input');
let addButton = document.getElementById('add-button');
let taskList = [];


addButton.addEventListener('click',addTask);

function addTask(){
    let task = {
        taskContent :taskInput.value,
        isComplete:false,
        id:randomIDGenerate()
    };
    
    taskList.push(task);
    console.log(taskList);

    render();
}

function render(){ //화면에 뿌려주는 애 
    let resultHTML = '';
    for(let i=0; i<taskList.length; i++){
        if(taskList[i].isComplete == true){
            resultHTML += 
            `<div class="task">
             <div class='task-done'>${taskList[i].taskContent}</div>
            <div>
            <button onclick="toggleComplete('${taskList[i].id}')">Check</button>
            <button onclick="deleteTask('${taskList[i].id}')">Delete</button>
            </div>
        </div>`;
        }else{
            resultHTML += `<div class="task">
        <div>${taskList[i].taskContent}</div>
        <div>
            <button onclick="toggleComplete('${taskList[i].id}')">Check</button>
            <button onclick="deleteTask('${taskList[i].id}')">Delete</button>
        </div>
        </div>`;
        }
        
    }

    document.getElementById('task-board').innerHTML = resultHTML;
}


function randomIDGenerate(){ //랜덤한 아이디 생성
    return Math.floor((1 + Math.random()) * 0x10000)
    .toString(16)
    .substring(1);

}
function toggleComplete(id){
    console.log(id);
    for(let i=0; i<taskList.length; i++){
        if(taskList[i].id == id){//만약 아이디가 같으면은
            console.log('work');
            taskList[i].isComplete =! taskList[i].isComplete;
            break;

        }
    }
    render();
}

function deleteTask(id){
    console.log("work",id);
    for(let i=0; i<taskList.length; i++){
        if(taskList[i].id == id){
            taskList.splice(i,1); //인덱스 하나를 없애준다 (이거뭐임 ???? 찾아보기)
            break;
        }
    }
    render();
}

위에 어떤 변수들이 있는지 잘 확인해보고 

addButton 에는 eventListener 을 추가해줬다 

 

function rander() 부터 살펴보자 

얘는 화면에 뿌려주는 기능을 하는 친구임 !!!

 

동작은 taskList 의 길이만큼 할거임 

만약 taskList 안의 isComplete 가 true 라면 (만약 모든것을 끝낸 상황) 

task-done 클래스를 부여한 html 을 뿌려주고 (line-through 가 적용된 css 임) 

그렇지 않다면 그냥 뿌려준다 

 

 

function addTask() 는 새로운 todo 추가해주는 친구다 

let task = {  객체 안에는

taskContent : taskInput.value   => 할 일

isComlete : false => 이 일이 완수된 일인지 ???

id.randomIdGenerate => 랜덤한 아이디 값

}

 

이렇게 들어있다 

그리고 전체 내용이 들어가는 taskList 에 이런 내용들을 추가해주고 (push) 

 

render() 를 사용해서 화면에 뿌려주도록 하자 

 

 

function toggleComplete(id){}

는 id 를 이용해서 해당일을 완수했는지 확인해주는 소스이다

for 문을 통해 taskList 를 돌다가 만약 같은 아이디를 발견한다면 => 내가 선택한 애라면 

isComplete 를 바꿔주고 render 해준다

 

 

function deleteTask(id) 도 toggleComplete 와 비슷한 원리인데

이번에는 id가 같으면 splice 를 해준다 그럼 taskList 에서 제거된다 

이후 render 해주면 뚝딱쓴

 

 

중간에 randomIdGenerate 는 구글에 검색해서 긁어온거라 여러분도 그냥 긁어다 쓰세요 ~

반응형

'STUDY > K-DIGITAL' 카테고리의 다른 글

[Java] 상속 , override 정복하기  (1) 2022.09.05
[Javascript] mouse hover 시 글씨 나오게 하기 !!  (0) 2022.09.04
[Javascript] 버튼 클릭 시 글자 색 변하게 하기  (0) 2022.09.04
[Javascript] button onclick 사용하기  (0) 2022.09.04
[JavaScript] Javascript 로 todo 의 input 구현 html 에 요소 추가  (0) 2022.09.04
'STUDY/K-DIGITAL' Related Articles more
Comments