File size: 3,273 Bytes
7e9fae4 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Joke Search</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#search-container {
display: flex;
justify-content: center;
align-items: center;
}
#query {
width: 70%;
padding: 10px;
}
#search {
background-color: #4c72af;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-left: 10px; /* Add margin to separate the query bar and button */
}
#results {
margin: 20px;
}
.result {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.delete {
background-color: #ff0000;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<h1>Joke Search</h1>
<div id="search-container">
<input type="text" id="query" placeholder="Search...">
<button id="search">Search</button>
</div>
<div id="results"></div>
<script>
$(document).ready(function () {
function performSearch() {
var query = $("#query").val();
$.post("/search", { query: query }, function (data) {
var results = $("#results");
results.empty();
data.forEach(function (result) {
var resultElement = $("<div class='result'>" +
"<p>" + result.text + "</p>" +
"<small>Date: " + result.date + "</small>" +
"<button class='delete' data-id='" + result.id + "'>Delete</button>" +
"</div>");
results.append(resultElement);
resultElement.find(".delete").on("click", function () {
var id = $(this).data("id");
var resultButton = $(this);
$.post("/delete_joke", { id: id }, function (data) {
// Handle the delete response if needed
if (data.deleted) {
// Replace the button with "DELETED!" text
resultButton.replaceWith("<p class='deleted-text'>DELETED!</p>");
}
});
});
});
});
}
$("#search").on("click", function () {
performSearch();
});
$("#query").on("keydown", function (event) {
if (event.key === "Enter") {
event.preventDefault(); // Prevent form submission
performSearch();
}
});
});
</script>
</body>
</html> |