Name
date
Folder Path
study:\\[Web] 로컬 환경에 저장되는 투두리스트 페이지 만들기

오늘 할 일을 추가하거나 지우고,

이 모든 내용을 로컬 환경에 저장할 수 있는

투두리스트 페이지를 만들어보자

 

1. 틀 제작

<html>
<head>
    <link rel="stylesheet" href="mystyle.css">    
</head>

<body>
    <h2>To-Do</h2>

    <div class="div_text">
        <button class= "w-btn" onclick="save_tododo()">Save</button>

        <input id="task" placeholder="Task">
        <input id="priority" placeholder="우선순위">

        <button class="w-btn" onclick="add_row()">Add</button>  
        <button class="w-btn" onclick="del_row()">Del</button>     

        <br><br>

        <div class="table-container">
            <table id = "tb1">
                <tr> 
                    <th>Task</th> 
                    <th>우선순위</th>
                </tr>
            </table>
         </div>
     </div>

</body>
</html>

 

  • stylesheet에는 따로 제작한 CSS 파일이 들어있다
  • <h2> To-Do </h2> 헤드 맨 위에 만들어주기
  • 좌측 Save 버튼, 가운데 input 2개 (Task, 우선순위)
  • 우측 Add, Del 버튼 
  • table input에 맞게 만들어줌

 

다음으로 할 일

1. input(Task, 우선순위)에 내용 입력 후 Add 클릭하면 테이블에 입력되는 기능 구현하기

2. 이어서 Del 클릭하면 테이블 내용 지워지는 기능 구현하기

3. Save 클릭시 현재 테이블에 입력된 내용 로컬 환경에 저장하기

 * 새로고침해도 이전 내용 남아있도록

 

이제 javascript 코드를 활용해보자

 

2. 기능 구현

<script>
    
    var tododo = [];
    var t, pr;
    
    function add_row() {
        t = document.getElementById("task").value;
        pr = document.getElementById("priority").value;
        a = { task: t, priority: pr };
        tododo.push(a);
        display_tododo();
    }
    
     
    function del_row() {
        tododo.pop();
        display_tododo();
    }   
    
    function display_tododo() {
        document.getElementById("tb1").innerHTML = "<tr> <th>Task</th> <th>우선순위</th> </tr>";
        
        for(var i = 0; i < tododo.length; i++) {
            document.getElementById("tb1").insertAdjacentHTML('beforeend', "<tr> <td>" + tododo[i].task + "</td> <td>" + tododo[i].priority + "</td></tr>");
        }
    }
        
    
    </script>
  • var: 변수 선언하자
    • tododo 할일 목록 담는 부분
    • t, pr은 task와 우선순위를 저장하는 부분
  • function: 함수 선언하자
    • add_row(): html 입력필드에서 t, pr 내용을 읽어온 후 -> 그 값을 a라는 객체로 만들어서 tododo 배열에 추가
    • del_row(): tododo 배열에 있는 내용 하나씩 제거함 (최근순)
    • display_tododo: tododo 배열에 있는 모든 내용들 화면에 출력하는 디스플레이 부분임 Loop를 사용했음
    function save_tododo() {
        localStorage.setItem("todobook", JSON.stringify(tododo));
    }    
 
    function load_tododo() {
        var t = localStorage.getItem("todobook");
        if(t == null) {
            tododo = [ ]; 
        } else {
            tododo = JSON.parse(t);
        }
        display_tododo();
    }
    
    window.addEventListener("load", load_tododo);
  • Save: tododo 배열을 json 문자열로 변환하고, localStorage에 todobook이라는 키로 저장함
    • JSON <-> JavaScript 객체 상호 변환
  • load: local 환경서 todobook에 저장된거 불러옴
    • 저장 안되어 있으면 빈 배열로 초기화
    • 이전에 저장해놓았다면 json문자열을 javascript 객체로 변환후 tododo 배열에 불러옴
  • window.addEventListener: 이 구문은 웹페이지가 로드될 때 이 함수 자동으로 실행하도록 설정함

 

이제 여기까지 했으면 사실상 중요한 기능은 다 구현했다

css 활용해서 디자인하면 되는데

다 리뷰하면 길어지니 몇가지만

 

3. CSS

.w-btn {
    position: relative;
    border: none;
    display: inline-block;
    border-radius: 15px;
    font-family: sans-serif;
    box-shadow: 0px 0px 6px #ffffff;
    font-weight: 600;
    transition: 0.25s;
    background-color: #ffffff;
    color: gray;
    padding: 5px 15px;
}

.w-btn:hover {
    letter-spacing: 1px;
    transform: scale(1.1);
    cursor: pointer;
}

.w-btn:active {
    transform: scale(1.5);
}

  • w-btn ... 하얀색 버튼이다 이건 다른 사이트에서 많이 참고한 코드인데, 마우스 호버 액션이 있음

 

그 외 테이블을 그레이톤 + 세리프 글씨체로 한 거 등등 있다 

완성~

'study' 카테고리의 다른 글

스팀 게임 빌드 메모  (0) 2024.01.28
Comment

티스토리툴바