반응형
오늘 꼭 해야할 일!
본인이 작성한 <ul id="to-do-list"></ul> 태그 안에 li 태그로 오늘 할 일들을 추가하고 싶어합니다.
- li 태그이름을 가진 요소 노드를 만든 다음
- 그 요소 노드에 파라미터로 전달받은 오늘 할 일(text)을 담고
- <ul id="to-do-list"></ul>태그의 마지막 자식 요소 노드로 추가하는
addNewTodo함수를 완성해 주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오늘 할 일</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h2 class="title">오늘 할 일</h2>
<ul id="to-do-list"></ul>
</div>
<script src="index.js"></script>
</body>
</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 #FFFFFF, 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;
}const toDoList = document.querySelector('#to-do-list');
function addNewTodo(text) {
const li = document.createElement("li");
li.textContent = text;
toDoList.append(li);
}
// 테스트 코드
addNewTodo('Javascript 공부하기');
addNewTodo('jQuery 공부하기');
addNewTodo('JSP 공부하기');본 내용은 Codeit의 'Javascript 중급' 강의를
참고하여 작성한 내용입니다.
반응형
'Languages > JS' 카테고리의 다른 글
| [인터랙티브 Javascript] 03. 이벤트 살펴보기 (0) | 2021.02.19 |
|---|---|
| [인터랙티브 Javascript] 03. 이벤트 살펴보기 (0) | 2021.02.19 |
| [인터랙티브 Javascript] 01. 인터랙티브 자바스크립트 시작하기 (0) | 2021.02.17 |
| [프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기 (0) | 2021.02.16 |
| [프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기 (0) | 2021.02.16 |