Conditionals

If Statements
    <!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>
        
Top

Index

If ... Else Statements
    <!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>
        
Top

Index

If and Else If
    <!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>
        
Top

Index

Nested If Statements
    <!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>
        
Top

Index

Javascript Switch Statements
    <!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>
        
Top

Index

Javascript Program : Calculating Bonuses
    <!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>
Top

Index

n4jvp.com