179
We’re thrilled to announce a new feature on DBuuk: Code Block Support!
Tech authors, developers, and enthusiasts can now share their expertise more effectively by including formatted, syntax-highlighted code snippets directly in their posts.
Why is this exciting?
- 📚 Improved Readability: Your code will look clean, professional, and easy to understand.
- 💻 Multi-Language Support: Whether you’re sharing JavaScript, Python, PHP, or any other language, it’ll be beautifully formatted.
- 🌟 Enhanced Learning: Readers can now follow along with examples more easily, making learning seamless.
How to Use:
1️⃣ When creating or editing a post, select the Code Block option.
2️⃣ Paste your code and select the programming language.
3️⃣ Publish, and voilà—your readers can now view your perfectly formatted code!
This update is perfect for:
🔹 Tech tutorials
🔹 Code explanations
🔹 Sharing tips and tricks
💬 We’d love to hear your feedback! If you encounter any issues or have suggestions, feel free to let us know.
Start crafting your code-filled posts today! 🛠️✨
Visit DBuuk to explore this new feature. 🚀
Here’s an example! 👇
<?php
// Include the form handling logic
require_once 'handle_checklists.php';
// Get all checklists
$checklists = getAllChecklists();
// Get the selected checklist from the dropdown or default to the first checklist
$selectedChecklist = isset($_GET['checklist']) ? $_GET['checklist'] : (count($checklists) > 0 ? $checklists[0] : null);
// Load the checklist items from the selected file
$checklistItems = [];
if ($selectedChecklist) {
$checklistItems = loadChecklistItems($selectedChecklist);
}
// Calculate the percentage of checked items for the selected checklist
$totalItems = count($checklistItems);
$checkedCount = isset($checkedItems[$selectedChecklist]) ? count($checkedItems[$selectedChecklist]) : 0;
$percentage = ($totalItems > 0) ? round(($checkedCount / $totalItems) * 100) : 0;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Checklist</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- Status/Menu Bar -->
<div class="status-bar">
<span class="status-title"><?php echo htmlspecialchars(ucwords(str_replace('_', ' ', $selectedChecklist))); ?></span>
<span class="status-percentage"><?php echo $percentage; ?>% completed</span>
</div>
<!-- Checklist Selection Dropdown -->
<form method="GET" id="checklistSelector">
<label for="checklist">Choose a checklist:</label>
<select name="checklist" id="checklist" onchange="document.getElementById('checklistSelector').submit();">
<?php foreach ($checklists as $checklist): ?>
<option value="<?php echo htmlspecialchars($checklist); ?>" <?php echo $selectedChecklist === $checklist ? 'selected' : ''; ?>>
<?php echo htmlspecialchars(ucwords(str_replace('_', ' ', $checklist))); ?>
</option>
<?php endforeach; ?>
</select>
</form>
<!-- Display the Checklist Items -->
<?php if ($selectedChecklist && !empty($checklistItems)): ?>
<form method="POST">
<?php foreach ($checklistItems as $item): ?>
<div class="checklist-item" data-item="<?php echo htmlspecialchars($item); ?>"
data-checklist="<?php echo htmlspecialchars($selectedChecklist); ?>">
<label>
<input type="checkbox" class="checklist-checkbox"
data-item="<?php echo htmlspecialchars($item); ?>"
data-checklist="<?php echo htmlspecialchars($selectedChecklist); ?>"
<?php echo isset($checkedItems[$selectedChecklist]) && in_array($item, $checkedItems[$selectedChecklist]) ? 'checked' : ''; ?>>
<span><?php echo htmlspecialchars($item); ?></span>
</label>
</div>
<?php endforeach; ?>
</form>
<?php elseif ($selectedChecklist): ?>
<p>No items found for this checklist.</p>
<?php else: ?>
<p>No checklists available.</p>
<?php endif; ?>
<!-- Collapsible Sections for Add, Update, Duplicate, Delete Checklist -->
<div class="collapsible-section">
<button class="collapsible">Add New Checklist</button>
<div class="content">
<form method="POST">
<div class="form-group">
<label for="new_checklist_name">Checklist Name:</label>
<input type="text" name="new_checklist_name" required>
</div>
<div class="form-group">
<label for="new_checklist_items">Checklist Items (one per line):</label>
<textarea name="new_checklist_items" required></textarea>
</div>
<button type="submit">Add Checklist</button>
</form>
</div>
</div>
<!-- Update Checklist Section -->
<?php if ($selectedChecklist && !empty($checklistItems)): ?>
<div class="collapsible-section">
<button class="collapsible">Update Checklist</button>
<div class="content">
<form method="POST">
<input type="hidden" name="checklist_name" value="<?php echo htmlspecialchars($selectedChecklist); ?>">
<div class="form-group">
<label for="updated_items">Edit Checklist Items (one per line):</label>
<textarea name="updated_items[]" rows="5"><?php echo htmlspecialchars(implode("\n", $checklistItems)); ?></textarea>
</div>
<button type="submit" name="update_checklist">Update Checklist</button>
</form>
</div>
</div>
<?php endif; ?>
<!-- Duplicate Checklist Section -->
<div class="collapsible-section">
<button class="collapsible">Duplicate Checklist</button>
<div class="content">
<form method="POST">
<label for="duplicate_checklist">Select Checklist to Duplicate:</label>
<select name="duplicate_checklist" id="duplicate_checklist" required>
<?php foreach ($checklists as $checklist): ?>
<option value="<?php echo htmlspecialchars($checklist); ?>"><?php echo htmlspecialchars(ucwords(str_replace('_', ' ', $checklist))); ?></option>
<?php endforeach; ?>
</select>
<div class="form-group">
<label for="new_checklist_name">New Checklist Name:</label>
<input type="text" name="new_checklist_name" id="new_checklist_name" required>
</div>
<button type="submit" name="duplicate_checklist_action">Duplicate Checklist</button>
</form>
</div>
</div>
<!-- Delete Checklist Section -->
<div class="collapsible-section">
<button class="collapsible">Delete Checklist</button>
<div class="content">
<form method="POST" onsubmit="return confirmDeletion();">
<label for="delete_checklist">Select Checklist to Delete:</label>
<select name="delete_checklist" required>
<?php foreach ($checklists as $checklist): ?>
<option value="<?php echo htmlspecialchars($checklist); ?>"><?php echo htmlspecialchars(ucwords(str_replace('_', ' ', $checklist))); ?></option>
<?php endforeach; ?>
</select>
<button type="submit">Delete Checklist</button>
</form>
</div>
</div>
</div>
<script>
// Function to recalculate the percentage and update the status bar
function updateStatusBar() {
const totalItems = document.querySelectorAll('.checklist-item').length;
const checkedItems = document.querySelectorAll('.checklist-checkbox:checked').length;
const percentage = totalItems > 0 ? Math.round((checkedItems / totalItems) * 100) : 0;
document.querySelector('.status-percentage').textContent = percentage + '% completed';
}
// Toggle checkbox when clicking on the row
document.querySelectorAll('.checklist-item').forEach(row => {
row.addEventListener('click', function(event) {
const checkbox = this.querySelector('.checklist-checkbox');
checkbox.checked = !checkbox.checked;
const item = checkbox.getAttribute('data-item');
const checklist = checkbox.getAttribute('data-checklist');
const checked = checkbox.checked;
// Send AJAX request to update the checked state
fetch(window.location.href, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `item=${encodeURIComponent(item)}&checked=${checked}&checklist=${encodeURIComponent(checklist)}`
});
// Update the status bar
updateStatusBar();
});
});
// Initial status bar update
updateStatusBar();
// Collapsible form sections
const collapsibles = document.querySelectorAll('.collapsible');
collapsibles.forEach(collapsible => {
collapsible.addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
content.style.display = content.style.display === 'block' ? 'none' : 'block';
});
});
// Generate the default checklist name with the date suffix when a checklist is selected
document.getElementById('duplicate_checklist').addEventListener('change', function() {
const selectedChecklist = this.value;
const today = new Date();
const formattedDate = `${(today.getMonth() + 1).toString().padStart(2, '0')}${today.getDate().toString().padStart(2, '0')}${today.getFullYear()}`;
document.getElementById('new_checklist_name').value = `${selectedChecklist}_${formattedDate}`;
});
// Confirmation for checklist deletion
function confirmDeletion() {
return confirm('Are you sure you want to delete this checklist? This action cannot be undone.');
}
</script>
</body>
</html>
