Wednesday 28 June 2017

android phone usb tethering

Connect your phone to your laptop via a USB cable and you’ll see the USB tethering option become available.
android-enable-usb-tethering
Enable it and you’ll see a new network adapter in Windows. The USB tethering connection is described as a “Remote NDIS based Internet Sharing Device.” Use this adapter to connect to the Internet using your phone’s data connection. It should be used automatically if you’re disconnected from standard Wi-Fi and wired networks.
android-usb-tethering-adapter[4]

Third-Party Tethering Apps

There are quite a few third-party tethering apps you can download from Google Play. Many are paid apps or require root access.
PdaNet+ offers Bluetooth and USB tethering on all Android phones, while its Wi-Fi tethering will only work on some phones. The free version will automatically turn itself off and force you to turn it back on occasionally — you can have it stop bothering you by paying up for the full version. Unlike many other such apps, PdaNet doesn’t require root access. The bundled Wi-Fi tethering feature is new in PdaNet+, and is the same as the popular FoxFi app.
You may also want to look for other tethering apps in Google Play. You may want a free app that uses root and doesn’t require you to re-enable it regularly, or PdaNet+ may not be able to provide Wi-Fi access on your phone. In this case, try something like the WiFi Tethering app. It requires root access, but provides Wi-Fi (and Bluetooth) tethering with no restrictions.
android-pdanet

Reverse Tethering

You can also reverse tether — connect your phone to your computer and share your computer’s Internet connection with your phone. This is a fairly rare situation, but you may someday find yourself in an office where there’s no Wi-Fi. If you can connect your Android phone to a computer with a wired Internet connection using a USB cable, you can share its wired Internet connection.

The Secrets of Nature


https://www.youtube.com/channel/UCVGTgXC1P--xM480Z6DqyAg

Tuesday 27 June 2017

MERIDIAN bank CELEBRATE CANADA 150

1.50%

APR*


15-MONTH FIXED CLOSED MORTGAGE
When a home fits your lifestyle and a mortgage fits your budget. That's Wealth Esteem.
LEARN MORE

1.50%

CASH BONUS**


ON TRANSFERRED REGISTERED FUNDS
Offer available on RRSP, TFSA and RRIF funds transferred to Meridian.
LEARN MORE

UP TO 15%

3 YEAR***


CANADIAN INDEX-LINKED GIC
You get all the potential upside of the stock market with your principal guaranteed.
LEARN MORE


Monday 26 June 2017

javascript final Part D

chen assignment 4
slide show starts in 5s
img



<!DOCTYPE html>
<html>
<head>
    <title>chen assignment 4</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">

        var pictures = new Array("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOOXVWayqCzU6sXWcRThvhtld8nO5XXS7zrLVG6bjVsjNFzEwB8RMI4kWl1S9QuqMNDyM5JhS7aU3O1PHVGpXTnAHgKCF9ZINaqIAJZTjOre5nwn8sSfFVqemPQQ1rs3elsAWRSm7_O8/s320/bow+lake.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYabgkdpzry3odz9_fvM0b0NXY3Gd37joXJjlRoGjuz2iLS5xJqZ0ukQ8057cHC_TpC76Wsq8SP_zVBJVEVr1G__Y8spKQtmgb5ouCb84604V_VWRYKrdVol6RZJyLxvJ-X3ydARqXOM/s320/emerald+lake.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjJcbMm6aXoAURkOJ3gJzBeSkXcnTty0AI9QIrn_RBN9jd5A5BrTVTWWGd9VFziHvD3raw-eGd8JKzf_ro-7ye1iAR1u7iTSL2-gUlheBbSr2PgtxmVjWlUwfxZwtYXk6zS5Yemh1vNI/s320/ice+field+park.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfVFYAGdK47-UFdRek1MQr7xcWBMLefZHNbREzFU-u82Dc37tG5E7IIxz2veBxBO7af0d8EsJllCgxpStFfd9UatmFAS5Gb3rGzh4cC6poeBWDf2bObOGTc2j9ZKwW8lYynCK0q-I-oY/s320/lake+louise.jpg",
            "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8g8OA8GT1FmDbApmTfJ7zbY-R4EIJdwhqry9zR_fowWPRf-I5bQYTtkWZPMkH3C6Ygx0D7zZUovu92C6hkk7jBW-TIpZlWmgfdJfExrWRXOT6oqWsXGAYQmMQeY10ZzJbc_PO0drzDL0/s320/peyto+lake.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLHJq_0yihkJCiTMcN7_UK6IMWKdlvMRdtejr4m5ty-4fbuz28STArO4ftIx9VT1Fp445YzsZnuCoyE3uAFtLap914561Py1yqdxbzDadsdXIlKbOG7UAx-qlYCpbeFw1VA4RRlMx9hgI/s320/red+rock+canyon.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbPRV5bLqp7Q-IBOLQ6YlML0Y8LjLk_SG5owP39A80et5r2sHWWplSorhDGfpt0B07BKEjb1bRE645EX7lEcNN9TIo_kwy-y4LLX-cOwvrFDw_mgR2myJjKVAq5ZGtTNDUcHum2nFFws/s320/ten+peaks+valley.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUqZ4_knyGfrLmc_Oi62CLMn2drchVJyFgKkYHIMlN_2DyLypCQvKv6cNDvi-ggrdmx_wEkm4Mv7iElxCqrtJf5ec8IF-am30m6PEVbvx7UGrj9sFaSy0RvaeW6yRu-7amZc-lvjArU8/s320/waterton+cruise.jpg");
        var description = new Array("bow lake", "emerald lake", "ice field park", "lake louise",
            "peyto lake", "red rock canyon", "ten peaks valley", "waterton cruise");
        var i = parseInt(0);


        $(document).ready(function () {
            setInterval(
                function () {

                    if (i == pictures.length) { i = 0; }

                    //$("#img").src = pictures[i];
                    document.getElementById("img_").visibility = "hide";
                    document.getElementById("img_").src = pictures[i];

                    $("#img_note").html(description[i]);

                    $("#img_").fadeIn(1000).delay(3000).fadeOut(1000);

                    document.getElementById("img_").visibility = "hide";

                    i++;
                    $("#wait").html("");
                }
                , 5100);

        });
    </script>
    <style>
        #img_ {
            height: 300px;
            visibility: hide;
        }

        #frame_ {
            height: 350px;
        }
    </style>
</head>

<body>
    <p id="wait">slide show starts in 5s</p>
    <div id="frame_" align="center">
        <img src="" id="img_" alt="img" />
        <br />
    </div>
    <div align="center">
        <span id="img_note"></span>
    </div>
</body>

</html>

javascript final Part C

chen assignment 4

Dodgy Brakes Car Rental

Regisration form

Reservation form



small
mid-size
full-size
van
navigation system $10
child seat $5
roof rack $15
bicycle rack $15




var client_data = [];
var total = parseInt(0);
var vehicle_size = "";
var addtional_options = "";

window.onload = initial_function;

function initial_function() {
    var today = new Date();
    document.getElementById("time").innerHTML = today;
}

function storeClientData() {
    var title = document.getElementById("select_title").value;
    var first_name = document.getElementById("first_name").value;
    var last_name = document.getElementById("last_name").value;
    var street = document.getElementById("street").value;
    var city = document.getElementById("city").value;
    var province = document.getElementById("province").value;
    var postal_code = document.getElementById("postal_code").value;
    var phone = document.getElementById("phone").value;
    var email = document.getElementById("email").value;

    if (title == "" || first_name == "" || last_name == "" || street == "" || city == ""
        || province == "" || postal_code == "" || phone == "" || email == "") {
        alert("data is missing");
    }
    else {

        var name = first_name + " " + last_name;
        if (!checkName(name))
        {
            alert("full name is invalid");
            return;
        }

        if (!checkPostalCode(postal_code))
        {
            alert("postal code is invalid");
            return;
        }

        if (!checkTelephone(phone))
        {
            alert("phone is invalid");
            return;
        }

        if (!checkEmail(email))
        {
            alert("email is invalid");
            return;
        }

        client_data[0] = title;
        client_data[1] = first_name;
        client_data[2] = last_name;
        client_data[3] = street;
        client_data[4] = city;
        client_data[5] = province;
        client_data[6] = postal_code;
        client_data[7] = phone;
        client_data[8] = email;

        document.getElementById("reservation_form").style.visibility = "visible";
    }
}

function slider_value() {
    document.getElementById("slider_value").innerHTML = document.getElementById("duration").value;
}

function vehicle_select() {
    for (var i = parseInt(0); i < document.reservation.vehicle_type.length; i++) {
        if (document.reservation.vehicle_type[i].checked) {
            document.getElementById("vehicle_cost").innerHTML = "$" + document.reservation.vehicle_type[i].value.split(" ")[0];
            vehicle_size = document.reservation.vehicle_type[i].value.split(" ")[1];
        }
    }
}

function calculate_rental() {
    total = 0;
    addtional_options = "";

    var vehicle_cost = document.getElementById("vehicle_cost").innerHTML;

    if (vehicle_cost != undefined && vehicle_cost != "") {
        total += parseInt(vehicle_cost.substring(1));
    }

    if (document.reservation.navigation.checked)
    {
        total += 10;
        addtional_options += "navigation $10 per day <br/>";
    }

    if (document.reservation.child_seat.checked) {
        total += 5;
        addtional_options += "child seat $5 per day <br/>";
    }

    if (document.reservation.roof_rack.checked) {
        total += 15;
        addtional_options += "roof rack $15 per day <br/>";
    }

    if (document.reservation.bicycle_rack.checked) {
        total += 15;
        addtional_options += "bicycle $15 per day <br/>";
    }

    total *= document.getElementById("duration").value;

    var receipt ="";

    receipt = client_data[0] + " " + client_data[1] + " " + client_data[2] + "<br/>";
    receipt = receipt + client_data[3] + " " + client_data[4] + " " + client_data[5] + "<br/>";
    receipt = receipt + "Contact: " + client_data[7] + "<br/><br/>";

    receipt = receipt + "Rental information: <br/>";
    receipt = receipt + "car: " + vehicle_size + " " + document.getElementById("vehicle_cost").innerHTML + " per day<br/>";
    receipt = receipt + "Options: " +addtional_options;
    receipt = receipt + "Duration: " + document.getElementById("duration").value +" days<br/>";
    receipt = receipt + "Cost of Rental: $" + total;

    document.getElementById("receipt").innerHTML = receipt;
}

//functions with regular expressions
function checkName(formname) {
    //pattern variable
    var pattern = /^[a-zA-Z][^0-9]+$/;
    //test forname against pattern and return true or false
    return pattern.test(formname);//returns boolean true or false
}

function checkPostalCode(postalcode) {

    var pattern = /[ABCEGHJKLMNPRSTVXY][0-9][ABCEGHJKLMNPRSTVWXYZ][0-9][ABCEGHJKLMNPRSTVWXYZ][0-9]/;
    //change everything to upper case
    postalcode = postalcode.toUpperCase();
    return pattern.test(postalcode);//returns either true or false

}

function checkTelephone(telephone) {
    //pattern checks for North American area codes and phone number
    //first number cannot be a '1'
    var pattern = /[2-9]{1}[0-9]{9}$/;

    return pattern.test(telephone);

}

function checkEmail(email) {

    pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    return pattern.test(email);

}

------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
    <title>assignment final</title>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>

<body>
    <h2 id="title">Dodgy Brakes Car Rental</h2>

    <div id="banner"></div>

    <label id="time"></label>

    <form class="col-md-6">
        <h3>Regisration form</h3>

        <table class="table table-striped">
            <tr>
                <td>
                    <label>title: </label>
                </td>
                <td>
                    <select id="select_title" class="form-control">
                        <option value="">please select one</option>
                        <option value="Mr.">Mr.</option>
                        <option value="Mrs.">Mrs.</option>
                        <option value="Ms.">Ms.</option>
                        <option value="Dr.">Dr.</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label>first name: </label>
                </td>
                <td>
                    <input type="text" id="first_name" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>last name: </label>
                </td>
                <td>
                    <input type="text" id="last_name" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>street address : </label>
                </td>
                <td>
                    <input type="text" id="street" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>city : </label>
                </td>
                <td>
                    <input type="text" id="city" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>province : </label>
                </td>
                <td>
                    <input type="text" id="province" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>postal code : </label>
                </td>
                <td>
                    <input type="text" id="postal_code" class="form-control" placeholder="T2N1N4"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label>phone # : </label>
                </td>
                <td>
                    <input type="tel" id="phone" class="form-control" placeholder="4031234567"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label>email : </label>
                </td>
                <td>
                    <input type="email" id="email" class="form-control" placeholder="yourname@company.net"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="form-control submit_button" value="submit" onclick="storeClientData()" />
                </td>
            </tr>
        </table>
    </form>

    <form class="col-md-6" name="reservation" id="reservation_form">
        <h3>Reservation form</h3>

        <table class="table table-striped">
            <tr>
                <td>
                    <label>duration (days)</label><br />
                    <span id="slider_value"></span>
                </td>
                <td>
                    <input id="duration" type="range" min ="1" max="30" step="1" onchange="slider_value()"/>                    
                </td>
            </tr>
            <tr>
                <td>
                    <label>type of vehicle</label><br />
                    <span id="vehicle_cost"></span>
                </td>
                <td>
                    <input type="radio" name="vehicle_type" value="25 small" onclick="vehicle_select()" />small<br />
                    <input type="radio" name="vehicle_type" value="35 mid-size" onclick="vehicle_select()"/>mid-size<br />
                    <input type="radio" name="vehicle_type" value="45 full-size" onclick="vehicle_select()"/>full-size<br />
                    <input type="radio" name="vehicle_type" value="50 van" onclick="vehicle_select()"/>van<br />                  
                </td>                
            </tr>
            <tr>
                <td>
                    <label>additional options</label>
                    <span id="additional"></span>
                </td>
                <td>
                    <input type="checkbox" name="navigation" />navigation system $10<br />
                    <input type="checkbox" name="child_seat" />child seat $5<br />
                    <input type="checkbox" name="roof_rack" />roof rack $15<br />
                    <input type="checkbox" name="bicycle_rack" />bicycle rack $15<br />
                </td>              
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="form-control submit_button" value="calculate rental" onclick="calculate_rental()" />
                </td>
            </tr>
        </table>
    </form>

    <p id="receipt"></p>
</body>

</html>

javascript final Part B

chen assignment final

Pizza Order


Choose pizza size
small $8
medium $10
large $15
extra large $18

Add specials
none
super cheesy $3
extra meaty $5
really veggy $2

Add extras
extra cheese $1.5
extra pepperoni $1.5
extra mushrooms $1.5
extra bacon $1.5
extra olives $1.5

name
address
phone number



Receipt : total: $





var total = parseFloat(0);
var pizza_type = "";
var add_specials = "";
var add_extras = "";

$(document).ready(function () {
    $("#submit").click(function () {
        total = 0;
        pizza_type = "";
        add_specials = "";
        add_extras = "";

        total += parseFloat($('input:radio[name=pizza_type]:checked').val().split(" ")[0]);
        pizza_type = $('input:radio[name=pizza_type]:checked').val().split(" ")[1];

        total += parseFloat($('input:radio[name=specials]:checked').val().split(" ")[0]);
        add_specials = $('input:radio[name=specials]:checked').val().split(" ")[1]

        if ($("#extra_cheese").prop("checked")) {

            total += 1.5;
            add_extras+= "cheese, "
        }

        if ($("#extra_pepperoni").prop("checked")) {

            total += 1.5;
            add_extras += "pepperoni, "
        }

        if ($("#extra_mushrooms").prop("checked")) {

            total += 1.5;
            add_extras += "mushrooms, "
        }

        if ($("#extra_bacon").prop("checked")) {

            total += 1.5;
            add_extras += "bacon, "
        }

        if ($("#extra_olives").prop("checked")) {

            total += 1.5;
            add_extras += "olives, "
        }

        $("#receipt").html("<br/>" + $("#name").val() + "<br/>" + $("#address").val() + "<br/>" + $("#phone").val() + "<br/>"
            + "Pizza type: " + pizza_type + "<br/>" + "Specials: " + add_specials + "<br/>" + "Extras: " + add_extras + "<br/>");
        $("#total_cost").html(total);
    });
});

-------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
    <title>assignment final</title>
    <script src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>

<body>
    <div class="title">
        <h1>Pizza Order</h1>
        <hr />
    </div>

    <form name="pizza_order">
        <b>Choose pizza size</b><br />
        <input type="radio" name="pizza_type" value="8 small" checked />small $8<br />
        <input type="radio" name="pizza_type" value="10 medium" />medium $10<br />
        <input type="radio" name="pizza_type" value="15 large" />large $15<br />
        <input type="radio" name="pizza_type" value="18 extra_large" />extra large $18<br />
        <br />
        <b>Add specials</b><br />
        <input type="radio" name="specials" value="0 none" checked />none<br />
        <input type="radio" name="specials" value="3 super_cheesy" />super cheesy $3<br />
        <input type="radio" name="specials" value="5 extra_meaty" />extra meaty $5<br />
        <input type="radio" name="specials" value="2 really_veggy" />really veggy $2<br />
        <br />
        <b>Add extras</b><br />
        <input type="checkbox" id="extra_cheese" />extra cheese $1.5<br />
        <input type="checkbox" id="extra_pepperoni" />extra pepperoni $1.5<br />
        <input type="checkbox" id="extra_mushrooms" />extra mushrooms $1.5<br />
        <input type="checkbox" id="extra_bacon" />extra bacon $1.5<br />
        <input type="checkbox" id="extra_olives" />extra olives $1.5<br />
        <br />
        <table>
            <tr>
                <td>name</td>
                <td><input type="text" id="name"/></td>
            </tr>
            <tr>
                <td>address</td>
                <td><input type="text" id="address"/></td>
            </tr>
            <tr>
                <td>phone number</td>
                <td><input type="text" id="phone"/></td>
            </tr>
        </table>
        <br />
        <input type="button" value="place order" id="submit" /><br />
        <br />
        <b>Receipt : </b><span id="receipt"></span>
        <b>total: $</b> <span id="total_cost"></span>
    </form>
</body>

</html>

javascript final Part A

chen assignment final

Imperial to Metric conversion


Length Conversion

Imperial(ft) >>> Metric(m)
<<<

Area Conversion

Imperial(ft2) >>> Metric(m2)
<<<

Volumn Conversion

Imperial(ft3) >>> Metric(m3)
<<<

Volumn Conversion

Imperial gallon >>> Liters
<<<

Length Conversion

Yard >>> Meters
<<<

Length Conversion

Mile >>> Km
<<<




//javascript.js


$(document).ready(function () {

    $("#length_I").change(function () {

        var feet = $(this).val();
        var meter = parseFloat(feet * 0.3048).toFixed(2);

        $("#length_M").val(meter);
    });

    $("#length_M").change(function () {

        var metric = $(this).val();
        var feet = parseFloat(metric * 3.2809).toFixed(2);

        $("#length_I").val(feet);
    });

    $("#area_I").change(function () {

        var feet = $(this).val();
        var meter = Math.pow(parseFloat(feet * 0.3048),2).toFixed(2);

        $("#area_M").val(meter);
    });

    $("#area_M").change(function () {

        var metric = $(this).val();
        var feet = Math.pow(parseFloat(metric * 3.2809),2).toFixed(2);

        $("#area_I").val(feet);
    });

    $("#volumn_I").change(function () {

        var feet = $(this).val();
        var meter = Math.pow(parseFloat(feet * 0.3048), 3).toFixed(2);

        $("#volumn_M").val(meter);
    });

    $("#volumn_M").change(function () {

        var metric = $(this).val();
        var feet = Math.pow(parseFloat(metric * 3.2809), 3).toFixed(2);

        $("#volumn_I").val(feet);
    });

    $("#gallon").change(function () {

        var feet = $(this).val();
        var meter = parseFloat(feet * 4.546).toFixed(2);

        $("#liters").val(meter);
    });

    $("#liters").change(function () {

        var metric = $(this).val();
        var feet = parseFloat(metric * 0.22).toFixed(2);

        $("#gallon").val(feet);
    });

    $("#yard").change(function () {

        var feet = $(this).val();
        var meter = parseFloat(feet * 0.9144).toFixed(2);

        $("#meter").val(meter);
    });

    $("#meter").change(function () {

        var metric = $(this).val();
        var feet = parseFloat(metric * 1.0936).toFixed(2);

        $("#yard").val(feet);
    });

    $("#mile").change(function () {

        var feet = $(this).val();
        var meter = parseFloat(feet * 1.6093).toFixed(2);

        $("#km").val(meter);
    });

    $("#km").change(function () {

        var metric = $(this).val();
        var feet = parseFloat(metric * 0.6214).toFixed(2);

        $("#mile").val(feet);
    });

});

---------------------------------------------------------------------------------

//default.html

<!DOCTYPE html>
<html>
<head>
    <title>assignment final</title>
    <script src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>

<body>
    <div class="title">
        <h1>Imperial to Metric conversion</h1>
        <hr />
    </div>
    <div class="col-md-4">
        <h3>Length Conversion</h3>
        <table>
            <thead>
                <tr>
                    <td>Imperial(ft)</td>
                    <td>>>></td>
                    <td>Metric(m)</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="number" id="length_I" class="form-control"/>
                    </td>
                    <td><<<</td>
                    <td>
                        <input type="number" id="length_M" class="form-control"/>
                    </td>
                </tr>
            </tbody>
         
        </table>
    </div>

    <div class="col-md-4">
        <h3>Area Conversion</h3>
        <table>
            <thead>
                <tr>
                    <td>Imperial(ft<sup>2</sup>)</td>
                    <td>>>></td>
                    <td>Metric(m<sup>2</sup>)</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="number" id="area_I" class="form-control" />
                    </td>
                    <td><<<</td>
                    <td>
                        <input type="number" id="area_M" class="form-control" />
                    </td>
                </tr>
            </tbody>

        </table>
    </div>

    <div class="col-md-4">
        <h3>Volumn Conversion</h3>
        <table>
            <thead>
                <tr>
                    <td>Imperial(ft<sup>3</sup>)</td>
                    <td>>>></td>
                    <td>Metric(m<sup>3</sup>)</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="number" id="volumn_I" class="form-control" />
                    </td>
                    <td><<<</td>
                    <td>
                        <input type="number" id="volumn_M" class="form-control" />
                    </td>
                </tr>
            </tbody>

        </table>
    </div>

    <div class="col-md-4">
        <h3>Volumn Conversion</h3>
        <table>
            <thead>
                <tr>
                    <td>Imperial gallon</td>
                    <td>>>></td>
                    <td>Liters</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="number" id="gallon" class="form-control" />
                    </td>
                    <td><<<</td>
                    <td>
                        <input type="number" id="liters" class="form-control" />
                    </td>
                </tr>
            </tbody>

        </table>
    </div>

    <div class="col-md-4">
        <h3>Length Conversion</h3>
        <table>
            <thead>
                <tr>
                    <td>Yard</td>
                    <td>>>></td>
                    <td>Meters</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="number" id="yard" class="form-control" />
                    </td>
                    <td><<<</td>
                    <td>
                        <input type="number" id="meter" class="form-control" />
                    </td>
                </tr>
            </tbody>

        </table>
    </div>

    <div class="col-md-4">
        <h3>Length Conversion</h3>
        <table>
            <thead>
                <tr>
                    <td>Mile</td>
                    <td>>>></td>
                    <td>Km</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="number" id="mile" class="form-control" />
                    </td>
                    <td><<<</td>
                    <td>
                        <input type="number" id="km" class="form-control" />
                    </td>
                </tr>
            </tbody>

        </table>
    </div>

</body>

</html>

Friday 23 June 2017

The best PC card games

What is the best CCG? It’s not a question we’d have been asking just a few years ago, when some basic ports of paper-based systems and some minigames in larger titles were all we had access to. Now it’s one of the quickest growing genres in the world.
What that means is somebody (us) needs to lay down the objective truth (subjective opinion) on which are best (we enjoy the most). We’ll cover everything from the biggest player in the genre today (you’ll never guess which that is), who’s porting best from paper, the up-and-comers you might not have heard of, and even what’s on the horizon.
Why are unreleased games in a best-of list? Because it’s a small and still-growing genre, we’re excited for them, and it’s good to know what’s coming. If they come out and are a bit guff, they’ll of course be stricken from the archives, never to be spoken of again.
Tactics and scheming your thing? Check out the best strategy games on PC.

Hex: Shards of Fate

Play Hex for free
Hex is akin to Magic Duels in a lot of ways, not least in that its game system is so similar to Wizards’ that there is an ongoing legal battle over it. However, Hex has a more competitive angle to it and, not having a real-life equivalent to feed into, has no limitations on which cards are available.
While many of the basic building blocks of the game are the same, Hex has far more powerful effects at cheaper costs and exploits its digital nature. Even with the intro decks that are given to any new account for free, you’ll be doing some broken things on early turns or have the option to build any sort of deck you like from the parts.
Individual cards are also highly modifiable, letting you socket ‘gems’ into them that change their effect. Many are able to transform into multiple forms, or opponents will be able to shuffle cards into your deck, both of which are difficult or impossible to do in a physical game. It’s another layer of strategy on top of what is already a highly complicated system, but it’s welcome for allowing more personalisation and wackier kinds of cards.
 Hex has a gauntlet-style single-player component that gives more rewards the further you get and a host of multiplayer modes. It’s not too easy to get into without dropping a bit of cash, but there is an obvious progression from one mode to the other and some lucky opens can be turned into in-game currency via the auction house.

The Elder Scrolls: Legends

Subscribe to PCGamesN on YouTube
Bethesda’s first CCG is no longer shrouded in secrecy. In fact, we’ve played it and it’s really quite brilliant. Taking a heap of visual and design cues from Hearthstone, The Elder Scrolls: Legends adds enough of its own systems and mechanics to eschew any accusations that it’s just another clone of Blizzard's immensely popular CCG. It’s also in open beta now if you want to try it out.
The most notable difference is the addition of a lane system that splits the board right down the middle. The right-hand side lane (the Shadow Lane) offers concealment for a single turn, the left-hand lane (the Field Lane) has no effect. It sounds like an insignificant feature, but having to decide which lane to place a particular card in or start mounting an attack on adds a huge amount of depth to Legends. The concealment offered by the Shadow Lane, for example, can turn the tide of a match by offering protection for weaker cards who might otherwise instantly be wiped off the board.
TES:L is also being developed by Dire Wolf Digital. You’ve probably never heard of them because this is their first title, but a large portion of their design and development staff are high level Magic players - either current top-tier pros or members of the Hall of Fame. That means they know the genre, and it really shows in TES:L, which plays like a thoroughbred card game with a coat of Elder Scrolls paint on it.

Hearthstone

Subscribe to PCGamesN on YouTube
The cream of the crop, the top of the stack and one of the friendliest free to play games out there. This list probably wouldn’t exist without Hearthstone as it jump-started the genre’s popularity after a few years of passive popularity and quickly became one of the most played games in the world.
But why is it so good? Simplicity and flow. Anybody can pick up and play Hearthstone and it will make sense to them. Maybe they won’t wholly understand what they’re doing or make the best tactical plays, but there’s immediate pleasure in dragging your men around the sandy battlefield, watching them clash into each other and large, friendly numbers popping out. Thanks to this it will also run on bloody anything, including tablets and phones.
Over its competitors it also has the elegance with which it moves. Hearthstone responds to input the best of all the games here, never stopping you from taking an action or casting a spell as quickly or slowly as you like, within the time limit. You can think for minutes then queue up a series of commands and it will happily execute each, flowing from one to the other in sequence and never feeling awkward or unwieldy.
Perhaps best of all, there’s a thriving competitive community. Playing catch-up to it probably won’t be an easy task after so many set releases (that's why we made a handy Hearthstone guide for beginners), but Blizzard are looking into ways to alleviate that struggle for new players. It’s also quite easy to play for free if you use your gold smartly and keep up with daily rewards, even if you aren’t particularly good.

Faeria

Best card games Faeria
Faeria is a perfectly normal CCG with one notable twist: you have to build the board yourself. The result is a card game that plays more like a strategy game, and that makes for untold tactical variation.
You start a game facing your foe across a sea of vacant tiles that are waiting to be built upon. With the option of building two standard tiles, or one special tile per turn, you can either head straight for your opponent or seek out the Faeria wells dotted around the map - these are game’s magical resource, and controlling them is key if you want to play higher cost cards. That means you can either try and choke your opponent out of resources or deal direct damage for an early win.
Faeria also boasts one of the most versatile deck-building mechanics in the genre, and it’s especially handy for card game newcomers. Instead of the player blindly trying to make changes to a starter deck, Faeria encourages players to build their own decks from the ground up by picking codexes - a collection of three cards that all synergise with one another. All you have to do is keep picking codexes until you have a full deck, and because many of them will share the same terrain type or card effect, there’s always plenty of power that can be eked out of your hand.

Gwent

Best PC card games Gwent
The minigame that launched a thousand ships its own standalone product. And it’s not hard to see why. Gwent is - or at least was, in its guise in The Witcher 3 - far more accessible than your average CCG. You lay your cards down across three rows, each card has a value, high score wins. But of course, move away from the nursery slopes and there’s a lot to learn. Almost as important as what cards you play is when you play them, and you’ll often find yourself losing a round on purpose in order to win the match.
For the standalone version, CDPR have made a number of alterations. The game board and cards themselves have been prettied up, and almost any card you play now has one or more added effects. It’s done away with some of the serenity of classic Gwent, but is necessary in order to make the game functional as a PvP proposition. That said, if you’re not a people person there is also a ten-hour single-player campaign.

Chronicle: Runescape Legends

Play Runescape: Chronicle
From what first looked like a low-effort Hearthstone-clone, the folks at Jagex have crafted something wholly different from the other entries in the genre. In Chronicle you’ll be using cards as a way to tell the story of your hero, or Legend, while simultaneously the cards you face can each have some effect on your opponent. The basic aim is to buff your Legend over the course of a round in order to give them an advantage during direct duels with your opponent’s Legend.
It’s an interesting formula and seems to fit somewhere between deck-building and normal competitive variants. Each round is on a double-page spread of a beautifully tactile tabletop book, the titular Chronicle. When both Legends make it through the round they face each other and deal direct damage before the next round gets underway. Different Legends bring their own playstyles into the fold, resulting in some great variation where viable decks are concerned.
Chronicle is also notable for having basically the same origin as Hearthstone - a massive dedicated fanbase for a long-running MMO with a rich history. Resist the urge to scoff - sure, Runescape was and will never be the titan WoW became, but there are a lot of players there. More importantly, there’s a lot of money and a large development team who’ve been growing and maturing for more than a decade. Chronicle: Runescape Legends is now in open beta, meaning you can try it out for free right now.

Magic Duels

Magic Duels is an odd thing to recommend. It’s good and functional, with a hefty single-player component that will last a few hours without any investment and gives you a leg-up to a few card packs. There’s a smattering of online modes and gold is handed out nicely, plus there’s a maximum you can pay before all the cards are unlocked that’s roughly the price of a normal game.
Sadly it’s also a little broken - missing features from previous games and not letting players build their own decks to complete daily quests for rewards. So why is it here? Because it’s the best port of Magic there is, and Magic is an incredible game.
Trading some of that Hearthstone simplicity in for deeper strategy, Magic is easily one of the best games we’ve ever played. There is so much to consider at every point in a game of Magic - and even before when thinking about how to build decks - and it has wonderful flavour to its cards, each evoking a more interesting image than whatever basic game action it may represent.
Duels’ changes to the MTG formula make it easier to understand and it’s clearly thought of by Wizards of the Coast as a gateway drug to the cardboard crack itself. Magic The Gathering: Online (http://magic.wizards.com/en/content/magic-online-products-game-info) is a more exact port of all the systems and cards, but is difficult to endorse unless you’re already a fan. It uses the same pricing structure as the physical version and is also a poorly designed, difficult to use client.
But Duels is pick up and play in the best way and has great tutorials for teaching you each part of what is a highly complex game. It’s planned to be regularly updated with batches of new cards as they are released in real-life along with new associated campaigns and modes.
Want more? Here's our Magic Duels review.

Ascension

But what, you may ask, is a deck-building game? It’s a sub-genre where each player starts with an identical deck and then a line-up of cards they can purchase using various resources generated by those starter cards. Those cards then go into their discard pile, which is shuffled into their deck whenever they run out of cards. You start each turn with five cards and discard any you don’t use - usually that won’t be any of them - at the end.
It’s a completely different focus, moving the strategic deck-building portion of the game into the spotlight but keeping basic concerns like card sequencing and resource spending in place. If you’re the sort of person that likes playing combo decks with big single turns, deck-building is all about that.
Ascension itself is one of the best out there, and one of the few available on PC. It’s not a particularly great port of the mobile version, but it’s functional, and the game itself is good enough to be worth the slightly poor interface. Power and runes are your two resources, runes letting you buy new cards for your deck and power allowing you to defeat monsters for victory points. Each card in your deck at the end of the game also has a value, but stacking your deck with crap won’t be effective.
It’s about finding efficient ways to generate those resources, draw more cards from your deck and guarantee you’re playing as many of your powerful cards every turn as possible. You might do this by keeping your deck small, or using cards that stay in play rather than being shuffled back in - there’s a huge amount of variety and now a tonne of sets to mix and match the cards from.
Beautiful art, regular updates and very fast games round it off as a great thing to waste a little time with. The AI is competent but you’ll need to go online to find a real challenge.

Yomi

Yomi is the very odd combination of fighting and card game that was originally released in paper form several years back. It works on a rock, paper, scissors system of certain moves countering other moves and different attack speeds giving yours priority in mirror-move circumstances. On top of that is a pile of special conditions that alter specifics.
Essentially, it’s all the tactical thinking, decision making and mind-games that high-level Street Fighter is about without the reaction times and mechanical skill required. I was sceptical when I first encountered it but it works far better than it seems like it would.
Helping a lot is an incredibly well drawn cast of colourful and varied characters. Each card has them doing some incredible maneuver emblazoned on it and it’s probably the best collection of art on this list. They also all have their own unique playstyle and focus, broadly fitting into standard card game archetypes like control or combo.
If you’re a fan of either half of Yomi’s concept, it’s worth looking into. Card game fans will find an interesting new system that doesn’t require any deck-building to get into. Fighters will recognise a lot of the themes involved and enjoy the way they’ve been integrated into a simultaneous-turns system.
Want more? Here's our The Witcher 3: Wild Hunt review.
That's our picks. What'd we miss? What are you excited for? Let us know in the comments below.