KidsTextArea1 Example

KidsTextArea1 Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- KidsTextArea Example 
Display kids information in
three textarea controls -->

<html lang="en">
    <meta charset="utf-8">
    <head>
        <script src="kidsdata.js"></script>
        <script src="script.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <h1>KidsTextArea Example</h1>

        <label for="output1">
            All kids from kidsdata:
        </label><br>
        <textarea id="output1"></textarea><br><br>

        <label for="output2">
            All girls from kidsdata:
        </label><br>
        <textarea id="output2"></textarea><br><br>

        <label for="output3">
            Gender and age of Billy from kidsdata:
        </label><br> 
        <input type="text" id="output3">
    </body>
</html>

CSS Page -- styles.css

 /* KidsTextArea Example
Display kids information in
three textarea controls */

* { font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    background-color: #e0e0ff;
    color: black; }

textarea { 
    overflow-y: scroll;
    resize: none; 
    width: 250px;
    height: 150px; 
    color: maroon; }

input { 
    width: 200px;
    height: 25px;
    color: maroon; }

Script File -- script.js

 // KidsTextArea Example
// Display kids information in
// three textarea controls

function getAllKidsData( ) {
    var output = "";
    var kidsData = JSON.parse(kids);
    for(obj of kidsData) {
        output += `${obj.name} ${obj.gender} `; 
        output += `${obj.age}\n`;
    }
    return output;
}

function getGirlsData( ) {
    var output = "";
    var kidsData = JSON.parse(kids);
    for(obj of kidsData) {
        if(obj.gender == "F") {
            output += `${obj.name} ${obj.gender} `; 
            output += `${obj.age}\n`;
        }
    }
    return output;
}

function getBillyData( ) {
    var output = "";
    var kidsData = JSON.parse(kids);
    for(obj of kidsData) {
        if (obj.name == "Billy") {
            output = obj.gender + " " +
                obj.age;
            break;
        }
    }
    return output;
}

function init( ) {
    var txtAreaAll = 
        document.getElementById("output1");
    txtAreaAll.value = getAllKidsData( );
    var txtAreaGirls = 
        document.getElementById("output2");
    txtAreaGirls.value = getGirlsData( );
    var txtAreaBilly = 
        document.getElementById("output3");
    txtAreaBilly.value = getBillyData( ); 
}

window.addEventListener("load", init);

Data File -- kidsdata.js

kidsdata.js