Funky Keyboard

Funky Keyboard is a website for anyone who wants to learn how to play simple piano songs on the piano keyboard. No previous knowledge is required. Users can find all the Information on this Website about the Funky Keyboard: "How to play ?", "Choose your song" and contact Information of the author. You can access the website here.

Features

• How to play ?

  • Includes instructions on how to play the keyboard.
  • Text is visible and easy to understand.

• Choose your song

  • User can choose a song from the list and click on the audio to hear it first.
  • Audio helps user to hear the beat and tempo of the song.
  • User can try and memorise as much keys as possible and try to play the song.

• Created by

  • Shows the user author's name and surname.

• Social Media links
  • User can get in touch with the author of this Website.
  • User can find more Information about the author on Social Media links.

User Experience

Goals

Visitor goals

The target audience are kids and parents who want to play the piano keyboard without previous knowledge and have fun:

• To understand how the keyboard is played and to navigate through the Website easily.
• To learn how to play easy songs on the piano keyboard in a day.
• To hear the songs first before starting to play.

User Goals

As a user I would like to:

• Play at least 10 different songs.
• Hear the songs before I start to play.
• See metronome so I can set up speed and follow the beat while I play.
• Learn how to play the piano.
• See lyrics of the songs.
• Be able to record songs I played.

Design Choices

Font choices

I have decided to use Google Fonts.

• Two font styles: Indie Flower for main headings and buttons and Lato for paragraphs.
• These two font styles complement each other very well. Indie Flower is a handwriting font while Lato is part of a sans serif typeface family.
• Example of the font type styles :

Indie Flower font-family Lato font-family

Icons

• Social Media Icons Github and LinkedIn are centered and added to the bottom of the page where user will be able to find further Information about me.
• Fontawesome was used to add Social Media icons and smiley face in the "How to play ?" section.

Color scheme and styling

• I have decided to use 4 color combination scheme for the page: pink, red, black and white.
• Background color of the page is pink. Black color is used for headings and black and white combination for the piano keyboard.
• Red is used as a notification that the key has been pressed.
• Buttons and modal are styled with further colors and opacity of the black color. Note colors below :

Audio Used

• I have recorded audio on Apronus.com Website which gives option to record your own songs played.

Wireframes

All wireframes are created with Balsamiq during the Scope Plane part of the design and planning process for this project.

Landing page How to Play ? Choose a song

Testings

Validator testing and browser compatibility

• I have tested HTML5 code with - HTML5 validator, first testing showed errors.

• Second HTML5 code validation showed error and a warning.

• Third HTML5 code validation showed warning only, ok to leave the warning all other errors fixed.

• I have tested CSS3 code with - Jigsaw validator and no errors have been found.

• I have tested JavaScript code with - JSHint validator, first testing showed errors.

• Second testing. Unused variable has been deleted and all errors have been fixed.

Browser compatibility

• I can confirm that I have tested website on four different Web Browsers and that the page if compatible:

Landing page Google Chrome Modal "How to play ?" Mozilla Firefox Modal "Choose your song" Brave

Accessibility

• I have confirmed that the Website is accessible by inspecting it in Lighthouse on the Google Chrome Dev tools.
• Also, color contrast between pink and black color showed good at 13.65.

Result for desktop

• Performance for the desktop version

Result for mobile devices

• Performance for mobile devices

Bugs

Solved

• Audio did not play due to the incorrect path. Issue has been fixed.

Unsolved bugs

During the regular check up of the Webpage I have noticed favicon.com error. When investigating with our Slack community I have tried to fix the issue by adding favicon.ico to my website and adding link href (<link href="./readme/favicon.ico" rel="icon" type="image/x-icon">)to head of html but it did not fix it. I have also tried to follow reccommendations from Github Community here but nothing seem to fix this bug. Update: this is now working as intended.

Deployment

The site was deployed to Github pages using following steps:

• Login to Github and go into repository Ivana505/funky-keyboard
• Click on settings and scroll down to Pages section on the page
• Under the source heading select the master branch option and click save
• The project has now been deployed and wait for approximate 10 minutes for the link to become active
• Refresh the page and click on the link to view the live site

The live site can be previewed here

Local Deployment

In order to make a local copy of this repository, you can type the following into your IDE Terminal:

• git clone https://github.com/Ivana505/funky-keyboard.git

Alternatively, if using Gitpod, you can click here to create a new workspace under your account.

Languages and technologies used

• HTML5
• CSS3
• JavaScript
• Github
• Git

Credits and Acknowledgements

• Audio source:

• nemo0 Github sounds for the keys.

• Apronus

• Social Media sources:

• YouTube channel freeCodeCamp.org for more Information about addEventListeners.

• YouTube channel Web Dev Simplified for guidaline how to create a piano keyboard with JavaScript.

  Other sources

  • Favicon
  • Coolors
  • Fontawesome for Social Links icons.
  • TinyPNG
  • W3 Schools helped me with creating modal box.
  • Developer Mozilla
  • Stack Overflow to get ID of clicked element in JavaScript.
  • Stack Overflow to add animation to heading 1.
  • Favicon
  • Balsamiq
  • Google fonts
  • Yoksel.Github
  • CSS tricks
  • Code pen helped me to align black keys evenly.
  • Code pen Js piano
  • Web development guide get Data Attribute Information.
  • Getcssscan used for button styling.
  • HTML and CSS freeformatter to beautify the code.
  • Code beautify for Javascript to beautify JavaScript code.
  • Am I reponsive to show responsiveness of the Website.
  • Codepen

  I want to say thank you to my Mentor Tim for the guidance and tutor support.

Content

• Content was created intentionally for the purpose of this project and this Website. Credits go to the creator of the Website.