<meta name="viewport" content="width=device-width, initial-scale=1.0">
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
<div class="container my-4">
<h1 class="text-center">Notes Application</h1>
<div id="noteForm" class="card p-3 mb-4">
<h2 id="formTitle">Add Note</h2>
<label for="noteContent" class="form-label">Content:</label>
<textarea id="noteContent" class="form-control" rows="3" placeholder="Enter content"></textarea>
<label for="noteCategory" class="form-label">Category:</label>
<select id="noteCategory" class="form-select">
<option value="Work">Work</option>
<option value="Personal">Personal</option>
<option value="Study">Study</option>
<button type="button" onclick="saveNote()" class="btn btn-primary me-2">Save</button>
<button type="button" onclick="resetForm()" class="btn btn-secondary">Cancel</button>
<table class="table table-striped table-hover">
<td colspan="4" class="text-center">No notes available.</td>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
const table = document.getElementById('notesTable');
if (notes.length === 0) {
table.innerHTML = '<tr><td colspan="4" class="text-center">No notes available.</td></tr>';
notes.forEach((note, index) => {
const row = document.createElement('tr');
<td>${note.category}</td>
<button class="btn btn-sm btn-warning" onclick="editNote(${index})">Edit</button>
<button class="btn btn-sm btn-danger" onclick="deleteNote(${index})">Delete</button>
const content = document.getElementById('noteContent').value.trim();
const category = document.getElementById('noteCategory').value;
alert('Content is required.');
if (editIndex !== null) {
notes[editIndex] = { content, category };
document.getElementById('formTitle').innerText = 'Add Note';
notes.push({ content, category });
function editNote(index) {
const note = notes[index];
document.getElementById('noteContent').value = note.content;
document.getElementById('noteCategory').value = note.category;
document.getElementById('formTitle').innerText = 'Edit Note';
function deleteNote(index) {
document.getElementById('noteContent').value = '';
document.getElementById('noteCategory').value = 'Work';
document.getElementById('formTitle').innerText = 'Add Note';
// Initialize table on page load