<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 007: JavaScript Selected Value</title>
<link rel="stylesheet" href="Exercise007SelectedValueinte2.css">
</head>
<body>
<h1 class="font1"> Products & Price Select box</h1>
<div id="container">
<form>
<fieldset>
<label for="name"> • Add Products: </label>
<input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br>
<label for="price"> • Add Price: </label>
<input type="number" id="price" placeholder="Enter Price" autocomplete="off"> <br>
<br>
<button class="btn" id="btnAdd" size=12> <b> Add Product </b> </button> <br>
<div class="row">
<div class="column">
<label for="list"> • Product List: </label> <br>
<select id="list" name="list" multiple size=10>
<option value="apple"> Apple </option>
<option value="banana"> Banana </option>
</select>
</div>
<div class="column">
<label for="list"> • Price List: </label> <br>
<select id="price-list" name="price-list" multiple size=10>
<option value="80"> 80 </option>
<option value="100"> 100 </option>
</select>
</div>
</div>
<button class="btn" id="btnRemove"> <b> Remove Product </b> </button> <br>
</fieldset>
</form>
</div>
<script>
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const selectbox = document.querySelector('#list');
const priceselectbox = document.querySelector('#price-list');
const name = document.querySelector('#name');
const price = document.querySelector('#price');
var prod =
btnAdd.onclick = (e) => {
e.preventDefault();
if (name.value == '') {
alert('Please enter the name.');
return;
}
if (price.value == '') {
alert('Please enter the price.');
return;
}
const option = new Option(name.value, name.value);
const optionprice = new Option(price.value, price.value);
selectbox.add(option, undefined);
priceselectbox.add(optionprice, undefined);
name.value = '';
price.value = '';
name.focus();
};
btnRemove.onclick = (e) => {
e.preventDefault();
let selected = [];
for (let i = 0; i < selectbox.options.length; i++) {
selected[i] = selectbox.options[i].selected;
}
const noneSelected = selected.every(x => !x);
if (noneSelected) {
for (let i = 0; i < priceselectbox.options.length; i++) {
selected[i] = priceselectbox.options[i].selected;
}
}
let index = selectbox.options.length;
while (index--) {
if (selected[index]) {
selectbox.remove(index);
priceselectbox.remove(index);
}
}
};
</script>
</body>
</html>
Code for CSS;
* {
box-sizing: border-box;
}
div {
margin-bottom: 10px;
}
h1.font1 {
font-size: 40px;
margin-left: 30%;
}
label {
display: inline-block;
margin-left: 20px;
}
fieldset {
width: 40%;
background: #cbc6dc;
padding: 10px;
margin-left: 30%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
Comments
Post a Comment