dukDukz

2021.03.22 To do list 본문

웹 개발/JAVASCRIPT

2021.03.22 To do list

헤일리_HJ 2021. 3. 22. 14:51

html 작성..

 

input tag들 가운데 정렬 : text-align center

 

 

to_do_list.html

<!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>To do list</title>

    <style>
        html {
            overflow-x: hidden;
            overflow-y: auto;
        }

        #wrap {
            width: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        a{
            text-decoration: none;
        }

        ul,li {
            list-style: none;
        }

        #header {
            width: 100%;
            height: 200px;
            margin: 0 auto;
            background: #666;
            color: white;
        }

        #header>h2 {
            text-align: center;
            padding-top: 20px;
        }

        #header>#input {
            margin: 30px auto 0 auto;
            width: 800px;
            text-align: center;     /*input 태그 가운데 정렬*/
        }

        .i_text {
            height: 30px;
            border: gray;
            border-radius: 5px;
            padding: 7px 14px;
            width: 280px;
        }

        .i_button {
            width: 40px;
            height: 40px;
        }

        #content {
            margin-top: 20px;
        }

        .cardList>li {
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <h2>to do list</h2>

            <div id="input">
                <input type="text" id="card_input" value="글자어쩌구" class="i_text">
                <input type="button" value="+" class="i_button" onclick="btnEvent();">
            </div>
        </div>

        <div id="content">
            <ul class="cardList">
                <li>sample1</li>
                <li>sample2</li>
                <li>sample3</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
    function btnEvent(){
        card_text = document.querySelector('#card_input'); //객체 전체를 담은것
        console.log(card_text.value);                       // 글자어쩌구
        cardList = document.querySelector('.cardList');     // ul, li html전체를 가져와서 넣는다.

        /*start*/
        liElement = document.createElement('li');       // li 요소를 생성한다
        console.log(liElement);                         // 위에서 생성한 <li></li> 가 나옴
        
        liElement.innerHTML = card_text.value;          //innerHTML 옆에 있는 값으로 대체됨
        cardList.appendChild(liElement);    //해당 요소의 맨 마지막줄에 js로 만든 값을 넣는다
        /*end*/
    }


 
    </script>
</body>

</html>

 

1.  새로운 입력값 받아오기

card_text = document.querySelector('#card_input');

car_text에

<input type="text" id="card_input" value="초기벨류" class="i_text">

이거 전체를 담은것

 

입력창에 입력되는 값을 받아옴

 

2.  전체 리스트 받아오기

cardList = document.querySelector('.cardList');

cardList 에

<ul class="cardList">

                <li>sample1</li>

                <li>sample2</li>

                <li>sample3</li>

            </ul>

이거 전체를 담은것

 

추후에 출력할 값을 넣을 리스트를 받아옴

 

3. 새로운 li 생성하기

liElement = document.createElement('li');

새로운 li 요소를 생성한다는 문법

 

4. 입력된 값을 새로운 li에 넣기

liElement.innerHTML = card_text.value; 

innerHTML 옆에 있는 값이 liElement 에 입력된다 혹은 대체된다.

그런데 liElement 니까 새로운  li 요소 안에 입력이 된다는것

 

 

입력창에 적힌 값을 새로 생성된 li안에 넣어주겠다.

 

5. 전체 리스트의 맨 아래에 새로운 값들을 넣어주기

cardList.appendChild(liElement);

해당 요소의 맨 마지막줄에 js로 만든 값을 넣는다

 

전체 리스트의 마지막 부분에 liElement(= 입력값이 적힌 새로운 li)를 넣어주겠다.

'웹 개발 > JAVASCRIPT' 카테고리의 다른 글

2021.03.25 경일 배너 만들기 (애니메이션)  (0) 2021.03.25
2021.03.25 JS Document. 의 활용  (0) 2021.03.25
2021.03.24 JS에 대해  (0) 2021.03.24
2021.03.23 사진 슬라이드 _ js  (2) 2021.03.23
To do list_ Array 배열 없이 요소 삭제하기  (4) 2021.03.23
'웹 개발/JAVASCRIPT' Related Articles more