This content originally appeared on DEV Community and was authored by lanor Rigby
js`// Updated heroes array with new characters
const characters = [
["Clark", "Kent", 1978, "Superman", true, 700],
["Bruce", "Wayne", 1975, "Batman", true, 850],
["Diana", "Prince", 1984, "Wonder Woman", true, 780],
["Alfred", "Pennyworth", 1950, "Butler", false, 300],
["Lucius", "Fox", 1965, "Inventor", false, 400]
];
// Define the HeroPerson class
class HeroPerson {
constructor(firstName, lastName, birthYear, role, isSuper, valueRate) {
this.firstName = firstName;
this.lastName = lastName;
this.birthYear = birthYear;
this.role = role;
this.isSuper = isSuper;
this.valueRate = valueRate;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
getYearsSinceBirth() {
let currentYear = new Date().getFullYear();
return currentYear - this.birthYear;
}
getTotalValue() {
let years = this.getYearsSinceBirth();
if (years > 50) {
return this.valueRate * 1.5 * years;
} else {
return this.valueRate * years;
}
}
}
// Create an array of HeroPerson objects
const characterObjects = [];
for (let i = 0; i < characters.length; i++) {
let c = characters[i];
characterObjects.push(new HeroPerson(c[0], c[1], c[2], c[3], c[4], c[5]));
}
// Get the divs from the HTML
let leftColumn = document.getElementById("theLeft");
let rightColumn = document.getElementById("theRight");
// Loop through each character and display their details
for (let i = 0; i < characterObjects.length; i++) {
let hero = characterObjects[i];
let fullName = hero.getFullName();
let age = hero.getYearsSinceBirth();
let total = hero.getTotalValue().toLocaleString();
let infoParagraph = `${fullName} aka the ${hero.role} was born ${age} years ago.<br/>
He/she is worth a total of: $${total}.
`;
if (hero.isSuper) {
rightColumn.innerHTML += infoParagraph;
} else {
leftColumn.innerHTML += infoParagraph;
}
}
html<!-- File: parta/parta.html -->
<!DOCTYPE html>
Hero Info Display
<!-- Assuming style.css is in the same folder -->
Hero Database
<div id="container">
<div id="theLeft"></div>
<div id="theRight"></div>
</div>
<script src="../js/parta.js"></script>
`
This content originally appeared on DEV Community and was authored by lanor Rigby
lanor Rigby | Sciencx (2025-04-07T21:17:38+00:00) array of arrays js.. thoughts?. Retrieved from https://www.scien.cx/2025/04/07/array-of-arrays-js-thoughts/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.