learning-area/javascript/apis/document-manipulation/shopping-list-finished.html at main · mdn/learning-area · GitHub

Name: learning-area/javascript/apis/document-manipulation/shopping-list-finished.html at main · mdn/learning-area · GitHub
Rating: 4.4 (4287 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<htmllang="en-US">
<head>
<metacharset="utf-8">
<metaname="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping list example</title>
<style>
li {
margin-bottom:10px;
 }

libutton {
font-size:12px;
margin-left:20px;
color:#666;
 }
</style>
</head>
<body>

<h1>My shopping list</h1>

<div>
<labelfor="item">Enter a new item:</label>
<inputtype="text" name="item" id="item">
<button>Add item</button>
</div>

<ul>

</ul>

<script>
constlist=document.querySelector('ul');
constinput=document.querySelector('input');
constbutton=document.querySelector('button');

button.addEventListener('click',()=>{
constmyItem=input.value;
input.value='';

constlistItem=document.createElement('li');
constlistText=document.createElement('span');
constlistBtn=document.createElement('button');

listItem.appendChild(listText);
listText.textContent=myItem;
listItem.appendChild(listBtn);
listBtn.textContent='Delete';
list.appendChild(listItem);

listBtn.addEventListener('click',()=>{
list.removeChild(listItem);
});

input.focus();
});
</script>
</body>
</html>