Skip to content

erreinoso/piano

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Piano Keyboard 🎵

Today, I felt like I wanted to play piano using CSS and JavaScript 😎

Why not joining things that i love to do, like web develpment and playing music?

The better way to play the piano is having in mind the music notation system.

C - Do
D - Re
E - Mi
F - Fa
G - Sol
A - La
B - Si

You can also use your mouse.

gif of piano being played

Learnings 💡

  • CSS

  • Animations

  • Understand how to manipulate the DOM of a page and respond to user events

  • Using audio files and modes

  • Creating a button to handdle styles

Tools 💻

  • CSS - Sass
  • Adalab Web Starter Kit tool, through which we automated tasks like convertiing Sass to CSS.
  • HTML5
  • JavaScript

How to run this project? 👇

  • You need to have Node.js installed

  • Clone or download the repository in your computer.

To install local dependencies, type:

npm install

npm start

This runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

Creator👋

This tiny project was created by Elena Ramírez Reinoso

How to reach me:

GitHub: @erreinoso

Email: [email protected]

Twitter: @_ElenaRReinoso

LinkedIn: @eramirezreinoso

About

🎹 Piano player: HTML CSS SASS JAVASCRIPT

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published