본문 바로가기
Code

3.22 - To do list(Code)

유명_h 2021. 3. 22. 17:12

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>Document</title>
    <link rel ="stylesheet" href = "./todolist.css">
</head>
<body>
    <div id ="wrap">
        <div id="header">
            <div id ="title">
                <h2>To do list</h2>
            </div>
            <div id = "search">
                <input type="text" id="card_input" placeholder="todo" value="" class="search_box" onclick="">
                <input type="button" value="+" class="add_btn" onclick="btnEvent()" >
            </div>
        </div>
        <ul class="list">
            <li>sample1</li>
            <li>sample2</li>
            <li>sample3</li>
        </ul>
        <div id="nightmode">
            <input class="night_mode mode" type="button" value="🌙" onclick="nightshift();">
            <input class="day_mode mode" type="button" value="🌞" onclick="dayshift();">
        </div>
    </div>

</body>
</html>

 

CSS

 

*{
    margin: 0; padding: 0;
}

ul,li{
    list-style: none;
}

#wrap{
    width:100%;
    position: relative;
}

html{
    overflow-x: hidden;
    overflow-y: auto;
}

a{
    text-decoration: none;
    color: #939597;
}

#header{
    width: 100%;
    height: 190px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
}

#title > h2{
    margin: 0 auto;
    color: #f5df4d;
    text-align: center;
}

#search{
    width: 340px;
    margin: 80px auto 0 auto; 
    box-sizing: border-box;
}

.search_box{
    display: inline-block;
    width: 300px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #939597;
    padding: 10px;
    box-sizing: border-box;
    float: left;
}

.add_btn{
    display: inline-block;
    border: 1px solid #939597;
    width: 40px;
    height: 30px;
    background: white;
    border-radius: 5px;
    line-height: 25px;
    color: #939597;
    box-sizing: border-box;
}

.list{
    margin: 0 auto;
    text-align: center;
}

.list > li{
    padding: 10px;
    color: #939597;
}

#nightmode{
    width: 20px;
    position: fixed;
    z-index: 1;
    right: 10px;
}

.mode{
    background: #fff;
    border: none;
}

.day_mode{
    display: block;
}

.night_mode{
    display: block;
}

 

HTML아래에 SCRIPT

    <script type="text/javascript">

    function btnEvent(){
        card_text /*object >> elem에 input 한줄을 담은 것*/ = document.querySelector('#card_input');
        console.log(card_text.value); /*elem = card_text에 value를 가져와라*/
        cardList = document.querySelector('.list');
        /*start*/
        liElement = document.createElement('li'); /*element<li>를 create(생성)해달라*/
        liElement.innerHTML = card_text.value;
        cardList.appendChild/*맨아랫줄에 새로운 글자(liElement를 넣어라)*/(liElement);
        /*end*/
    }
    


        function nightshift(){
            elem = document.querySelector('body'); 
            elem.style.background = '#000'; 
            elem.style.color = '#fff';

            elem = document.querySelector('#header');
            elem.style.background = '#000';

            elem = document.querySelector('.night_mode');
            elem.style.background = '#000';

            elem = document.querySelector('.day_mode');
            elem.style.background = '#000';
        }

        
        function dayshift(){

            elem = document.querySelector('body'); 
            elem.style.background = '#fff'; 
            elem.style.color = '#000';

            elem = document.querySelector('#header');
            elem.style.background = '#fff';

            elem = document.querySelector('.night_mode');
            elem.style.background = '#fff';

            elem = document.querySelector('.day_mode');
            elem.style.background = '#fff';
        }

    </script>

 

night mode버튼 누르면 이렇게

저작자표시

'Code' 카테고리의 다른 글

CODE  (0) 2021.03.24
3.23 - Delete Btn(Code)  (0) 2021.03.23
3.20  (0) 2021.03.22
3.18 - 프로그래머스  (0) 2021.03.18
3.17 - Wed / footer  (0) 2021.03.17

'Code' Related Articles

티스토리툴바