Piano Chord Viewer

Vis Akkord /* Styles for the app */ h1 { text-align: center; } input[type="text"] { width: 80%; margin: 20px auto; display: block; } button { display: block; margin: 0 auto; } #chordDisplay { display: flex; justify-content: center; margin-top: 20px; } .key { width: 40px; height: 120px; border: 1px solid black; margin: 0 5px; background-color: white; } .key.black { background-color: black; } // Klaver akkorddata (i form af tangenter) const chords = { 'C': ['C', 'E', 'G'], 'D': ['D', 'F#', 'A'], 'E': ['E', 'G#', 'B'], 'F': ['F', 'A', 'C'], 'G': ['G', 'B', 'D'], 'A': ['A', 'C#', 'E'], 'B': ['B', 'D#', 'F#'], }; // Funktion til at vise akkord på klaver function showChord() { const chordName = document.getElementById('chordInput').value.toUpperCase(); const chordNotes = chords[chordName]; const chordDisplay = document.getElementById('chordDisplay'); // Ryd tidligere visning chordDisplay.innerHTML = ''; // Vis akkord på klaver if (chordNotes) { chordNotes.forEach(note => { const keyElement = document.createElement('div'); keyElement.classList.add('key'); if (note.includes('#')) { keyElement.classList.add('black'); } chordDisplay.appendChild(keyElement); }); } else { chordDisplay.textContent = 'Ugyldig akkord'; } }