hi i am making a drum kit with vanila js I want to make the border-color change to the color corresponding to the keyboard when I press the keyboard. here is the problem i have to use data-* attribute in css without using div.style in js code but i don't know what to do please help me here is my code
this is my html
<content>
<div >
<div data-key="a" data-color="red">
<kbd>A</kbd><span>BOOM</span>
</div>
<div data-key="s" data-color="orange">
<kbd>S</kbd><span>CLAP</span>
</div>
<div data-key="d" data-color="yellow">
<kbd>D</kbd><span>HIHAT</span>
</div>
<div data-key="f" data-color="green">
<kbd>F</kbd><span>KICK</span>
</div>
<div data-key="g" data-color="blue">
<kbd>G</kbd><span>OPENHAT</span>
</div>
<div data-key="h" data-color="navy">
<kbd>H</kbd><span>RIDE</span>
</div>
<div data-key="j" data-color="purple">
<kbd>J</kbd><span>SNARE</span>
</div>
<div data-key="k" data-color="lightcoral">
<kbd>K</kbd><span>TINK</span>
</div>
<div data-key="l" data-color="lightblue">
<kbd>L</kbd><span>TOM</span>
</div>
</div>
</content>
and this is my js code
function pressed(event) {
const div = document.querySelector(`.key[data-key="${event.key}"]`);
const sound = document.querySelector(`audio[data-key="${event.key}"]`);
if (!event.repeat) {
div && div.classList.add("pressed");
sound.currentTime = 0;
sound.play();
}
}
function up(event) {
const div = document.querySelector(`.key[data-key="${event.key}"]`);
div && div.classList.remove("pressed");
}
window.addEventListener("keydown", pressed);
window.addEventListener("keyup", up);
most important thing my css file
.pressed[data-key="a"] {
border-color: red;
}
.pressed[data-key="s"] {
border-color: orange;
}
.pressed[data-key="d"] {
border-color: yellow;
}
.pressed[data-key="f"] {
border-color: green;
}
.pressed[data-key="g"] {
border-color: blue;
}
.pressed[data-key="h"] {
border-color: navy;
}
.pressed[data-key="j"] {
border-color: purple;
}
.pressed[data-key="k"] {
border-color: lightcoral;
}
.pressed[data-key="l"] {
border-color: lightblue;
}
i want to simplify that pressed class(without repeating the pressed class) something like .pressed(data-color variable){ border-color: (data-color-variable) } i cannot use any libraries in this code
i tried to get data-color value as variable from html file to css file but failed...
The most important condition is that i should not use div.style in js code. i need to write code that doesn't touch styles directly in javascript
CodePudding user response:
In your html you need to add an audio tag which you reference in your js, I've done it for key a
<content>
<div >
<div data-key="a" data-color="red">
<kbd>A</kbd><span>BOOM</span>
<audio data-key="a" controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3">
</audio>
</div>
<div data-key="s" data-color="orange">
<kbd>S</kbd><span>CLAP</span>
</div>
<div data-key="d" data-color="yellow">
<kbd>D</kbd><span>HIHAT</span>
</div>
<div data-key="f" data-color="green">
<kbd>F</kbd><span>KICK</span>
</div>
<div data-key="g" data-color="blue">
<kbd>G</kbd><span>OPENHAT</span>
</div>
<div data-key="h" data-color="navy">
<kbd>H</kbd><span>RIDE</span>
</div>
<div data-key="j" data-color="purple">
<kbd>J</kbd><span>SNARE</span>
</div>
<div data-key="k" data-color="lightcoral">
<kbd>K</kbd><span>TINK</span>
</div>
<div data-key="l" data-color="lightblue">
<kbd>L</kbd><span>TOM</span>
</div>
</div>
</content>
This is your js a bit modified
function pressed(event) {
const div = document.querySelector(`.key[data-key="${event.key}"]`);
const sound = document.querySelector(`audio[data-key="${event.key}"]`);
if (!event.repeat) {
div && div.classList.add("pressed");
div.style.setProperty('--color', div.getAttribute('data-color'));
sound.currentTime = 0;
sound.play();
}
}
function up(event) {
const div = document.querySelector(`.key[data-key="${event.key}"]`);
div && div.classList.remove("pressed");
div.style.removeProperty('--color');
}
window.addEventListener("keydown", pressed);
window.addEventListener("keyup", up);
And your CSS you should be able to just write like this
.key {
/* other styles */
border: 1px solid black;
}
.key.pressed {
--color: attr(data-color);
border-color: var(--color);
}
audio {
display: none;
}