File size: 3,996 Bytes
7ca8a68 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
document.addEventListener('DOMContentLoaded', function() {
// Initialize notes functionality if on notes page
if (window.location.pathname.includes('notes.html')) {
const notesContainer = document.getElementById('notesContainer');
const sampleNotes = [
{
title: 'React Hooks Guide',
content: 'Notes on useState, useEffect, and custom hooks patterns...',
category: 'JavaScript',
date: '2023-05-15',
color: 'bg-blue-100'
},
{
title: 'CSS Grid Tricks',
content: 'Advanced grid layouts and responsive techniques...',
category: 'UI/UX',
date: '2023-06-02',
color: 'bg-purple-100'
},
{
title: 'Database Optimization',
content: 'Indexing strategies and query optimization tips...',
category: 'Databases',
date: '2023-04-20',
color: 'bg-green-100'
}
];
// Render sample notes
sampleNotes.forEach(note => {
const noteElement = document.createElement('div');
noteElement.className = `rounded-lg shadow-sm p-4 ${note.color} hover:shadow-md transition-shadow cursor-pointer`;
noteElement.innerHTML = `
<h3 class="font-semibold text-lg mb-1">${note.title}</h3>
<p class="text-gray-600 text-sm mb-2 line-clamp-2">${note.content}</p>
<div class="flex justify-between items-center text-xs text-gray-500">
<span>${note.category}</span>
<span>${note.date}</span>
</div>
`;
notesContainer.appendChild(noteElement);
});
// New note button functionality
document.getElementById('newNoteBtn').addEventListener('click', () => {
const newNote = {
title: 'Untitled Note',
content: 'Start writing your note here...',
category: 'General',
date: new Date().toISOString().split('T')[0],
color: 'bg-gray-100'
};
const noteElement = document.createElement('div');
noteElement.className = `rounded-lg shadow-sm p-4 ${newNote.color} hover:shadow-md transition-shadow cursor-pointer`;
noteElement.innerHTML = `
<h3 class="font-semibold text-lg mb-1">${newNote.title}</h3>
<p class="text-gray-600 text-sm mb-2 line-clamp-2">${newNote.content}</p>
<div class="flex justify-between items-center text-xs text-gray-500">
<span>${newNote.category}</span>
<span>${newNote.date}</span>
</div>
`;
notesContainer.prepend(noteElement);
});
}
// Color mixer functionality
const colorSliders = document.querySelectorAll('input[type="range"]');
colorSliders.forEach(slider => {
slider.addEventListener('input', function() {
const colorName = this.previousElementSibling.firstElementChild.textContent.toLowerCase();
const value = this.value;
this.nextElementSibling.textContent = value;
const colorBox = this.parentElement.previousElementSibling;
colorBox.style.background = `linear-gradient(to bottom right, var(--tw-${colorName}-${value}), var(--tw-${colorName}-${parseInt(value)+100}))`;
});
});
// Generate random color palette
const generateBtn = document.querySelector('button');
if (generateBtn) {
generateBtn.addEventListener('click', function() {
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink'];
const randomColor1 = colors[Math.floor(Math.random() * colors.length)];
const randomColor2 = |