Http- -

// main function to generate the post preview HTML function generatePostPreview() // get values let title = titleInput.value.trim(); let category = categoryInput.value.trim(); let author = authorInput.value.trim(); let rawDate = dateInput.value; let content = contentTextarea.value; let tagsRaw = tagsInput.value.trim();

// Helper: parse tags from comma-separated string -> array of trimmed tags function parseTags(tagString) if (!tagString) return []; return tagString.split(',').map(t => t.trim()).filter(t => t !== '');

.post-header background: #f8fafd; padding: 1.2rem 1.5rem; border-bottom: 2px solid #e2e8f0;

<div class="input-group"> <label>📅 Date (optional)</label> <input type="date" id="postDate"> </div> // main function to generate the post preview

.post-meta display: flex; gap: 1rem; font-size: 0.75rem; color: #5f7f9a; margin-top: 0.4rem; flex-wrap: wrap;

.card-header background: #ffffffdd; padding: 1.3rem 1.8rem; border-bottom: 1px solid #eef2f8;

.card:hover transform: translateY(-3px); box-shadow: 0 28px 38px -14px rgba(0, 0, 0, 0.18); let category = categoryInput.value.trim()

body background: linear-gradient(145deg, #f0f4fa 0%, #e6ecf3 100%); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; padding: 2rem 1.5rem; min-height: 100vh;

input, textarea, select width: 100%; padding: 0.85rem 1rem; border-radius: 1rem; border: 1px solid #cfdfed; background: #ffffff; font-family: inherit; font-size: 0.95rem; transition: all 0.2s; outline: none; color: #0e2a3b;

.tag background: #eef3fc; padding: 0.2rem 0.7rem; border-radius: 30px; font-size: 0.7rem; font-weight: 500; color: #1e5f8e; let author = authorInput.value.trim()

.empty-preview background: #f9fcff; border-radius: 1.5rem; padding: 3rem 1.5rem; text-align: center; color: #98b1c9; border: 1px dashed #cbdde9;

<div class="input-group"> <label>📂 Category / Topic</label> <input type="text" id="postCategory" placeholder="e.g., Technology, HTTP, DevTools" value="HTTP / Networking"> </div>