Friday, May 7, 2021
exercise 8 sidebar
Exercise 8 CSS Sidebar navigation
Home
Hi my Name is MARIA CLARISSE SALO MMA STUDENT IN UNIVERSITY OF PERPETUAL HELP SYSTEM DALTA . I'm a Graphic designer, photographer and videographer
Portfolio
Profile
HI!
Maria clarisse is here!
i'm a multimedia student in UNIVERSITY OF PERPETUAL HELP SYSTEM DALTA 3rd year student soon to be graphic artist
when i was in highschool i really love to take pictures landscape, portrait, nigth photography, fashion photography and street photography.
i enjoyed filming when i was in seniorhigh school and also editing our videos.
making my imagination more realistic and more creative .
Contact
Don't hesitate to dm me in any social media accounts
FOLLOW ME ON MY INSTAGRAM!
Instagram: https://www.instagram.com/m.klarisss//h2>
link
...Thursday, May 6, 2021
EXERCISE 7 - PRICE LIST INTERACTIVE
<!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="CJINTERACTIVE7.css">
</head>
<body>
<h1 class="font1"> Select Box Price List</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="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="40"> 40 </option>
<option value="60"> 60 </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 CODE
* {
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: #F08080;
padding: 10px;
margin-left: 30%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
p {
display: inline-block;
}
.btn {
color: white;
display: block;
width: 50%;
margin-left: 25%;
background-color: #000000;
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: Verdana;
}
select {
width: 200px;
margin-left: 23px;
}
Wednesday, May 5, 2021
Subscribe to:
Posts (Atom)
-
Enter your name: Enter your Score: Enter total number of items: Compute
