this week I focused more on making my piano keys.
I had some challenges with implementing my black piano keys, specifically with the positioning of them. At first, I placed them in the same container as my white piano keys, however when the black keys were repositioned this still left a gap from where they were originally placed before repositioning. This changed the position of my whole piano which was not good.
After some testing, I decided to put the black keys in a different container. However the keys still moved the piano! I didn’t intend for this to happen so I tried setting the container width to zero, which surprisingly stopped this issue. Most likely because this means the container has ‘no width’ so anything placed inside it will not change its size since there is no width to begin with.
Originally, I had to have 5 different styles for 5 different black keys. After some testing I figured out a way to edit each specific left style position so that only one style would need to be used amongst all black keys. This saved me a lot of room in my code and made it more readable.
adding in the audio was similar to how I added audio in a previous javascript project, the syntax is a bit different but the logic behind it was similar thankfully which helped with the implementation.
later on in the week, I added a press on function that allowed me to click the keys on my piano, so that they’d change colour. Currently, I’ve only set up the onpress function though I have done some research on onpressout as well. Whilst I did set up my onpress function without syntax errors, I do have an issue where I click to the unstyled position of the black keys, which is nowhere close to the current position of them. When I click these black keys they do not change, but clicking off to the side triggers the onpress. I have a theory that this is remnants of my repositioning issue. This also obscures some of the white keys, which I can only press on certain positions on the white keys.