As someone new to coding, I am eager to tackle the following challenge:
I have designed 3 distinct classes. The primary class is the Place class, followed by a restaurant class and an events class. Both the restaurant class and events class inherit core properties from the Place class while also possessing additional properties unique to each of them. Each class includes a display() function that showcases their individual content. To populate my page, I have created two objects per class which are stored in an array to be iterated through for display.
The class with the display function is outlined below:
class Place {
Name = "";
City = "";
ZIP = "";
Address = "";
Image = "";
constructor(Name, City, ZIP, Address, Image){
this.Name = Name;
this.City = City;
this.ZIP = ZIP;
this.Address = Address;
this.Image = Image;
}
display(){
$("cardContainer").append(`
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="${this.Image}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${this.Name}</h5>
<p class="card-text">${this.City},<br>${this.ZIP} ${this.Address}</p>
</div>
</div>
</div>
`);
}
In a similar manner, I implemented the restaurant and events classes. Subsequently, I initialized an array and added the objects:
let placesArr = [];
placesArr.push(
new Place(
"La Sagrada Familia",
"Barcelona",
"08013",
"Carrer de Mallorca 401.",
"img/sagradafamilia.jpg"
)
);
new restaurant(
"Raco del Nuria",
"Barcelona",
"08002",
"La Rambla 133.",
"img/racodelnuria.jpg",
"+34-933-01-05-77",
"Mediterranean",
"racodelnuria.com"
);
new events(
"FC Barcelona vs. Athletic Club de Bilbao",
"Barcelona",
"08028",
"C. d'Aristides Maillol 12.",
"img/foci.jpg",
"06.23.2020",
"22:00",
"from 29 euro"
);
After testing the code using console.table, it was confirmed that everything worked as intended and all data displayed correctly in the console.
Now, the final step involves looping through the array and presenting the content in the HTML. The webpage only consists of an empty div with the class="row" and id="cardContainer", but I am unsure how to proceed. Could anyone provide guidance on this matter?