<title>Guitar Chord Maker</title>
<style>
body{
font-family:Arial,sans-serif;
text-align:center;
padding:20px;
}
.strings{
display:grid;
grid-template-columns:40px repeat(6,50px);
width:max-content;
margin:auto;
}
.label{
font-weight:bold;
padding:10px;
}
#fretboard{
display:grid;
grid-template-columns:40px repeat(6,50px);
gap:2px;
width:max-content;
margin:auto;
}
.fret{
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
}
.cell{
width:50px;
height:50px;
border:1px solid #000;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}
.mark{
width:35px;
height:35px;
background:black;
color:white;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
}
button{
margin-top:20px;
padding:10px 20px;
font-size:16px;
}
</style>
Guitar Chord Maker
Clear Diagram
<script>
const board = document.getElementById("fretboard");
for(let fret=1; fret<=5; fret++){
const fretLabel=document.createElement("div");
fretLabel.className="fret";
fretLabel.textContent=fret;
board.appendChild(fretLabel);
for(let string=1; string<=6; string++){
const cell=document.createElement("div");
cell.className="cell";
cell.addEventListener("click",()=>{
if(cell.innerHTML!==""){
cell.innerHTML="";
return;
}
let finger=prompt("Enter finger number (1-4)");
if(finger && finger>=1 && finger<=4){
cell.innerHTML=
`
${finger}
`;
}
});
board.appendChild(cell);
}
}
function clearBoard(){
document.querySelectorAll(".cell")
.forEach(cell=>cell.innerHTML="");
}
</script>
Guitar Chord Maker
Clear Diagram
<script> const board = document.getElementById("fretboard"); for(let fret=1; fret<=5; fret++){ const fretLabel=document.createElement("div"); fretLabel.className="fret"; fretLabel.textContent=fret; board.appendChild(fretLabel); for(let string=1; string<=6; string++){ const cell=document.createElement("div"); cell.className="cell"; cell.addEventListener("click",()=>{ if(cell.innerHTML!==""){ cell.innerHTML=""; return; } let finger=prompt("Enter finger number (1-4)"); if(finger && finger>=1 && finger<=4){ cell.innerHTML= `