<html>
<head>
<style>
table {
border: 1px solid black;
}
th {
border: 1px dotted black;
height: 40px;
padding: 4px;
background-color: orange;
color: white;
}
td {
border: 1px dotted black;
height: 40px;
padding: 4px;
}
button {
width: 130px;
background-color: orange;
color: white;
border: 1px solid orange;
cursor: pointer;
padding: 4px;
border-radius: 4px;
}
button:hover {
color: orangered;
font-weight: bold;
border: 2px solid orangered;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
</style>
<script>
function InitializeData() {
employeeList.push(new EmployeeData("BDI-001", "Ethan Thompson", NewDate(2006, 11, 23)));
employeeList.push(new EmployeeData("BDI-002", "Ava Williams", NewDate(2010, 11, 26)));
employeeList.push(new EmployeeData("BDI-003", "Benjamin Davis", NewDate(2007, 10, 24)));
employeeList.push(new EmployeeData("BDI-004", "Olivia Martinez", NewDate(2002, 8, 19)));
employeeList.push(new EmployeeData("BDI-005", "Liam Garcia", NewDate(1998, 7, 16)));
employeeList.push(new EmployeeData("BDI-006", "Mia Smith", NewDate(1996, 6, 14)));
employeeList.push(new EmployeeData("BDI-007", "Samuel Johnson", NewDate(2010, 11, 26)));
employeeList.push(new EmployeeData("BDI-008", "Sophia Harris", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-009", "Daniel Lee", NewDate(1982, 1, 2)));
employeeList.push(new EmployeeData("BDI-010", "Charlotte Turner", NewDate(2003, 9, 20)));
employeeList.push(new EmployeeData("BDI-011", "Henry Martin", NewDate(1994, 5, 13)));
employeeList.push(new EmployeeData("BDI-012", "Amelia Lewis", NewDate(1985, 2, 5)));
employeeList.push(new EmployeeData("BDI-013", "Jackson Robinson", NewDate(1981, 1, 2)));
employeeList.push(new EmployeeData("BDI-014", "Harper Clark", NewDate(1996, 6, 15)));
employeeList.push(new EmployeeData("BDI-015", "Lucas King", NewDate(1984, 2, 5)));
employeeList.push(new EmployeeData("BDI-016", "Evelyn Hall", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-017", "Alexander Young", NewDate(1986, 3, 6)));
employeeList.push(new EmployeeData("BDI-018", "Grace Turner", NewDate(1980, 1, 1)));
employeeList.push(new EmployeeData("BDI-019", "William Adams", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-020", "Victoria Baker", NewDate(2006, 10, 23)));
employeeList.push(new EmployeeData("BDI-021", "James Hall", NewDate(1996, 6, 15)));
employeeList.push(new EmployeeData("BDI-022", "Zoe Lewis", NewDate(2010, 11, 27)));
employeeList.push(new EmployeeData("BDI-023", "Benjamin Reed", NewDate(1990, 4, 10)));
employeeList.push(new EmployeeData("BDI-024", "Mia Collins", NewDate(1997, 7, 16)));
employeeList.push(new EmployeeData("BDI-025", "Samuel White", NewDate(1990, 4, 9)));
employeeList.push(new EmployeeData("BDI-026", "Ava Phillips", NewDate(1980, 1, 1)));
employeeList.push(new EmployeeData("BDI-027", "David Rodriguez", NewDate(1986, 3, 6)));
employeeList.push(new EmployeeData("BDI-028", "Lily Green", NewDate(1980, 1, 1)));
employeeList.push(new EmployeeData("BDI-029", "Henry Turner", NewDate(2010, 11, 26)));
employeeList.push(new EmployeeData("BDI-030", "Chloe Smith", NewDate(2000, 8, 18)));
employeeList.push(new EmployeeData("BDI-031", "Michael Campbell", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-032", "Emily Anderson", NewDate(2011, 11, 27)));
employeeList.push(new EmployeeData("BDI-033", "John Hernandez", NewDate(2006, 10, 23)));
employeeList.push(new EmployeeData("BDI-034", "Abigail Scott", NewDate(2008, 10, 25)));
employeeList.push(new EmployeeData("BDI-035", "Daniel Perez", NewDate(1998, 7, 16)));
employeeList.push(new EmployeeData("BDI-036", "Ella Collins", NewDate(1990, 4, 9)));
employeeList.push(new EmployeeData("BDI-037", "Matthew Sanchez", NewDate(1981, 1, 2)));
employeeList.push(new EmployeeData("BDI-038", "Scarlett Taylor", NewDate(1995, 6, 13)));
employeeList.push(new EmployeeData("BDI-039", "Samuel Mitchell", NewDate(1996, 6, 14)));
employeeList.push(new EmployeeData("BDI-040", "Sophia Nelson", NewDate(2008, 10, 25)));
employeeList.push(new EmployeeData("BDI-041", "David Brown", NewDate(2005, 9, 22)));
employeeList.push(new EmployeeData("BDI-042", "Harper Johnson", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-043", "Christopher Ross", NewDate(2006, 9, 22)));
employeeList.push(new EmployeeData("BDI-044", "Amelia Moore", NewDate(1993, 5, 12)));
employeeList.push(new EmployeeData("BDI-045", "Logan Mitchell", NewDate(1991, 5, 10)));
employeeList.push(new EmployeeData("BDI-046", "Elizabeth Cooper", NewDate(1983, 2, 3)));
employeeList.push(new EmployeeData("BDI-047", "Andrew Foster", NewDate(1994, 6, 13)));
employeeList.push(new EmployeeData("BDI-048", "Madison Turner", NewDate(1996, 6, 14)));
employeeList.push(new EmployeeData("BDI-049", "Benjamin Flores", NewDate(1997, 7, 15)));
employeeList.push(new EmployeeData("BDI-050", "Penelope Butler", NewDate(2005, 9, 22)));
employeeList.push(new EmployeeData("BDI-051", "Samuel Scott", NewDate(1997, 7, 16)));
employeeList.push(new EmployeeData("BDI-052", "Emily Nelson", NewDate(1999, 7, 17)));
employeeList.push(new EmployeeData("BDI-053", "Joseph Rivera", NewDate(1993, 5, 12)));
employeeList.push(new EmployeeData("BDI-054", "Avery Turner", NewDate(1985, 2, 5)));
employeeList.push(new EmployeeData("BDI-055", "William Cox", NewDate(1996, 6, 15)));
employeeList.push(new EmployeeData("BDI-056", "Sofia Garcia", NewDate(2007, 10, 24)));
employeeList.push(new EmployeeData("BDI-057", "Ethan Baker", NewDate(1999, 7, 17)));
employeeList.push(new EmployeeData("BDI-058", "Grace Adams", NewDate(1989, 4, 8)));
employeeList.push(new EmployeeData("BDI-059", "Daniel Coleman", NewDate(1991, 5, 10)));
employeeList.push(new EmployeeData("BDI-060", "Harper Jenkins", NewDate(1997, 7, 16)));
employeeList.push(new EmployeeData("BDI-061", "Aiden Phillips", NewDate(1989, 4, 9)));
employeeList.push(new EmployeeData("BDI-062", "Mia Turner", NewDate(2009, 11, 26)));
employeeList.push(new EmployeeData("BDI-063", "Benjamin Lewis", NewDate(2005, 9, 22)));
employeeList.push(new EmployeeData("BDI-064", "Chloe Martinez", NewDate(1993, 5, 12)));
employeeList.push(new EmployeeData("BDI-065", "Samuel Adams", NewDate(2011, 11, 27)));
employeeList.push(new EmployeeData("BDI-066", "Lily Turner", NewDate(1994, 6, 13)));
employeeList.push(new EmployeeData("BDI-067", "Alexander Peterson", NewDate(1990, 4, 10)));
employeeList.push(new EmployeeData("BDI-068", "Amelia Reed", NewDate(1984, 2, 5)));
employeeList.push(new EmployeeData("BDI-069", "Michael White", NewDate(2010, 11, 26)));
employeeList.push(new EmployeeData("BDI-070", "Olivia Turner", NewDate(2006, 10, 23)));
employeeList.push(new EmployeeData("BDI-071", "James Hernandez", NewDate(2002, 8, 19)));
employeeList.push(new EmployeeData("BDI-072", "Zoe Anderson", NewDate(2003, 9, 20)));
employeeList.push(new EmployeeData("BDI-073", "William Collins", NewDate(1996, 6, 14)));
employeeList.push(new EmployeeData("BDI-074", "Emily Roberts", NewDate(2007, 10, 24)));
employeeList.push(new EmployeeData("BDI-075", "Jackson Lewis", NewDate(1980, 1, 1)));
employeeList.push(new EmployeeData("BDI-076", "Grace Carter", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-077", "David Martinez", NewDate(1984, 2, 5)));
employeeList.push(new EmployeeData("BDI-078", "Ava Reed", NewDate(2008, 10, 25)));
employeeList.push(new EmployeeData("BDI-079", "Henry Thompson", NewDate(1986, 3, 6)));
employeeList.push(new EmployeeData("BDI-080", "Sophia Turner", NewDate(1987, 3, 7)));
employeeList.push(new EmployeeData("BDI-081", "Christopher Lee", NewDate(1997, 7, 16)));
employeeList.push(new EmployeeData("BDI-082", "Charlotte King", NewDate(2002, 8, 19)));
employeeList.push(new EmployeeData("BDI-083", "Samuel Campbell", NewDate(1995, 6, 13)));
employeeList.push(new EmployeeData("BDI-084", "Harper Turner", NewDate(1984, 2, 5)));
employeeList.push(new EmployeeData("BDI-085", "Benjamin Wright", NewDate(1983, 2, 3)));
employeeList.push(new EmployeeData("BDI-086", "Mia Davis", NewDate(1985, 2, 5)));
employeeList.push(new EmployeeData("BDI-087", "Michael Turner", NewDate(1998, 7, 16)));
employeeList.push(new EmployeeData("BDI-088", "Elizabeth Hall", NewDate(2001, 8, 18)));
employeeList.push(new EmployeeData("BDI-089", "Ethan Green", NewDate(1992, 5, 11)));
employeeList.push(new EmployeeData("BDI-090", "Lily Martinez", NewDate(2002, 8, 19)));
employeeList.push(new EmployeeData("BDI-091", "Alexander Scott", NewDate(2002, 8, 20)));
employeeList.push(new EmployeeData("BDI-092", "Abigail Turner", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-093", "Daniel Adams", NewDate(1983, 2, 4)));
employeeList.push(new EmployeeData("BDI-094", "Grace Johnson", NewDate(2010, 11, 26)));
employeeList.push(new EmployeeData("BDI-095", "William Turner", NewDate(1998, 7, 16)));
employeeList.push(new EmployeeData("BDI-096", "Mia Moore", NewDate(2007, 10, 24)));
employeeList.push(new EmployeeData("BDI-097", "James Johnson", NewDate(2010, 11, 26)));
employeeList.push(new EmployeeData("BDI-098", "Zoe White", NewDate(1992, 5, 11)));
employeeList.push(new EmployeeData("BDI-099", "Samuel Smith", NewDate(1994, 6, 13)));
employeeList.push(new EmployeeData("BDI-100", "Emily Turner", NewDate(2008, 10, 25)));
employeeList.push(new EmployeeData("BDI-101", "Benjamin Mitchell", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-102", "Ava Turner", NewDate(1989, 4, 9)));
employeeList.push(new EmployeeData("BDI-103", "Christopher Turner", NewDate(1997, 7, 16)));
employeeList.push(new EmployeeData("BDI-104", "Sophia Davis", NewDate(2003, 8, 20)));
employeeList.push(new EmployeeData("BDI-105", "David Scott", NewDate(1983, 2, 3)));
employeeList.push(new EmployeeData("BDI-106", "Harper Martinez", NewDate(2006, 10, 23)));
employeeList.push(new EmployeeData("BDI-107", "Henry Turner", NewDate(1982, 2, 3)));
employeeList.push(new EmployeeData("BDI-108", "Olivia Adams", NewDate(1997, 7, 16)));
employeeList.push(new EmployeeData("BDI-109", "Alexander Reed", NewDate(1984, 2, 4)));
employeeList.push(new EmployeeData("BDI-110", "Amelia Turner", NewDate(2004, 9, 21)));
employeeList.push(new EmployeeData("BDI-111", "Samuel Turner", NewDate(2002, 8, 20)));
employeeList.push(new EmployeeData("BDI-112", "Grace Hernandez", NewDate(2003, 8, 20)));
employeeList.push(new EmployeeData("BDI-113", "Michael Collins", NewDate(1983, 2, 3)));
employeeList.push(new EmployeeData("BDI-114", "Mia Turner", NewDate(1984, 2, 4)));
employeeList.push(new EmployeeData("BDI-115", "Benjamin Turner", NewDate(1980, 1, 1)));
employeeList.push(new EmployeeData("BDI-116", "Emily Martin", NewDate(1999, 7, 17)));
employeeList.push(new EmployeeData("BDI-117", "William Nelson", NewDate(1994, 6, 13)));
employeeList.push(new EmployeeData("BDI-118", "Ava Anderson", NewDate(2000, 8, 18)));
employeeList.push(new EmployeeData("BDI-119", "James Turner", NewDate(1990, 4, 9)));
employeeList.push(new EmployeeData("BDI-120", "Charlotte Lewis", NewDate(2005, 9, 22)));
employeeList.push(new EmployeeData("BDI-121", "Samuel Garcia", NewDate(2008, 10, 25)));
employeeList.push(new EmployeeData("BDI-122", "Olivia Carter", NewDate(2001, 8, 19)));
employeeList.push(new EmployeeData("BDI-123", "Alexander Turner", NewDate(2004, 9, 21)));
}
function InitializeUI() {
document.getElementById("lblToday").innerHTML = "Today : " + dtmToday.ToString();
uiList.push(new UiData("lblItemOfNo1", "lblItemOfId1", "lblItemOfName1", "lblItemOfBirthday1", "lblItemOfAge1"));
uiList.push(new UiData("lblItemOfNo2", "lblItemOfId2", "lblItemOfName2", "lblItemOfBirthday2", "lblItemOfAge2"));
uiList.push(new UiData("lblItemOfNo3", "lblItemOfId3", "lblItemOfName3", "lblItemOfBirthday3", "lblItemOfAge3"));
uiList.push(new UiData("lblItemOfNo4", "lblItemOfId4", "lblItemOfName4", "lblItemOfBirthday4", "lblItemOfAge4"));
uiList.push(new UiData("lblItemOfNo5", "lblItemOfId5", "lblItemOfName5", "lblItemOfBirthday5", "lblItemOfAge5"));
}
Date.prototype.ToString = function () {
return this.getFullYear().ToString() + "-" +
(this.getMonth() + 1).ToString() + "-" +
this.getDate().ToString();
}
Number.prototype.ToString = function () {
if (this >= 0 && this <= 9)
return "0" + String(this);
else
return String(this);
}
function NewDate(year, month, date) {
return new Date(year, month - 1, date);
}
const dtmToday = NewDate(2023, 4, 12);
const employeeList = [];
const uiList = [];
function EmployeeData(szId, szName, dtmBirthday) {
this.szId = szId == undefined ? "" : szId;
this.szName = szName == undefined ? "" : szName;
this.dtmBirthday = dtmBirthday == undefined ? NewDate(1900, 1, 1) : dtmBirthday;
}
function UiData(lblNo, lblId, lblName, lblBirthday, lblAge) {
this.lblNo = document.getElementById(lblNo);
this.lblId = document.getElementById(lblId);
this.lblName = document.getElementById(lblName);
this.lblBirthday = document.getElementById(lblBirthday);
this.lblAge = document.getElementById(lblAge);
}
function DoInitialize() {
InitializeData();
InitializeUI();
btnFirst_Click();
}
///////////////////////////
// COMPLETE THE FUNCTION // // BEGIN // ///////////////////////////
function btnFirst_Click() {
currentIndex = 0
updateTable()
}
function btnPreviousPage_Click() {
const minData = Math.min(employeeList.length + 5, 0)
if (currentIndex >= minData) {
currentIndex = Math.min(currentIndex, currentIndex + 5, minData)
updateTable()
} }
function btnPrevious_Click() {
if (currentIndex > 0) {
currentIndex--
updateTable()
} }
function btnNext_Click() {
if (currentIndex < employeeList.length - 5) {
currentIndex++
updateTable()
} }
function btnNextPage_Click() {
const maxData = Math.max(employeeList.length - 5, 0)
if (currentIndex < maxData) {
currentIndex = Math.min(currentIndex + 5, maxData)
updateTable()
} }
function btnLast_Click() {
currentIndex = employeeList.length - 5
if (currentIndex < 0) {
currentIndex = 0
}
updateTable()
}
// NOTE : YOU CAN CREATE OTHER FUNCTION OR VARIABLE HERE
// console.log(employeeList) let currentIndex = 0
function updateTable() {
for (let i = 0; i < 5; i++) {
const employeeIndex = currentIndex + i
const no = employeeIndex + 1
let year = dtmToday.getFullYear() - employeeList[employeeIndex].dtmBirthday.getFullYear()
const month = dtmToday.getMonth() - employeeList[employeeIndex].dtmBirthday.getMonth()
const day = dtmToday.getDay() - employeeList[employeeIndex].dtmBirthday.getDay()
if (employeeIndex < employeeList.length) {
const employee = employeeList[employeeIndex]
uiList[i].lblNo.innerHTML = no.ToString()
uiList[i].lblId.innerHTML = employee.szId
uiList[i].lblName.innerHTML = employee.szName
uiList[i].lblBirthday.innerHTML = employee.dtmBirthday.ToString()
if (month < 0 || (month === 0 && day < 0)) {
year--
}
uiList[i].lblAge.innerHTML = year.toString() + " Years"
} else {
uiList[i].lblNo.innerHTML = ""
uiList[i].lblId.innerHTML = ""
uiList[i].lblName.innerHTML = ""
uiList[i].lblBirthday.innerHTML = ""
uiList[i].lblAge.innerHTML = ""
}
}
}
updateTable()
///////////////////////////
// END // ///////////////////////////
</script>
</head>
<body onload="DoInitialize()">
<span id="lblToday"></span>
<Table>
<tr>
<th>NO</td>
<th>ID</td>
<th>NAME</td>
<th>BIRTHDAY</td>
<th>AGE</td>
</tr>
<tr>
<td id="lblItemOfNo1" class="right"></td>
<td id="lblItemOfId1"></td>
<td id="lblItemOfName1"></td>
<td id="lblItemOfBirthday1" class="center"></td>
<td id="lblItemOfAge1" class="center"></td>
</tr>
<tr>
<td id="lblItemOfNo2" class="right"></td>
<td id="lblItemOfId2"></td>
<td id="lblItemOfName2"></td>
<td id="lblItemOfBirthday2" class="center"></td>
<td id="lblItemOfAge2" class="center"></td>
</tr>
<tr>
<td id="lblItemOfNo3" class="right"></td>
<td id="lblItemOfId3"></td>
<td id="lblItemOfName3"></td>
<td id="lblItemOfBirthday3" class="center"></td>
<td id="lblItemOfAge3" class="center"></td>
</tr>
<tr>
<td id="lblItemOfNo4" class="right"></td>
<td id="lblItemOfId4"></td>
<td id="lblItemOfName4"></td>
<td id="lblItemOfBirthday4" class="center"></td>
<td id="lblItemOfAge4" class="center"></td>
</tr>
<tr>
<td id="lblItemOfNo5" class="right"></td>
<td id="lblItemOfId5"></td>
<td id="lblItemOfName5"></td>
<td id="lblItemOfBirthday5" class="center"></td>
<td id="lblItemOfAge5" class="center"></td>
</tr>
<tr>
<td colspan="5">
<button onclick="btnFirst_Click()">First</button>
<button onclick="btnPreviousPage_Click()">Previous Page</button>
<button onclick="btnPrevious_Click()">Previous</button>
<button onclick="btnNext_Click()">Next</button>
<button onclick="btnNextPage_Click()">Next Page</button>
<button onclick="btnLast_Click()">Last</button>
</td>
</tr>
<table>
</body>
</html>