PROJECT; Tutorial about how to do the Exercise 7: Select Box Price List
First the Html code for this exercise is put the usually code the
"<!DOCTYPE html>
<html>
<head>"
if you don't put this usually code then your labored to be made is nonsense so you need this and we will go to put this meta name "<meta name="viewport" content="width=device-width, initial-scale=1">" and the Title of what exercise are you doing like this
"<title>Exercise 007: JavaScript Selected Value</title>"
and also you will link this html to the .css code or file like this
"<link rel="stylesheet" href="Exercise007SelectedValueinte2.css">
</head>"
Next we will go to the main exercise that we will do how to do the Price List
don't forget the body "<body>" and like the title the main font of this exercise
"<h1 class="font1"> Products & Price Select box</h1>"
the div id is container because we will doing the Select Box Price list so the shape of the usually fill is square so this is the code
"<div id="container">
<form>
<fieldset>"
Next for the products code is like this
<label for="name"> • Add Products: </label>
<input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br>
and then for the Price is like this is likely the same you will change only the 1"•Add Product or Add Price" if you want to do like this program
<label for="price"> • Add Price: </label>
<input type="number" id="price" placeholder="Enter Price" autocomplete="off"> <br>
<br>
The size of the font in Add Product code is like this
"<button class="btn" id="btnAdd" size=12> <b> Add Product </b> </button> <br>
<div class="row">
<div class="column">"
We will go to the Product List where the list of the Product that you want to put this is the code for example;
"<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>
And the Price List is also like in the Product List you just change rhe label list select id and option value
<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>"
If the computation is wrong and unavoidable needed to remove this is the code to erase that Product and also the Price list that you put
<button class="btn" id="btnRemove"> <b> Remove Product </b> </button> <br>
</fieldset>
</form>
</div>
<script>
constant is a value that should not be altered by the program during normal execution the value is constant. When associated with an identifier, a constant is said to be "named," although the terms "constant" and "named constant" are often used interchangeably. Constants are useful for both programmers and compilers: For programmers they are a form of self documenting code and allow reasoning about correctness. this is the following code for const;
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>
WE WILL GO TO CSS CODE THIS IS SO VERY EASY;
This is usually code also for css don't forget to write that it make aslso nonsense your labored that you made.
* {
box-sizing: border-box;
}
div {
margin-bottom: 10px;
}
The size of the font and margin its important to make sure that is fixed in the program it maybe small or its too big.
"h1.font1 {
font-size: 40px;
margin-left: 30%;
}"
The display a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types.
"label {
display: inline-block;
margin-left: 20px;
}"
the fieldset HTML element is used to group several controls as well as labels ( <label> ) within a web form.
"fieldset {
width: 40%;
background: #cbc6dc;
padding: 10px;
margin-left: 30%;
}"
row after the before selector inserts something before the content of each selected element. Use the content property to specify the content to insert. Use the after selector to insert something after the content.
.row:after {
content: "";
display: table;
clear: both;
}
Column shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
.column {
float: left;
width: 50%;
padding: 10px;
}
FOR THE RESPONSIVE WEB PAGE DESIGN;
COMPILATION OF MY ACTIVITIES;
WEB PROGRAMMING
PRELIM
https://web-programming2021.blogspot.com/2021/03/resume.html - RESUME
https://web-programming2021.blogspot.com/2021/03/registration.html - REGISTRATION FORM
https://web-programming2021.blogspot.com/2021/03/header-html-body.html - Header, HTML, Footer
https://web-programming2021.blogspot.com/2021/03/image.html - Photo/Art Blog
https://web-programming2021.blogspot.com/2021/03/hexadecimal-colors-tags.html - Hexadecimal Colors & Tag
MIDTERM
https://web-programming2021.blogspot.com/2021/04/exercise-6-external-css-style-of-color.html -CSS of Color Hex Code
https://web-programming2021.blogspot.com/2021/04/exercise-007-css-layout-and-web-page.html - CSS Layout and Web Page Concept
https://web-programming2021.blogspot.com/2021/04/exercise-8-css-side-bar-navigation.html - Side Bar Navigation
https://web-programming2021.blogspot.com/2021/04/exercise-8-css-side-bar-navigation.html - Iframe Drop Down Menu
https://web-programming2021.blogspot.com/2021/05/exercise-10-counting-drill-game-finals.html - Animation Web Page
https://web-programming2021.blogspot.com/2021/05/exercise-11-youtube-video-link.html - Youtube Video Link Parameters
INTERACTIVE MEDIA DESIGN
PRELIM
https://web-programming2021.blogspot.com/2021/03/hello-world.html - First Java Script (Hello World)
https://web-programming2021.blogspot.com/2021/03/html-2.html - Grade Equivalent
https://web-programming2021.blogspot.com/2021/03/scholarship.html - If else condition Scholarship
https://web-programming2021.blogspot.com/2021/03/12-months-finding-events.html - Event Finder
https://web-programming2021.blogspot.com/2021/03/assignment-interactive.html - Assignment True or False
MIDTERM
https://web-programming2021.blogspot.com/2021/04/exercise-006-order-list-html.html - Order List
https://web-programming2021.blogspot.com/2021/04/exercise-007-select-box-price-list.html - Select Box Price List
https://web-programming2021.blogspot.com/2021/05/execise-8-change-button-properties.html - Change Button Properties Onchange Event
FINALS
https://web-programming2021.blogspot.com/2021/05/exercise-10-drawing-in-canvas-finals.html - Drawing In Canvas
https://web-programming2021.blogspot.com/2021/06/exercise-11-counting-games-finals.html - Counting Drill Games
https://web-programming2021.blogspot.com/2021/06/exercise-12-chat-box.html - Chat Box
https://web-programming2021.blogspot.com/2021/06/exercise-13-login-and-sign-up-forms.html - Login and Sign Up Forms
Comments
Post a Comment