forked from Maxluli/TinderPokemon
94 lines
3.4 KiB
HTML
94 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
|
|
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
|
|
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<title>Tinder Pokemon</title>
|
|
<link rel="icon" type="image/x-icon" href="assets/img/Icon.ico">
|
|
</head>
|
|
|
|
<body id="main">
|
|
<div class="d-grid gap-2 text-center">
|
|
<div class="">
|
|
<h1>Tinder for weird furries</h1>
|
|
</div>
|
|
<div class="">
|
|
<h2>Favorites</h2>
|
|
</div>
|
|
</div>
|
|
<div id="cards">
|
|
|
|
</div>
|
|
<div class="row fixed-bottom">
|
|
<div class="btn col-4 btn-light">
|
|
<a href="likes.html" style="text-decoration:none;color:black">
|
|
<h3>Liked</h3>
|
|
</a>
|
|
</div>
|
|
<div class="btn col-4 btn-light">
|
|
<a href="index.html" style="text-decoration:none;color:black">
|
|
<h3>Home</h3>
|
|
</a>
|
|
</div>
|
|
<div class="btn col-4 btn-light">
|
|
<a href="favorites.html" style="text-decoration:none;color:black">
|
|
<h3>Favorites</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="./assets/JsStuff/toolbox.js">
|
|
</script>
|
|
<script>
|
|
document.getElementById("main").onload = function () {
|
|
loadData();
|
|
}
|
|
function loadData() {
|
|
|
|
loadFromIndexedDB("favorites", 0).then((response) => {
|
|
var container = document.getElementById("cards");
|
|
container.innerHTML = "";
|
|
response.forEach(function (item) {
|
|
var html = "";
|
|
html += "<div class='container' style='margin-bottom:2vh;'>";
|
|
html += "<div class='card'>";
|
|
html += "<div class='row'>";
|
|
html += "<img src='" + item.pp + "' class='card-img-left col-8' alt='...'>";
|
|
html += "<div class='container col-4'>";
|
|
html += "<h3 class='card-text'>" + item.name + " " + item.age + "</h3>";
|
|
html += "<p>" + ((item.description).slice(0, 40) + "...") + "</p>";
|
|
html += "<button class='btn btn-danger' id='" + item.id + "' style='width:100%'>X</button>";
|
|
html += "</div>";
|
|
html += "</div>";
|
|
container.innerHTML += html;
|
|
});
|
|
var buttons = container.querySelectorAll('.btn');
|
|
buttons.forEach(function (item) {
|
|
item.onclick = buttonClicked;
|
|
});
|
|
});
|
|
}
|
|
function buttonClicked(evt) {
|
|
//alert("bonsoir " + evt.target.id);
|
|
let id = evt.target.id;
|
|
removeFromIndexDB("favorites", id);
|
|
DeleteFromApi("favorites", id);
|
|
loadData();
|
|
}
|
|
</script>
|
|
|
|
</html> |