Bard - Write and Share Your Poems
About this app
Bard is a web app where you can write and share your poems with others. Get inspired, create beautiful poetry, and connect with fellow poets.
Bard - Write and Share Your Poems Bard Write and Share Your Poems Create New Poem Create New Poem Title Content Cancel Create Edit Poem Title Content Cancel Save Changes
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bard - Write and Share Your Poems</title>
<meta name="description" content="Bard is a web app where you can write and share your poems with others. Get inspired, create beautiful poetry, and connect with fellow poets.">
<meta name="keywords" content="poetry, poems, writing, sharing, community">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
// Create a new poem
function createPoem(title, content) {
// Generate a unique ID for the poem
var id = new Date().getTime().toString();
// Create the poem element
var poemElement = '<div class="poem" data-id="' + id + '">' +
'<h3 class="title">' + title + '</h3>' +
'<p class="content">' + content + '</p>' +
'<div class="actions">' +
'<button class="btn btn-primary edit-btn">Edit</button>' +
'<button class="btn btn-danger delete-btn">Delete</button>' +
'</div>' +
'</div>';
// Add the poem to the main container
$('#poem-container').append(poemElement);
}
// Handle form submission to create a new poem
$('#create-form').submit(function(event) {
event.preventDefault();
var title = $('#title-input').val();
var content = $('#content-input').val();
createPoem(title, content);
$('#create-modal').modal('hide');
$(this).trigger('reset');
});
// Edit a poem
$(document).on('click', '.edit-btn', function() {
var poemElement = $(this).closest('.poem');
var title = poemElement.find('.title').text();
var content = poemElement.find('.content').text();
$('#edit-id').val(poemElement.data('id'));
$('#edit-title-input').val(title);
$('#edit-content-input').val(content);
$('#edit-modal').modal('show');
});
// Update a poem
$('#edit-form').submit(function(event) {
event.preventDefault();
var id = $('#edit-id').val();
var title = $('#edit-title-input').val();
var content = $('#edit-content-input').val();
var poemElement = $('.poem[data-id="' + id + '"]');
poemElement.find('.title').text(title);
poemElement.find('.content').text(content);
$('#edit-modal').modal('hide');
});
// Delete a poem
$(document).on('click', '.delete-btn', function() {
var poemElement = $(this).closest('.poem');
poemElement.remove();
});
});
} catch (error) {
throw error;
}
</script>
<style>
body {
font-family: 'Montserrat', sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.content {
font-size: 18px;
margin-bottom: 20px;
}
.poem {
background-color: #f9f9f9;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.actions {
text-align: right;
}
.btn {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Bard</h1>
<p>Write and Share Your Poems</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create-modal">Create New Poem</button>
<div id="poem-container">
<!-- Poems will be dynamically added here -->
</div>
</div>
<!-- Create Poem Modal -->
<div class="modal fade" id="create-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form id="create-form">
<div class="modal-header">
<h5 class="modal-title">Create New Poem</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="title-input" class="form-label">Title</label>
<input type="text" class="form-control" id="title-input" required>
</div>
<div class="mb-3">
<label for="content-input" class="form-label">Content</label>
<textarea class="form-control" id="content-input" rows="3" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Create</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Poem Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form id="edit-form">
<div class="modal-header">
<h5 class="modal-title">Edit Poem</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="hidden" id="edit-id">
<div class="mb-3">
<label for="edit-title-input" class="form-label">Title</label>
<input type="text" class="form-control" id="edit-title-input" required>
</div>
<div class="mb-3">
<label for="edit-content-input" class="form-label">Content</label>
<textarea class="form-control" id="edit-content-input" rows="3" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!