정구리의 우주정복

[JavaScript] Javascript 로 todo 의 input 구현 html 에 요소 추가 본문

STUDY/K-DIGITAL

[JavaScript] Javascript 로 todo 의 input 구현 html 에 요소 추가

Jungry_ 2022. 9. 4. 21:48
반응형

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>오늘 할 일</title>
    <link rel="stylesheet" href="./quiz01.css">
</head>

<style>
    .line {
        text-decoration: line-through;}
</style>
<body>
    <div class="main">
        <h2 class="title">오늘 할 일</h2>
        <ul id="to-do-list"> 
        </ul>
    </div>
    <script src="./quiz01.js"></script>
</body>
</html>

html 에는 크게 뭔가 없다 왜냐면 js 에서 추가해 줄것이기 때문이다 

 

const ul = document.querySelector('#to-do-list');


function insert(ul,value){
    const input_value = document.createElement('li');
    input_value.setAttribute('class','li-tag');
    input_value.textContent = value;
    ul.append(input_value);
}

insert(ul,'고양이 밥주기');
insert(ul,'정구리 밥주기');
insert(ul,'치킨 포장해오기');
insert(ul,'밥 야무지게 먹기');

to-do-list (ul 태그) 를 ul 에 불러온다 

 

function insert를 봐보자 !

createElement 로 li 태그를 하나 생성해준다 

그리고 setAttribute 를 사용해서 아까 만든 li 태그에 /  class 태그를 생성 , li-tag 라는 값을 넣어주자

li 태그에 contant 로 입력받은 값을 넣어준다 

ul 에 li 를 넣어 새로운 요소를 생성해준다 

 

이렇게 하면 html 에 새로운 요소 추가가 가능하다 

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    width: 350px;
    margin: 40px;
    padding: 30px 0;
    background-color: #fcfcfc;
    box-shadow: 5px 5px 20px #BABECC;
    border-radius: 8px;
    text-align: center;
}
.title {
    margin: 15px auto;
    font-size: 30px;
    font-weight: 600;
    color: #9600ff;
}
#to-do-list {
    width: 280px;
    margin: 0 auto 15px;
    padding: 0;
    list-style: none;
}
#to-do-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 40px;
    margin: 8px auto 15px;
    border-bottom: 1px solid #9600ff;
}

css 인디 별로 중요하지 않으니 넘어가버리기 ~

반응형

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

[Javascript] 버튼 클릭 시 글자 색 변하게 하기  (0) 2022.09.04
[Javascript] button onclick 사용하기  (0) 2022.09.04
[HTML/CSS] 네이버 회원가입 폼 만들기  (0) 2022.08.29
[HTML/CSS] float 정복하기  (0) 2022.08.28
[HTML/CSS] 로그인폼 만들기 , fontawesome 사용해보기  (0) 2022.08.27
'STUDY/K-DIGITAL' Related Articles more
Comments