My Goal is to create a super class Vehicle with properties NoOfWheels, NoOfSeats and Details() and then create three subclasses, bike with additional property handle, car with additional property Model and Entertainment System and truck with additional property Container. After that I have to override method Details() for all the child classes. After that create a function named load() and create one object of each class and final output should be displayed in HTML file
My Codes By Far
JS file
class Vehicle {
constructor(NoOfWheels, NoOfSeats) {
this._NoOfWheels = NoOfWheels;
this._NoOfSeats = NoOfSeats;
}
Details() {
return (Wheels: ${this.NoOfWheels} Seats: ${this.NoOfSeats});
}
get NoOfWheels() {
return this._NoOfWheels;
}
get NoOfSeats() {
return this._NoOfSeats;
}
}
class Bike extends Vehicle {
constructor(NoOfWheels, NoOfSeats, handle) {
super(NoOfWheels, NoOfSeats);
this._handle = handle;
}
Details() {
return (Wheels: ${this.NoOfWheels} Seats: ${this.NoOfSeats} Handle: ${this._handle});
}
}
class Car extends Vehicle {
constructor(Model, EntertainmentSystem, NoOfWheels, NoOfSeats,) {
super(NoOfWheels, NoOfSeats);
this._Model = Model;
this._EntertainmentSystem = EntertainmentSystem;
} Details() {
return (`Car Model: ${this._Model} Entertainment: ${this._EntertainmentSystem} Wheels: ${this.NoOfWheels} Seats: ${this.NoOfSeats}`);
}
}
class Truck extends Vehicle {
constructor(NoOfWheels, NoOfSeats, Container) {
super(NoOfWheels, NoOfSeats);
this._Container = Container;
}
Details() {
return (Wheels: ${this.NoOfWheels} Seats: ${this.NoOfSeats} Container: ${this._Container});
}
}
let hayabusa = {
wheels: “2”,
seats: “1”,
handle: “short”
}
let SpaceX = {
carModel: “Tesla”,
EntertainmentSystem: “Bose”,
Wheels: “4”,
Seats: “2”
}
let suka = {
wheels: “6”,
seats: “2”,
container: “20m”
}
document.getElementById(“wheels”).innerHTML = Wheels: ${hayabusa.wheels}
document.getElementById(“Seats”).innerHTML = Seats: ${hayabusa.seats}
document.getElementById(“handle”).innerHTML = Handle: ${hayabusa.handle}
document.getElementById(“CarModel”).innerHTML = Car Model: ${SpaceX.carModel}
document.getElementById(“Entertainment”).innerHTML = Entertainment System: ${SpaceX.EntertainmentSystem}
document.getElementById(“CarWheels”).innerHTML = Wheels: ${SpaceX.Wheels}
document.getElementById(“CarSeats”).innerHTML = Seats: ${SpaceX.Seats}
document.getElementById(“TruckWheels”).innerHTML = Wheels: ${suka.wheels}
document.getElementById(“TruckSeats”).innerHTML = Seats: ${suka.seats}
document.getElementById(“Container”).innerHTML = Container: ${suka.container}
HTML file
Vehicle Details
Bike Details |
Car Details |
Truck Details |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 4 | 5 | 6 |
| 5 |