<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>If Statement</title>
<script>
window.onload = function () {
var age = 18;
var citizen = true;
if (age < 21) {
document.getElementById('result').innerHTML = "You may not legally drink alcohol";
}
if (age >= 18 && citizen) {
document.getElementById('result').innerHTML += "<br/>You may legally vote";
}
if (age < 18 || !citizen) {
document.getElementById('result').innerHTML += "<br/>You may not legally vote";
}
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>If ... else Statements</title>
<script>
window.onload = function () {
document.getElementById('btnOne').addEventListener('click', btnClicked);
document.getElementById('btnTwo').addEventListener('click', btnClicked);
};
function btnClicked(e) {
// log the id of the control which fired the event
console.log(e.target.id);
if (e.target.id == "btnOne") {
alert('Button One was clicked');
} else {
alert('Button Two was clicked');
}
}
</script>
</head>
<body>
<div id="result"></div>
<button id="btnOne">One</button>
<button id="btnTwo">Two</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>If and else if</title>
<script>
window.onload = function () {
document.getElementById('btnShow').addEventListener('click', determineGrade);
}
function determineGrade(e) {
var letterGrade;
var numberGrade = document.getElementById('numberGrade').value;
if (numberGrade >= 90) {
letterGrade = "A";
} else if (numberGrade >= 80) {
letterGrade = "B";
} else if (numberGrade >= 70) {
letterGrade = "C";
} else if (numberGrade >= 60) {
letterGrade = "D";
} else {
letterGrade = "E";
}
document.getElementById('result').innerHTML = letterGrade;
}
</script>
</head>
<body>
<label for="numberGrade">Numerical Grade</label>
<input type="number" min="0" max="100" id="numberGrade" />
<button id="btnShow">Show Letter Grade</button>
<div id="result"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Nested if and else if</title>
<script>
window.onload = function () {
document.getElementById('btnShow').addEventListener('click', determineGrade);
}
function determineGrade(e) {
var letterGrade;
var numberGrade = document.getElementById('numberGrade').value;
if (numberGrade >= 0 && numberGrade <= 100) {
if (numberGrade >= 90) {
letterGrade = "A";
} else if (numberGrade >= 80) {
letterGrade = "B";
} else if (numberGrade >= 70) {
letterGrade = "C";
} else if (numberGrade >= 60) {
letterGrade = "D";
} else {
letterGrade = "E";
}
document.getElementById('result').innerHTML = letterGrade;
} else {
document.getElementById('result').innerHTML = "Enter a numeric grade between 0 and 100";
}
}
</script>
</head>
<body>
<label for="numberGrade">Numerical Grade</label>
<input type="number" min="0" max="100" id="numberGrade" />
<button id="btnShow">Show Letter Grade</button>
<div id="result"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Switch Statement</title>
<script>
window.onload = function () {
document.getElementById('processTax').addEventListener('click', processTaxRate);
}
function processTaxRate(e) {
var year = document.getElementById('year').value;
console.log(year);
var taxRate;
switch (year) {
case '2010':
taxRate = .05;
break;
case '2011':
taxRate = .055;
break;
case '2012':
taxRate = .06;
break;
case '2013':
taxRate = .065;
break;
case '2014':
taxRate = .07;
break;
case '2015':
taxRate = .075;
break;
case '2016':
taxRate = .08;
break;
default:
taxRate = .085;
break;
}
document.getElementById('result').innerHTML = taxRate + "%"
}
</script>
</head>
<body>
<select id="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<button id="processTax">Show Tax Rate</button>
<div id="result"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Calculate Bonus</title>
<script>
window.onload = function () {
document.getElementById('btnBonus').addEventListener('click', calculateBonus);
}
function calculateBonus(e) {
var sales = document.getElementById('salesTotal').value;
var bonusPercentage;
if (sales < 100000) {
bonusPercent = .0;
}
if (sales >= 100000) {
bonusPercent = .005;
}
if (sales > 200000) {
bonusPercent = .0065;
}
if (sales > 300000) {
bonusPercent = .007;
}
if (sales > 400000) {
bonusPercent = .01;
}
console.log(bonusPercent);
var amountOfBonus = sales * bonusPercent;
document.getElementById('result').innerHTML = "$" + amountOfBonus
}
</script>
</head>
<body>
<label for="salesTotal">Enter Total Sales</label>
<input type="number" id="salesTotal"/>
<button id="btnBonus">Process Bonus</button>
<div id="result"/>
</body>
</html>