Exercise 7 Select box price list
<!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="Exercise007 Style code.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=10> <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="Monitor"> Monitor </option>
<option value="keyboard"> Keyboard</option>
<option value="mouse"> mouse</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="8000"> 8000 </option>
<option value="3050"> 3050 </option>
<option value="1200"> 1200 </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>
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: 20%;
background: #6f42ad;
padding: 10px;
margin-left: 30%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: center;
width: 50%;
padding: 10px;
}
p {
display: inline-block;
}
.btn {
color: black;
display: block;
width: 50%;
margin-left: 25%;
background-color: #d4e35f;
border-radius: 8px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 8px;
padding-top: 8px;
font-size: 15px;
cursor: pointer;
text-align: center;
font-family: Courier New;
}
select {
width: 200px;
margin-left: 23px;
}
Comments
Post a Comment