const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const listEl = document.querySelector('ul');
function addGoal(){
const enteredValue = inputEl.value;
const listItemEl = document.createElement('li');
listItemEl.textContent = enteredValue;
listEl.appendChild(listItemEl);
inputEl.value = '';
}
buttonEl.addEventListener('click', addGoal);
// const buttonEl = document.querySelector('button');
// HTML 문서에서 첫 번째 <button> 요소를 선택하고, 이를 buttonEl 변수에 저장합니다.
// const inputEl = document.querySelector('input');
// HTML 문서에서 첫 번째 <input> 요소를 선택하고, 이를 inputEl 변수에 저장합니다.
// const listEl = document.querySelector('ul');
// HTML 문서에서 첫 번째 <ul> (unordered list) 요소를 선택하고, 이를 listEl 변수에 저장합니다.
// function addGoal(){
// 새로운 리스트 항목을 추가하는 기능을 수행할 addGoal 함수를 정의합니다.
// const enteredValue = inputEl.value;
// inputEl 요소 (입력 상자)에 사용자가 입력한 값을 가져와 enteredValue 변수에 저장합니다.
// const listItemEl = document.createElement('li');
// 새로운 리스트 항목 (<li>) 요소를 생성하고, 이를 listItemEl 변수에 저장합니다.
// listItemEl.textContent = enteredValue;
// 생성된 <li> 요소의 텍스트 내용을 사용자가 입력한 값 (enteredValue)로 설정합니다.
// listEl.appendChild(listItemEl);
// 새로운 리스트 항목 (<li>)을 리스트 (<ul>)에 추가합니다.
// inputEl.value = '';
// 입력 상자의 내용을 빈 문자열로 설정하여 사용자가 입력한 내용을 초기화합니다.
// buttonEl.addEventListener('click', addGoal);
// 버튼 요소 (buttonEl)에 클릭 이벤트 리스너를 추가합니다. 버튼이 클릭되면 addGoal 함수가 호출됩니다.==========================================
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A First App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<div>
<label for="goal">Goal</label>
<input type="text" id="goal" />
<button>Add Goal</button>
</div>
<ul>
<li>Test</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>================================================
css
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
#app {
margin: 3rem auto;
max-width: 40rem;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
label, input {
margin-bottom: 0.5rem;
display: block;
width: 100%;
}
label {
font-weight: bold;
}
ul {
list-style: none;
margin: 1rem 0;
padding: 0;
}
li {
margin: 1rem 0;
padding: 1rem;
border: 1px solid #ccc;
}
=====================================================
vue를 쓸 경우
Vue.createApp({
data() {
return {
goals: [],
enteredValue:''
};
},
methods: {
addGoal() {
this.goals.push(this.enteredValue);
this.enteredValue = '';
}
}
}).mount('#app');
// const buttonEl = document.querySelector('button');
// const inputEl = document.querySelector('input');
// const listEl = document.querySelector('ul');
// function addGoal() {
// const enteredValue = inputEl.value;
// const listItemEl = document.createElement('li');
// listItemEl.textContent = enteredValue;
// listEl.appendChild(listItemEl);
// inputEl.value = '';
// }
// buttonEl.addEventListener('click', addGoal);===============================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A First App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<div>
<label for="goal">Goal</label>
<input type="text" id="goal" v-model="enteredValue" />
<button v-on:click="addGoal">Add Goal</button>
</div>
<ul>
<li v-for="goal in goals">{{ goal }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>
안녕하세요. 배운 것을 메모하는 velog입니다.