-
Notifications
You must be signed in to change notification settings - Fork 0
/
ui.js
69 lines (53 loc) · 1.68 KB
/
ui.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
function UI (){
}
UI.prototype.addCarToUI =function(newCar){
const carList = document.getElementById("cars");
carList.innerHTML += `
<tr>
<td><img src="${newCar.url}" class="img-fluid img-thumbnail"></td>
<td>${newCar.title}</td>
<td>${newCar.price}</td>
<td><a href="#" id = "delete-car" class = "btn btn-danger">Aracı Sil</a></td>
</tr>
`
}
UI.prototype.clearInputs=function(element1,element2,element3){
element1.value="";
element2.value="";
element3.value="";
}
UI.prototype.displayMessages = function(message , type){
const cardBody = document.querySelector(".card-body");
//Alert Div
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent=message;
cardBody.appendChild(div);
setTimeout (function(){
div.remove();
},2000);
}
UI.prototype.loadAllCars=function(cars){
const carList=document.getElementById("cars");
console.log(carList);
cars.forEach(function(car){
carList.innerHTML += `
<tr>
<td><img src="${car.url}" class="img-fluid img-thumbnail"></td>
<td>${car.title}</td>
<td>${car.price}</td>
<td><a href="#" id = "delete-car" class = "btn btn-danger">Aracı Sil</a></td>
</tr>
`;
});
};
UI.prototype.deleteCarFromUI = function(element){
element.parentElement.parentElement.remove();
}
UI.prototype.clearAllCarsFromUI = function(){
const carsList= document.getElementById("cars");
//carsList.innerHTML="";
while(carsList.firstElementChild!=null){
carsList.firstElementChild.remove();
}
}