maxluli
121 lines
4.4 KiB
HTML
121 lines
4.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>
|
|
document.getElementById("main").onload = function () {
|
|
loadFromIndexedDB("favorites", 0).then((response) => {
|
|
//console.log(response);
|
|
response.forEach(function (item) {
|
|
//console.log(item.name);
|
|
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' style='width:100%'>X</button>";
|
|
html += "</div>";
|
|
html += "</div>";
|
|
//console.log(html);
|
|
var container = document.getElementById("cards");
|
|
container.innerHTML += html;
|
|
|
|
});
|
|
});
|
|
}
|
|
|
|
function loadFromIndexedDB(storeName) {
|
|
return new Promise(
|
|
function (resolve, reject) {
|
|
var dbRequest = indexedDB.open(storeName);
|
|
|
|
dbRequest.onerror = function (event) {
|
|
reject(Error("Error text"));
|
|
};
|
|
|
|
dbRequest.onupgradeneeded = function (event) {
|
|
// Objectstore does not exist. Nothing to load
|
|
event.target.transaction.abort();
|
|
reject(Error('Not found'));
|
|
};
|
|
|
|
dbRequest.onsuccess = function (event) {
|
|
var database = event.target.result;
|
|
var transaction = database.transaction([storeName]);
|
|
var objectStore = transaction.objectStore(storeName);
|
|
var objectRequest = objectStore.getAll();
|
|
|
|
objectRequest.onerror = function (event) {
|
|
reject(Error('Error text'));
|
|
console.log("Error with the indexdb");
|
|
};
|
|
|
|
objectRequest.onsuccess = function (event) {
|
|
if (objectRequest.result) {
|
|
resolve(objectRequest.result);
|
|
}
|
|
else {
|
|
reject(Error('object not found'));
|
|
console.log("object not found");
|
|
}
|
|
};
|
|
};
|
|
}
|
|
);
|
|
}
|
|
|
|
</script>
|
|
|
|
</html> |