/b-iano

A small vanilla JavaScript project in which I made a kind of piano (but not with the sounds of a piano!) and learnt how to add an event listener to the window.

Primary LanguageHTML

This is a B-iano.

It's like a piano but instead uses the sounds of Ben**.

** The quality of singing does not reflect the quality of the coding...

B-iano

June 2020

Things I learnt /experimented with during this project:

  • Adding an event listener to the window (keydown) as well as mouseover

  • Using a switch statement (with mouseover) and an object (with keydown) to play the audio sounds

  • Using CSS Grid to make the b-iano keys and experimenting with the minmax property

  • Using a pseudo element to create background opacity

  • The audio didn't play until the page was clicked on so I made a pop-up button which had to be pressed in order to 'enter' the page

Built with:

  • HTML
  • CSS
  • JavaScript

Getting Started:

Clone the repo as instructed below

Prerequisites:

No prerequisites

Installation

  1. Clone the repo

git clone https://github.com/katiehawcutt/b-iano.git

  1. Run the index.html in a browser

Usage

On page load, click the button to gain access to the B-iano. Hover with the mouse of use the letters displayed on the keyboard to play!