JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<div class="bold">Show All Added Entries</div>
<div id="divAll"></div>
<br />
<div class="bold">Remove an Entry</div>
<div id="divRemove"></div>
<br />
<div class="bold">Entries Filtered by the LastName of &#34;Kuehn&#34;</div>
<div id="divFilter"></div>
<br />
<div class="bold">Sort by Age Ascending</div>
<div id="divSortAsc"></div>
<br />
<div class="bold">Sort by First Name Descending</div>
<div id="divSortDesc"></div>

CSS

.bold{font-weight:bold;}

JavaScript

// ********************************************
// Declare the Person class
// ********************************************
function Person ()
{
    //Used getters and setters to ensure data integrity (i.e., age, zipcode)
    
    //private variables
    var firstname;
    var lastname;
    var age;
    var zipcode;
    
    //public functions
    this.setFirstname = setFirstname;
    this.getFirstname = getFirstname;
    this.setLastname = setLastname;
    this.getLastname = getLastname;
    this.getFullname = getFullname;
    this.setAge = setAge;
    this.getAge = getAge;
    this.setZipcode = setZipcode;
    this.getZipcode = getZipcode;
    this.getValue = getValue;
    
    
    //adding the convenience to set properties when instantiating
    if(arguments.length >= 1)
    {
        setFirstname(arguments[0]);
    }
    if(arguments.length >= 2)
    {
        setLastname(arguments[1]);
    }
    if(arguments.length >= 3)
    {
        setAge(arguments[2]);
    }
    if(arguments.length = 4)
    {
        setZipcode(arguments[3]);
    }
    
    
    
    //firstname functions
    function setFirstname(val)
    {
        firstname = val;
    }
    function getFirstname()
    {
        return firstname;
    }
    
    //lastname functions
    function setLastname(val)
    {
        lastname = val;
    }
    function getLastname()
    {
        return lastname;
    }
    
    //fullname function
    function getFullname()
    {
        return firstname + " " + lastname;
    }
    
    //age functions
    function setAge(val)
    {
        age = parseInt(val, 10);
    }
    function getAge()
    {
        return age;
    }
    
    //zipcode functions
    function setZipcode(val)
    {
        var pattern = new RegExp("^[0-9]{5}(?:[-][0-9]{4})?$");
        if(pattern.test(val)) 
        {
           zipcode = val;
        }
    }
    function getZipcode()
    {
        return zipcode;
    }

    //generic get function
    function getValue(prop)
    {
       ...