document.addEventListener('DOMContentLoaded', function() {
fetch('journalEntries.json')
.then(response => response.json())
.then(data => {
const entriesList = document.getElementById('entries-list');
data.entries.forEach(entry => {
const div = document.createElement('div');
div.className = 'entry-container'; // Assign a class to the div
const listItem = document.createElement('h3');
const link = document.createElement('a');
link.href = '#';
link.textContent = `${entry.title} | ${entry.date}`;
link.onclick = function() {
showEntry(entry);
};
listItem.appendChild(link);
div.appendChild(listItem); // Append the h3 to the div
entriesList.appendChild(div); // Append the div to the entries list
console.log(div.outerHTML); // Log the created div for debugging
});
})
.catch(error => console.error('Error fetching data:', error)); // Log any errors
function showEntry(entry) {
// Hide the listing
document.getElementById('listing').style.display = 'none';
// Show the selected entry
document.getElementById('entry-title').textContent = entry.title;
document.getElementById('entry-date').textContent = entry.date;
document.getElementById('entry-content').textContent = entry.content;
document.getElementById('entry-display').style.display = 'block';
}
function showListing() {
// Show the listing
document.getElementById('listing').style.display = 'block';
// Hide the entry display
document.getElementById('entry-display').style.display = 'none';
}
}