utilities

Running

App Files Files Community

utilities / templates /index.html

Reggie

Using Flask

6aa994f 10 months ago

raw

history blame

No virus

3.27 kB

	<!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>