Is there a way to dynamically adjust the height of each string on a fretboard based on values from an array called stringGauge? The strings are initially set at a height of 8px using the .string:before class, but I want them to increase in thickness as they are created.
Since the height needs to be assigned using a pseudo-class, inline styling may not work for this situation. How can I achieve this?
const root = document.documentElement;
const fretboard = document.querySelector(".fretboard");
// The stringGauge array below contains the values I want to assign to each new string
const stringGauge = [1, 2, 3, 6, 7, 8];
const instrumentTuningPresets = {
Guitar: [4, 11, 7, 2, 9, 4],
};
let selectedInstrument = "Guitar";
let numberOfStrings = instrumentTuningPresets[selectedInstrument].length;
const app = {
init() {
this.setupFretboard();
},
setupFretboard() {
fretboard.innerHTML = "";
// This creates the strings for the fretboard
for (let i = 0; i < numberOfStrings; i++) {
let string = tools.createElement("div");
string.classList.add("string");
fretboard.appendChild(string);
// This loops through the stringGauge array but only manages to assign the
// last value in the array which is 8. Subtracting 1-5 from i (e.g. stringGauge[i-3])
// does change the height but for all of them.
root.style.setProperty("--string-height", stringGauge[i]);
}
},
};
const tools = {
createElement(el, content) {
el = document.createElement(el);
if (arguments.length > 1) {
el.innerHTML = content;
}
return el;
},
};
app.init();:root {
--fretboard-height: 300;
--string-height: 8;
}
.fretboard {
display: flex;
flex-direction: column;
background-image: url(../assets/images/maple.jpg);
width: 100%;
min-width: 1500px;
height: calc(var(--fretboard-height) * 1px);
margin-top: 50px;
}
.string {
display: flex;
position: relative;
width: 100%;
height: 100%;
}
.string:before {
content: "";
width: 100%;
height: calc(var(--string-height) * 1px);
background: linear-gradient(#eee, #999);
box-shadow: 76px 3px 10px #806233;
z-index: 1;
position: absolute;
top: calc(var(--string-top-position) * 1px);
}<div class="fretboard"></div>