index.js
import anotherName, { getHeader, gId } from "./utilities.js";
import { createStudentsTable } from "./creator.js";
const students = [
{ school_id:"001", name: "Kulas", course: "BSCRIM", age: 21 },
{ school_id:"004", name: "Ana", course: "BSIT", age: 20 },
{ school_id:"007", name: "Ben", course: "BSCE", age: 22 },
{ school_id:"002", name: "Mel", course: "BSIT", age: 21 },
{ school_id:"009", name: "Pitok", course: "BSIT", age: 25 },
];
document.addEventListener("DOMContentLoaded", () =>{
const hdr = gId("header-text");
hdr.innerText = `${getHeader()} - ${anotherName(3,5)}`;
displayStudents();
});
//display students in a table thru module from creator.js
const displayStudents = () =>{
const mainDiv = gId("main-div");
mainDiv.appendChild(createStudentsTable(students));
}
utilities.js
const add = (x, y) =>{
return x + y;
}
export const getHeader = () => {
return "JS MODULE";
}
export const create = (element) =>{
return document.createElement(element);
}
export const gId = (id) =>{
return document.getElementById(id);
}
export default add;
creator.js
import { create } from "./utilities.js";
export const createStudentsTable = (students) => {
const table = create("table");
//table header
const thead = create("thead");
thead.innerHTML = `
<tr>
<th>School Id</th>
<th>NAME</th>
<th>COURSE</th>
<th>AGE</th>
</tr>
`;
table.appendChild(thead);
//table body
const tbody = create("tbody");
students.forEach(student => {
let tr = create("tr");
tr.innerHTML = `
<td>${student.school_id}</td>
<td>${student.name}</td>
<td>${student.course}</td>
<td>${student.age}</td>
`;
tbody.appendChild(tr);
});
table.appendChild(tbody);
return table;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Modules</title>
<script type="module" src="index.js"></script>
</head>
<body>
<div id="header-div"><h1 id="header-text"></h1></div>
<div id="main-div"> </div>
<div id="footer-div"></div>
</body>
</html>
No comments:
Post a Comment