Circle of Fifth Ultimate Helper App

by | Jul 2, 2025 | Allgemein | 0 comments

The Interactive Composition Tool

Click on any key in the Circle of Fifths. The tool will instantly highlight the family of chords that belong to that key, making it easy to build powerful chord progressions for your next track.

C Major

Key Signature: 0 Sharps / 0 Flats

Relative Minor: A Minor

Composition Tip: The most powerful progressions often move from a highlighted chord back to the Tonic (the active key). Try moving from G (V) to C (I). This is called a "perfect cadence".

Submit a Comment

Your email address will not be published. Required fields are marked *

```javascript /* TrackForge MVP — Vanilla JS Storage: window.localStorage under key TF_DATA_V1 */ (function () { const LS_KEY = 'TF_DATA_V1'; const THEME_KEY = 'TF_THEME'; const EL = { // Main App grid: document.getElementById('projectGrid'), form: document.getElementById('projectForm'), trackName: document.getElementById('trackName'), genre: document.getElementById('genre'), status: document.getElementById('status'), deadline: document.getElementById('deadline'), themeToggle: document.getElementById('themeToggle'), search: document.getElementById('search'), filterStatus: document.getElementById('filterStatus'), clearAll: document.getElementById('clearAllBtn'), newProjectBtn: document.getElementById('newProjectBtn'), // Modal Elements modal: document.getElementById('projectModal'), modalForm: document.getElementById('modalForm'), modalTitle: document.getElementById('modalTitle'), m_name: document.getElementById('m_name'), m_genre: document.getElementById('m_genre'), m_status: document.getElementById('m_status'), m_deadline: document.getElementById('m_deadline'), newTaskText: document.getElementById('newTaskText'), addTaskBtn: document.getElementById('addTaskBtn'), taskList: document.getElementById('taskList'), deleteProjectBtn: document.getElementById('deleteProjectBtn'), saveProjectBtn: document.getElementById('saveProjectBtn'), }; let projects = []; // Array to hold all project data let currentProjectId = null; // To track which project is open in the modal // --- Helper Functions --- const generateId = () => Date.now().toString(36) + Math.random().toString(36).substring(2); const getStatusClass = (status) => { return status.toLowerCase().replace(/\s/g, '-'); }; const formatDate = (dateString) => { if (!dateString) return 'N/A'; const date = new Date(dateString); return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }; const calculateDaysLeft = (deadline) => { if (!deadline) return null; const today = new Date(); const deadlineDate = new Date(deadline); today.setHours(0, 0, 0, 0); // Normalize today to start of day deadlineDate.setHours(0, 0, 0, 0); // Normalize deadline to start of day const diffTime = deadlineDate.getTime() - today.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return diffDays; }; // --- Local Storage Operations --- const loadProjects = () => { const data = localStorage.getItem(LS_KEY); if (data) { projects = JSON.parse(data); } else { // Initialize with some dummy data if no projects exist projects = [ { id: generateId(), name: "Nova Spektrum 01", genre: "Psytrance", status: "In Progress", deadline: "2024-07-30", tasks: [ { id: generateId(), text: "Write main bassline", completed: true }, { id: generateId(), text: "Arrange breakdown 1", completed: false }, { id: generateId(), text: "Mix kick & bass", completed: false }, ] }, { id: generateId(), name: "Dream Sequence", genre: "Ambient", status: "Idea", deadline: "", tasks: [ { id: generateId(), text: "Brainstorm chord progressions", completed: false }, { id: generateId(), text: "Gather field recordings", completed: false }, ] }, { id: generateId(), name: "Urban Pulse", genre: "Techno", status: "Finished", deadline: "2024-05-15", tasks: [ { id: generateId(), text: "Final Master", completed: true }, { id: generateId(), text: "Upload to platforms", completed: true }, ] } ]; } renderProjects(); }; const saveProjects = () => { localStorage.setItem(LS_KEY, JSON.stringify(projects)); }; const clearAllData = () => { if (confirm('Are you sure you want to clear ALL demo data? This cannot be undone.')) { localStorage.removeItem(LS_KEY); projects = []; renderProjects(); } }; // --- Project Rendering --- const createProjectCard = (project) => { const card = document.createElement('div'); card.className = 'project-card'; card.dataset.id = project.id; const daysLeft = calculateDaysLeft(project.deadline); const deadlineInfoHtml = project.deadline ? `
${daysLeft !== null && daysLeft < 0 ? 'Overdue' : ''} ${formatDate(project.deadline)} ${daysLeft !== null && daysLeft >= 0 ? ` (${daysLeft} day${daysLeft === 1 ? '' : 's'} left)` : ''}
` : '
No deadline set
'; card.innerHTML = `

${project.name}

Genre: ${project.genre || 'N/A'} ${project.status}
${deadlineInfoHtml} `; card.addEventListener('click', () => openProjectModal(project.id)); return card; }; const renderProjects = () => { EL.grid.innerHTML = ''; // Clear existing projects const searchTerm = EL.search.value.toLowerCase(); const filterStatus = EL.filterStatus.value; const filteredProjects = projects.filter(project => { const matchesSearch = project.name.toLowerCase().includes(searchTerm) || project.genre.toLowerCase().includes(searchTerm); const matchesStatus = filterStatus === '' || project.status === filterStatus; return matchesSearch && matchesStatus; }); if (filteredProjects.length === 0) { EL.grid.innerHTML = '

No projects found matching your criteria.

'; } else { filteredProjects.forEach(project => { EL.grid.appendChild(createProjectCard(project)); }); } }; // --- New Project Form --- const handleNewProjectSubmit = (e) => { e.preventDefault(); const newProject = { id: generateId(), name: EL.trackName.value.trim(), genre: EL.genre.value.trim(), status: EL.status.value, deadline: EL.deadline.value, tasks: [] }; if (newProject.name) { projects.unshift(newProject); // Add to the beginning saveProjects(); renderProjects(); EL.form.reset(); // Clear form } else { alert('Please enter a track name.'); } }; // --- Modal Logic --- const openProjectModal = (projectId) => { currentProjectId = projectId; const project = projects.find(p => p.id === projectId); if (!project) { console.error('Project not found:', projectId); return; } EL.modalTitle.textContent = project.name; EL.m_name.value = project.name; EL.m_genre.value = project.genre; EL.m_status.value = project.status; EL.m_deadline.value = project.deadline; renderTasks(project.tasks); EL.modal.showModal(); }; const closeProjectModal = () => { EL.modal.close(); currentProjectId = null; EL.modalForm.reset(); EL.taskList.innerHTML = ''; }; const handleModalSave = (e) => { e.preventDefault(); // Prevent default form submission inside dialog const projectIndex = projects.findIndex(p => p.id === currentProjectId); if (projectIndex === -1) return; const project = projects[projectIndex]; project.name = EL.m_name.value.trim(); project.genre = EL.m_genre.value.trim(); project.status = EL.m_status.value; project.deadline = EL.m_deadline.value; // Tasks are updated live via other functions if (project.name) { saveProjects(); renderProjects(); // Re-render to update card details closeProjectModal(); } else { alert('Track name cannot be empty.'); } }; const handleDeleteProject = () => { if (!currentProjectId) return; if (confirm(`Are you sure you want to delete "${EL.m_