49 lines
1.3 KiB
HTML
49 lines
1.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Meme Gallery</title>
|
||
|
|
<style>
|
||
|
|
.meme { margin: 10px; padding: 10px; border: 1px solid #ccc; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Meme Gallery</h1>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>Add a Meme</h2>
|
||
|
|
<input type="text" id="title" placeholder="Title">
|
||
|
|
<input type="text" id="url" placeholder="Image URL">
|
||
|
|
<button onclick="addMeme()">Add Meme</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="memes"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
async function loadMemes() {
|
||
|
|
const response = await fetch('/backend/memes');
|
||
|
|
const data = await response.json();
|
||
|
|
const memesDiv = document.getElementById('memes');
|
||
|
|
memesDiv.innerHTML = data.memes.map(meme => `
|
||
|
|
<div class="meme">
|
||
|
|
<h3>${meme.title}</h3>
|
||
|
|
<img src="${meme.url}" width="200">
|
||
|
|
</div>
|
||
|
|
`).join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
async function addMeme() {
|
||
|
|
const title = document.getElementById('title').value;
|
||
|
|
const url = document.getElementById('url').value;
|
||
|
|
|
||
|
|
await fetch('/backend/memes?' + new URLSearchParams({
|
||
|
|
title: title,
|
||
|
|
url: url
|
||
|
|
}), {method: 'POST'});
|
||
|
|
|
||
|
|
loadMemes();
|
||
|
|
}
|
||
|
|
|
||
|
|
loadMemes();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|