Today I found out that I’m actually in “lock-step” with Howard in his 180 days of design project! What a coincidence. I was inspired by his most recent blog post on color to incorporate a rainbow into today’s website.
The main things I learned today:
1. Rainbows and Math
Instead of using a for loop like the tutorial, I created a function that would return an rgb value. Outside the function, I set a rainbowIndex that would increment by one every time the function was called.
2. jQuery .hover, .mouseenter, .mouseleave
I created 20 divs that would go across the screen and set the background colour to be black. I then used .hover to change the css background of each div as the mouse was on the div. This created a pretty rainbow gradient that changed as the user hovered over the different div elements. I was pretty happy with the website at this point but the setup reminded me of a piano.
So I thought, instead of having a big black box, why not make it look like a piano! I alternated ids of one and two for the div and assigned them black and white colours. Now the bars were black and white and then turned into a rainbow with the mouse over action.
But… I kinda missed the piano once it was gone. I added another function to remove the styling so that the keys would go back to their original colours. Note: setting the style value to an empty string removes all styles except for a style that has been applied with a CSS rule in a stylesheet (which were black and white background colours in this case).
3. Adding audio with html
Since it now looked like a piano, it might as well play some sounds! I looked up html5 audio code and downloaded some free sound files for the piano notes. Then I got stuck for a long time because I kept getting “play() is an undefined function”. I read many articles and solutions on stackoverflow.com before Richerd suggested it was because I had set the id of my sound files to the source line instead of the audio line, doh!
Finally I wanted to make sure the same sound did not play twice in a row. I wrote a conditional statement (that I also pondered over for a bit…) to find a another sound if the new sound was the same as the previous. I wrote similar code for my fortune cookie on day 3 yet still struggled coming up with the concept today. Practice, practice, practice!
Overall, today was more fun than the previous few days. I’m still quite sick with a cold but the bright colours definitely brightened up my day!
I hope you have fun playing with my rainbow piano. For the pianists out there: I’m sorry the notes are random!