[7일차]20210323 to do list 삭제

아침 : 어제꺼 복습 + 새로운 거 todo list 삭제버튼

오후 : 복습 + 새로운거 settimeout interval

googld 공유폴더에 쌤, 승원님꺼 답 참고

<!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>안보고JS치기</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        #wrap{
            width:100%;
        }
        #header{
            width:100%;
            height:300px;
            background:palevioletred;
            padding:50px;
            box-sizing: border-box;            

        }
        #header_top{
            text-align: center;
            padding:30px;
            font-size:20px;
            color:white;
        }

        #header_bottom{
            text-align: center;
            
        }

        #textbox{
            width:300px;
            height:30px;
            border-radius: 10px;
            border:1px solid palevioletred;
            text-align: center;
            color:grey;
            
        }

        #btn{
            text-align: center;
            width:30px;
            height:30px;
            border:1px solid palevioletred;
            border-radius: 20px;
            cursor:pointer;
        }
        
        #bottom{
            text-align: center;
            line-height: 40px;
            margin-top:30px;
           
        }
        
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id ="header_top">
                <h1>To do list</h1>
            </div>
            <div id="header_bottom">
                <input text id="textbox" value="think!"
                onkeyup="if(window.event.keyCode==13){add()}"/>
                <input button id="btn" value="+" onclick="add();">
            </div>

        </div>
        <div id="bottom">
            <ul id="content">
                <li>reading books</li>
                <li>jogging</li>
                <li>being happy</li>
            </ul>
        </div>    
    </div>
    <script> 
    function add(){
        txbx=document.querySelector('#textbox');
        list=document.querySelector('#content');
        ele=document.createElement('li');
        ele.innerHTML=txbx.value;
        list.appendChild(ele);
    }
    
    </script>
</body>
</html>

오늘 아침 자 혼자 만들어본기

엔터치면 입력되게 햇당ㅇㅇ

Array 배열

<!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>
    <script>
        arr=[];

        arr.push(1);
        arr.push(1);
        arr.push(1);
        arr.push(1);
        arr.push(1);

        console.log(arr);


    </script>



</head>
<body>
    
</body>
</html>

배열.................................[]를 씀

변수선언 너무 많이 해야할 때 -> 배열을 씀

변수를 한번에 묶어서 사용하고 싶을 때 ~

배열안에서의 length 속성값 : 변수의 갯수를 셈 = 총 개수

변수 [0,1,2,3,4,5] 이렇게 첫째자리는 0~~

, 콤마로 구분함.

a=['kim', 'park']

변수 추가 방법은

a.push(' ')

변수 총 개수는

console.log(a.length);

변수 호출

console.log(a[2]);

배열은 괴~~~~~~~~~~~앵~~~~~~~~~장~~~~~~~~~~~~~~히 중요.

코드를 더욱 간결하게 해쥼.

<!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>안보고JS치기</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        #wrap{
            width:100%;
        }
        #header{
            width:100%;
            height:300px;
            background:palevioletred;
            padding:50px;
            box-sizing: border-box;            

        }
        #header_top{
            text-align: center;
            padding:30px;
            font-size:20px;
            color:white;
        }

        #header_bottom{
            text-align: center;
            
        }

        #card_input{
            width:300px;
            height:30px;
            border-radius: 10px;
            border:1px solid palevioletred;
            text-align: center;
            color:grey;
            
        }

        #cardBtn{
            text-align: center;
            width:30px;
            height:30px;
            border:1px solid palevioletred;
            border-radius: 20px;
            cursor:pointer;
        }
        
        #bottom{
            text-align: center;
            line-height: 40px;
            margin-top:30px;
           
        }
        
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id ="header_top">
                <h1>To do list</h1>
            </div>
            <div id="header_bottom">
                <input text id="card_input" value="think!"
                onkeyup="if(window.event.keyCode==13){add()}"/>
                <input type="button" id="cardBtn" value="+" onclick="add();" >
            </div>
        </div>
        <div id="bottom">
            <ul id="card_list">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>    
    </div>
    <script>
        const btnArr=[];

        

        function add(){
            const newId=btnArr.length;  /*배열안에 변수의 총 개수 */

            cardInput=document.querySelector('#card_input');
            //inputbox 아이디값을 받아서 변수에 담음. 
            cardList=document.querySelector('#card_list');
            //내용 출력하는 영역 설정
            li=document.createElement('li');
            //작업물 내용을 출력할 최초 단위 element 
            li.innerHTML=cardInput.value;
            //li안에 내용을 넣기 위해 / 내용 -> cardInput에 있는 value를..

            delBtn=document.createElement('button');
            //(삭제를위한) li안에 버튼을 넣기 위해 element만 생성. 아직 안넣음.
            delBtn.innerHTML='x';   /*<button>X</button>이런 객체로 가지고있음 우리는 아이디값 추가하고싶음 ex. id="btn1"요렇게 */
            //버튼 안에 내용을 넣기 위해
            delBtn.setAttribute('id',newId);  /* 역할 : 속성값을 만들어 줄 수 있다. 첫번째 값 - 속성 두번째 값 - 숫자*/
            //id를 부여하기 위해, 속성값을 부여하기 위해 <button id=[newId]">x</button>"
            delBtn.onclick=function(){
                cardList.removeChild(this.parentNode);
                //cardList=내용을 출력한 영역 설정 부분 
                //removeChild = method(함수) . 내가 클린 버튼의 부모를 찾아서 지워라~
                //thins.parentNod = parentNod : 나의 상위 (현재) element. 나의 부모 element. (f12로 가봐 여기서는 li를 뜻함. )
                //나의 부모 elemnet를 cardList에서 지우겟다~  

            }
            /*예전 event 기본적인 방법 (위) 요 모양의 버튼을 클릭했을 때 안에 있는 내용을 실행 한다능~ */


            li.appendChild(delBtn);  /* <li><button id ="1">X</button></li> 요렇게 만든거 */ 
            //li element 안에 여태 만들었던 delBtn 을 넣는다.
            //<li>[cardInput.value]</li>
            cardList.appendChild(li);
            //cardList 안에 li를 넣어서 완벽하게 만든다.             
            btnArr.push(cardInput.value);/*값 하나를 넣겠다. */
            //배열에 cardInput.value를 넣는다. 
        }
        

        /*
        버튼 어떻게 꾸미는지? 

        각 버튼에 id를 부여한거임 
        onclick- JS 

        textbox 자동 지우기 해보기 ! 
        */
    

    </script>
</body>
</html>

오전 11:30 까지 배운 내용 !

어렵다,,

const는 뭐징????????????constant

위에 정리한것

<!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>안보고JS치기</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        #wrap{
            width:100%;
        }
        #header{
            width:100%;
            height:300px;
            background:palevioletred;
            padding:50px;
            box-sizing: border-box;            

        }
        #header_top{
            text-align: center;
            padding:30px;
            font-size:20px;
            color:white;
        }

        #header_bottom{
            text-align: center;
            
        }

        #card_input{
            width:300px;
            height:30px;
            border-radius: 10px;
            border:1px solid palevioletred;
            text-align: center;
            color:grey;
        }
        #cardBtn{
            text-align: center;
            width:30px;
            height:30px;
            border:1px solid palevioletred;
            border-radius: 20px;
            cursor:pointer;
        }
        #bottom{
            text-align: center;
            line-height: 40px;
            margin-top:30px;
        }

        .newId2{
            width:18px;
            height:18px;
            background-color: darkcyan;
            border:1px solid darkcyan;
            border-radius: 10px;
            line-height:5px;
            margin-left:10px;
            text-align: center;
        }


    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id ="header_top">
                <h1>To do list</h1>
            </div>
            <div id="header_bottom">
                <input text id="card_input" value="think!"
                onkeyup="if(window.event.keyCode==13){add()}"/>
                <input type="button" id="cardBtn" value="+" onclick="add();" >
            </div>
        </div>
        <div id="bottom">
            <ul id="card_list">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>    
    </div>
    <script>
        const btnArr=[];
            function add(){
                const newId=btnArr.length;

                cardInput=document.querySelector('#card_input');
                cardList=document.querySelector('#card_list');
                li=document.createElement('li');
                li.innerHTML=cardInput.value;
                cardList.appendChild(li);

                delBtn=document.createElement('button')
                delBtn.innerHTML='x';
                delBtn.setAttribute('id', newId);
                delBtn.setAttribute('class', 'newId2');

                li.appendChild(delBtn);

                delBtn.onclick=function(){
                    cardList.removeChild(this.parentNode);
                }

                btnArr.push(cardInput.value);
            }

    </script>
</body>
</html>

오늘 오전수업까지 완성한 거 !

delbtn의 모양도 바꿔봣다

    <script>
        
            function add(){

            cardInput=document.querySelector('#card_input');
            cardList=document.querySelector('#card_list');
            li=document.createElement('li');
            li.innerHTML=cardInput.value;
            cardList.appendChild(li);

            delBtn=document.createElement('button');
            delBtn.innerHTML="+";
            delBtn.setAttribute('class', 'listbtn');

            li.appendChild(delBtn);

            delBtn.onclick=function(){
                cardList.removeChild(this.parentNode);
            }
            }       

    </script>

위의 배열 관련된거 쭉 빼면 이렇게 됨. (피룡없는거 뺌)

근데 배열로 이거를 만들 수 있쓸까,,?

======================오후 새로운 set time something=======================

<!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>



</head>
<body>
    <div id="root">



    </div>
    


    <script type ="text/javascript">
        date = new Date();  
        time = date.toLocaleTimeString();
        document.querySelector('#root').innerHTML=time;
//time이라는 변수 안에 있는 내용을 root에 넣고 싶음. 
    
    </script>
</body>
</html>

시계 나오는 기본

1초마다 돌리는 함수 :

    <script type ="text/javascript">
    function myTimer(){
        date = new Date();  
        time = date.toLocaleTimeString();
        document.querySelector('#root').innerHTML=time;
//time이라는 변수 안에 있는 내용을 root에 넣고 싶음. 


    }

    setInterval(myTimer, 1000); //1초는 1000



    </script>

요렇게 하면 됨

직접 만들어보기 !

css ul,li를 inline으로 만들기 그럼 옆으로 붙겟지?

overflow:hidden -> 3개를 감싼 div에

오늘 한거 짝꿍

<!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>
        ul,li{
            list-style: none;
            display:block;
        }
        p{
            display:block;
        }
    </style>

</head>
<body>
    <div id="root">
        <ul id ="list">
            <li id="fir"><p id="one">Hello</p></li>
            <li id="sec"><p id="two">there</p></li>
            <li id="thi"><p id="three">how are you</p></li>
        </ul>

    </div>

    <script type ="text/javascript">

        list=document.querySelector('#list');
        fir=document.querySelector('#fir');
        sec=document.querySelector('#sec');
        thi=document.querySelector('#thi');

        one=document.querySelector('#one');
        two=document.querySelector('#two');
        three=document.querySelector('#three');

      /*  list.appendChild(fir);
        list.appendChild(sec);
        list.appendChild(thi); */

        function a(){
            if (fir=one){
                list.appendChild(fir);
            }
        }

        function b(){
            if(sec=two){
                list.appendChild(sec);
            }
        }

        function c(){
            if(thi=three){
                list.appendChild(thi);
            }
        }

    /*function myTimer(){
        date = new Date();  
        time = date.toLocaleTimeString();
        document.querySelector('#root').innerHTML=time;
    }
*/


        setInterval(a, 1000); //1초는 1000
        setInterval(b, 2000);
        setInterval(c, 3000);

    




    </script>
</body>
</html>

ul, li 3개가 자동으로 바뀌는거 햇는데 실 ~ 패 ~

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[8일차]20210324 object, 함수 method 직접 찾아 적용하기 (0)	2021.03.24
[7일차 연습] to do list & moving clock (0)	2021.03.24
6일차 공부한 내용 정리 및 복습 -JS 조건문, 반복문, 변수, boolean, 색변경 등등 (0)	2021.03.22
[7일차]20210322 JavaScript 기초 / 조건문/반복문/제어문/등등.. (0)	2021.03.22
20210320 Javascript 기초 예습 (0)	2021.03.21

GOOD DAY

[7일차]20210323 to do list 삭제

Array 배열

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

티스토리툴바

[7일차]20210323 to do list 삭제

Array 배열

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바