INTERACTIVE MEDIA DESIGN(Midterms): PRODUCTCS and PRICE
ASSIGNMENT NO. 2.2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMD: JavaScript Selected Value</title>
<style type="text/css">
body {
color: #6551BD90;
background-color: #FFFFFF ;
padding-top: 100px;
}
div {
margin-bottom: 10px;
}
header {
position:fixed;
font-family: 'century gothic';
top:0px;
left:0px;
width:100%;
height:10%;
color:#FFFFFF;
background-color: #7455E5 ;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200% 50%;
font-size: 50px;
padding:15px;
}
}
label {
display: inline-block;
margin-left: 20px;
}
fieldset {
width: 86%;
background-color: #B7E89590 ;
padding: 90px;
font-style: 'century gothic';
padding-top: 10px;
padding-bottom: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
padding: 0px;
}
p {
display: center;
}
.btn {
color: white;
display: block;
width: 35%%;
margin-left: 0%;
background-color: #6551BD90;
border-radius: 8px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5px;
padding-top: 5px;
font-size: 15px;
cursor: pointer;
text-align: center;
font-family: 'center gothic';
}
select {
width: 200px;
margin-left: 23px;
}
</style>
</head>
<body>
<header> PRODUCTS & PRICE SELECT BOX</header>
<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="apple"> Apple </option>
<option value="banana"> Banana </option>
<option value="banana"> Peaches </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="40"> 40 </option>
<option value="60"> 60 </option>
<option value="120"> 120 </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>
RESULT:
Comments
Post a Comment