DEV'S

JavaScript - DOM Manipulation-Table-Calculator

index.html
(button clicks, drop down)

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/myjs.js" ></script>

    </head>
    <body onload="onPageLoad()">
        <div>TODO write content</div>
        <input type="text" placeholder="enter something here" onblur="onInputCompleted()" onkeyup="onInputCompleted()" id="ipfield" >
        <button onclick="onInputCompleted()">Click Me</button>
        <select id="opt" onchange="onOptionChange()">
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3">Option 3</option>
            <option value="Option 4">Option 4</option>
            <option value="Option 5">Option 5</option>
            <option value="Option 6">Option 6</option>
            <option value="Option 7">Option 7</option>
        </select>
        <label>Do you agree</label>
        <input type="checkbox"  onchange="onAgree(this)" />

        <div id="imageholder"></div>

    </body>
</html>

tablesample.html
(Unit conversion, Dynamic table update)

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            table{
                border-collapse: collapse;
                width: 600px;
            }

            table,th,td{
                /*
                border: 1px;
                border-color: black;
                border-style: solid;
                */
                border: 1px solid black;
            }
        </style>
        <script>
            var rows = [];

            function addRecord() {
                var st_name = document.getElementById("stdname").value;
                var st_sub = document.getElementById("stdsubject").value;
                var st_mark = document.getElementById("stdmarks").value;
                var st_status = document.getElementById("stdstatus").value;

                var m = Math.random();

                var std_new_record_dom =
                        '<tr><td>' + st_name +
                        '</td><td>' + st_sub +
                        '</td><td>' + st_mark +
                        '</td><td>' + st_status +
                        '</td><td><button onclick="onDeleteRow(' + m + ')">DEL</button></td></tr>';
                rows.push({id: m, dom: std_new_record_dom});

                loadTable();
                document.getElementById("stdname").value = "";
                document.getElementById("stdsubject").value = "";
                document.getElementById("stdmarks").value = "";
                document.getElementById("stdstatus").value = "PASS";
            }

            function loadTable() {

                document.getElementById("stdrecords").innerHTML = "";
                for (var i = 0; i < rows.length; i++) {
                    document.getElementById("stdrecords").innerHTML =
                            document.getElementById("stdrecords").innerHTML + rows[i].dom;
                }

            }

            function onDeleteRow(id) {

                for (var i = 0; i < rows.length; i++) {
                    if (rows[i].id === id) {
                        rows.splice(i, 1);
                        break;
                    }
                }
                loadTable();
            }
            function startConvert() {
                var x = document.getElementById("lhs").value / document.getElementById("lhsvalues").value;
                var y = x * document.getElementById("rhsvalues").value;
                document.getElementById("rhs").value = y;
            }
        </script>
    </head>
    <body>
        <div style="padding: 10px">
            <input placeholder="enter value" type="number" id="lhs" 
                   onblur="startConvert()" onkeyup="startConvert()" />
            <select id="lhsvalues" onchange="startConvert()">
                <option value="1000000">mm</option>
                <option value="100000">cm</option>
                <option value="1000">m</option>
                <option value="1">km</option>
            </select>
            <button onclick="startConvert()">Convert</button>
            ==>
            <input placeholder="result here" type="number" readonly id="rhs" />
            <select id="rhsvalues" onchange="startConvert()">
                <option value="1000000">mm</option>
                <option value="100000">cm</option>
                <option value="1000">m</option>
                <option value="1">km</option>
            </select>

        </div>
        <div style="padding: 10px">
            <input placeholder="enter name" id="stdname" >
            <input placeholder="enter subject" id="stdsubject" >
            <input placeholder="enter marks" id="stdmarks" >
            <select id="stdstatus">
                <option value="PASS">PASS</option>
                <option value="FAIL">FAIL</option>
            </select>
            <button onclick="addRecord()">Enter</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Subject</th>
                    <th colspan="2">Marks</th>
                    <th>DELETE</th>
                </tr>
            </thead>
            <tbody id="stdrecords">

            </tbody>
        </table>

    </body>
</html>

calculator.html (A Simple working calculator, consider using eval() for simplified logic)

<!DOCTYPE html>
<!—To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.—>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            .container{
                width: 400px;
                margin: 0 auto;

            }

            td{
                width: 100px;

            }

            button{
                width: 100px;
                height: 70px;
                font-size: 20px;
            }

            .button_double{
                width: 205px;
                height: 70px;
            }

            input{
                padding: 5px;
                width: 400px;
                height: 30px;
                margin-left: 5px;
                text-align: right;
                font-size: 18px;

            }
        </style>
        <script>
            var lhs = "";
            var rhs = "";
            var current_selection = 1;
            var current_operation = "";
            function displayNum(v) {
                if (current_selection === 1) {
                    lhs = lhs + v;
                    document.getElementById("resultholder").value = lhs;
                } else {
                    rhs = rhs + v;
                    document.getElementById("resultholder").value = rhs;
                }
            }

            function clearBuffer() {
                current_selection = 1;
                current_operation = "";
                lhs = "";
                rhs = "";
            }

            function clearSelection() {
                clearBuffer();
                document.getElementById("resultholder").value = "";

            }

            function startOperation(oprt) {
                current_operation = oprt;
                lhs = document.getElementById("resultholder").value;
                current_selection = 2;
                document.getElementById("resultholder").value = "";
            }

            function calculate() {
                var result;
                if (current_operation === "+") {
                    result = parseInt(lhs) + parseInt(rhs);
                } else if (current_operation === "-") {
                    result = parseInt(lhs) - parseInt(rhs);
                } else if (current_operation === "x") {
                    result = parseInt(lhs) * parseInt(rhs);
                } else if (current_operation === "/") {
                    result = parseInt(lhs) / parseInt(rhs);
                }

                document.getElementById("resultholder").value = result;
                clearBuffer();

            }

        </script>
    </head>
    <body>
        <div class="container">
            <input placeholder="0"  id="resultholder"/>
            <table>
                <tr>
                    <td colspan="2"><button class="button_double" onclick="calculate()">=</button></td>
                    <td><button onclick="clearSelection()">Clear</button></td>
                    <td><button >Back</button></td>
                </tr>
                <tr>
                    <td><button onclick="displayNum(7)" >7</button></td>
                    <td><button onclick="displayNum(8)">8</button></td>
                    <td><button onclick="displayNum(9)">9</button></td>
                    <td><button onclick="startOperation('/')">/</button></td>
                </tr>
                <tr>
                    <td><button onclick="displayNum(4)">4</button></td>
                    <td><button onclick="displayNum(5)">5</button></td>
                    <td><button onclick="displayNum(6)">6</button></td>
                    <td><button onclick="startOperation('x')">x</button></td>
                </tr>
                <tr>
                    <td><button onclick="displayNum(1)">1</button></td>
                    <td><button onclick="displayNum(2)">2</button></td>
                    <td><button onclick="displayNum(3)">3</button></td>
                    <td><button onclick="startOperation('-')">-</button></td>
                </tr>
                <tr>
                    <td><button onclick="displayNum('.')">.</button></td>
                    <td><button onclick="displayNum(0)">0</button></td>
                    <td colspan="2"><button class="button_double" onclick="startOperation('+')">+</button></td>

                </tr>
            </table>
        </div>
    </body>
</html>

The java script external file in (js folder)
js/myjs.js

var myObj = "Hello World";
var myNum = 102;
var myArr = [];

function onOptionChange() {
    var c = document.getElementById("opt").value;
    alert(c + " selected!!!!");
}

function onPageLoad() {
    var myLocalObj = "Im Fine!!!";
    console.log(myObj + "," + myLocalObj + "," + myNum);
}

function onInputCompleted() {
    console.log(document.getElementById("ipfield").value);
}

function onAgree(event) {
    //alert(event.checked);
    //var imgHtml = '<img src="image/kalam.jpg" alt="Kalam" width="200" />';
    var imgHtml = "<img src=\"image/kalam.jpg\" alt=\"Kalam\" width=\"200\" />";
    if (event.checked) {
        document.getElementById("imageholder").innerHTML = imgHtml;
    } else {
        document.getElementById("imageholder").innerHTML = "";
    }
}

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com