markdown HTML.CSS.JS.DynamicTablewJS.ex3

Posted 2021-05-05

body { display:flex;
}

div
{
    margin: 5px;
}
#cForm, #moreControls
{
    min-width:300px;
    border-right: 1px solid grey;
    text-align:center;
}
#cList
{
    min-width: 400px;
    border-right:1px solid grey;
    text-align:center;
}

p, form
{
    text-align:center;
}
table
{
    min-width:350px;
}
h3{
    text-align:center;
}
tr:nth-child(2n){
    background:#f2f2f2;
}
td{
    text-align:left;
}

var testName; 
var contactList;
var currentListPortion; // -1 menas unlimited; otherwise means start list row to show
var addedIndex = 1;

class Contact
{
    constructor (name, phone)
    {
        this.name = name;
        this.number = phone;
        
    }
}

class ContMan
{
    constructor ()
    {
        this.contacts = [];
    }
    Add(item)
    {
        this.contacts.push(item);
    }
    List(filter, limit)
    {
        let firstPosition, lastPosition;
        if (currentListPortion == -1)   //show the whole list
        {
            firstPosition = 0;
            lastPosition = this.contacts.length;
        }
        else
        {
            firstPosition = currentListPortion;
            lastPosition = currentListPortion + 10;
            //currentListPortion += 10;
        }

        console.log("List: currentListPortion = " + currentListPortion);

        var myList = "<table>";
        for (let i = firstPosition; i < lastPosition; i++)
        {
            if (filter ==="" || this.contacts[i].name.toUpperCase().includes(String(filter).toUpperCase()) || this.contacts[i].number.toUpperCase().includes(String(filter).toUpperCase()))
            {
                myList += "<tr> <td>" + this.contacts[i].name + "</td> <td>" + this.contacts[i].number + "</td>";
            }
        };
        myList += "</table>";
        return (myList);
    }
}





function AddToList()
{
    let newItem = new Contact(document.getElementById("name").value, document.getElementById("number").value);
    if((newItem.name=="") || (newItem.phone ==""))
    {
        alert("name and number can't be empty");
    }
    else
    {
        contlist.Add(newItem);
        document.getElementById("gList").innerHTML = contlist.List("");
    }
    document.getElementById("filter").value = "";
}

function AddTenRows()
{
    for (var i = 0; i < 10; i++)
    {
        let newItem = new Contact((addedIndex++).toString(), Math.random().toString())
        contlist.Add(newItem);
    }

    currentListPortion = -1;
    document.getElementById("limitX").checked = false;

    document.getElementById("gList").innerHTML = contlist.List("");
    document.getElementById("filter").value = "";
}



function Filter() {
    console.log("Filter started");

    let f = document.getElementById("filter").value;
    console.log(f);
    if ((typeof (f) == undefined || f === null || f == "")) {
        f = "";
    }
    document.getElementById("gList").innerHTML = contlist.List(f);

}


window.onload = function init() {

    contlist = new (ContMan);

    var newItem = new Contact("Name 1", "number1");
    contlist.Add(newItem);
    var newItem2 = new Contact("Name 2", "number2");
    contlist.Add(newItem2);
    document.getElementById("limitX").checked == false;
    currentListPortion = -1;

    document.getElementById("gList").innerHTML = contlist.List("");
}

function CheckBoxChanged()
{
    console.log("checked: " + document.getElementById("limitX").checked);
    document.getElementById("filter").value = "";

    if (document.getElementById("limitX").checked == true)
    {
        currentListPortion = 0;
        document.getElementById("gList").innerHTML = contlist.List(""); // , "limited");
    }
    else
    {
        currentListPortion = -1;
        document.getElementById("gList").innerHTML = contlist.List("");
    }

}

function NextScreen(i)
{
    if (currentListPortion > -1)    //if limited
    {

        console.log("currentListPortion: " + currentListPortion);
        currentListPortion += parseInt(i);

        console.log("new currentListPortion: " + currentListPortion + " " + contlist.contacts.length);

        currentListPortion = Math.min(currentListPortion, contlist.contacts.length - 10);
        currentListPortion = Math.max(0, currentListPortion);

        console.log("calculated currentListPortion" + currentListPortion);

        document.getElementById("gList").innerHTML = contlist.List(""); // , "limited");

    }
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <link href="StyleSheet.css" rel="stylesheet" />
    <script src="JavaScript.js"></script>
</head>
<body>
    <div id="cForm">
        <h3>Add a new contact</h3>
            Name : <input id="name" type="text" name="name">
            <br><br />
            Number : <input id="number" type="text" name="number">
            <br><br>
        <button type="button" onclick="AddToList()">Add Contact</button>
    </div>

    <div id="cList">
        <h3>Contact list</h3>
        Filter for : <input id="filter" type="text">
        <button type="button" onclick="Filter()">Filter</button>
        <br /><br />
        <table>
                <tr>
                    <th>Name</th>
                    <th>Number</th>
                </tr>
        </table>
        <div id="gList">
        </div>
    </div>

    <div id="moreControls">
        <br /><br />
        <button type="button" onclick="AddTenRows()">Add 10 more rows to the list</button>
        <br /><br />
            <input type="checkbox" name="newsletter" id="limitX" onchange="CheckBoxChanged()">
            <label for="limitRows">Show only 10 rows on the screen</label>
            <br /><br />
            <button type="button" onclick="NextScreen(-10)">&lt;&lt;</button>
            <button type="button" onclick="NextScreen(10)">&gt;&gt;</button>
    </div>

</body>
</html>

HTML.CSS.JS.DynamicTablewJS.ex3
-------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/OoKrrO) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/OoKrrO/license).