thank you so much for your message!
I managed to fix the problem and also color the drawn lines
its a visualisation of the bubble sort technique
https://codepen.io/CodeLegend27/pen/YzwYajyalso i managed to do the loop sorting
Code
function sortDate(rec1,rec2){
return new Date(rec1.dates) > new Date(rec2.dates) ? -1 : 1
}
ultraarr.sort(sortDate)
for (let i = 0; i < ultraarr.length; i++) {
$(".row").append(ultraarr[i].display())
}
sort an array (its the ultraarr) ,which was created thru typescript class constructor, by their date . in the end it looks so easy and understandable but man did i crushed my head against the wall ^^
and in the class i had a function which iam calling after the sorting which looks like that
Code
display() {
let content = `
<div class="col-sm-12 col-md-6 col-lg-3 mb-5 p-4 p-0 m-0 animate__animated animate__backInLeft">
<div class="card"><h5 class="text-center bg-info p-0 m-0 text-light rounded">LOCATION</h5>
<img class="card-img-top hidden-sm d-sm-none d-md-block rounded" src="img/${this.img}" alt="${this.name}">
<div class="card-body d-flex justify-content-between flex-column" style="min-height: 200px;">
<h5 class="card-title">${this.name}</h5>
<p class="card-text"><b>City</b>: ${this.city}<br> <b>Zip-Code</b> ${this.zip}
<br>
<p><b>Created:</b> ${this.dates.toLocaleString('de-AT')}
</p>
</div>
</div>
</div>
` ;
return content;
}
and thats how a class looks like:
Code
class locations {
name: string;
city: String;
zip: number;
img: string;
dates: Date;
constructor(name, city, zip, img, dates) {
this.name = name;
this.city = city;
this.zip = zip;
this.img = img;
this.dates = dates;
ultraarr.push(this);
};
and just for example 1 variable i pushed in the empty array (since the constructor automatically pushes it )
Code
let tower = new locations(
"Burj Khalifa",
"Dubai",
2333,
"1.jpg",
new Date(2015, 1, 1, 5, 40)
)