Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@chrisdavidmills @psylone
60 lines (48 sloc) 1.24 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shopping list example</title>
<style>
li {
margin-bottom: 10px;
}
li button {
font-size: 8px;
margin-left: 20px;
color: #666;
}
</style>
</head>
<body>
<h1>My shopping list</h1>
<div>
<label for="item">Enter a new item:</label>
<input type="text" name="item" id="item">
<button>Add item</button>
</div>
<ul>
</ul>
<script>
var list = document.querySelector('ul');
var input = document.querySelector('input');
var button = document.querySelector('button');
button.onclick = function() {
var myItem = input.value;
input.value = '';
var listItem = document.createElement('li');
var listText = document.createElement('span');
var listBtn = document.createElement('button');
listItem.appendChild(listText);
listText.textContent = myItem;
listItem.appendChild(listBtn);
listBtn.textContent = 'Delete';
list.appendChild(listItem);
listBtn.onclick = function(e) {
list.removeChild(listItem);
}
input.focus();
}
</script>
</body>
</html>
You can’t perform that action at this time.