Codecademy Piano Keys Project

Link to project: Visit Here

Table of contents

• Project Goals
• Built with
• How to use
• Challenges and Credits

Project Goals

You’re a web developer who has been hired by a music education company. This client wants you to create an interactive game to help their beginner-level piano students study. Create a piano player with DOM events in JavaScript!

Built with

• HTML
• CSS
• JavaScript
• Git, GitHub and GitHub Pages

Challenges and Credits

This was a practice project from the full stack program at Codeacademy.
HTML and CSS were given to me, I did the JavaScript work.
Bonus: I added notes sounds by myself.

Optimizations/Improvements

• Adding other songs
• Bigger Keyboard
• Different instruments
• More fun Interactivity
• Continue refining the design

Lessons Learned:

• DOM Manipulation: Through this project, I gained a deeper understanding of DOM (Document Object Model) manipulation in JavaScript. I learned how to dynamically interact with HTML elements, such as creating event listeners and updating content based on user input.

• Event Handling: Implementing event handling was a crucial aspect of this project. I learned how to capture and respond to user actions, such as mouse clicks or keyboard inputs, to create an interactive user experience.

• Project Collaboration: While HTML and CSS were provided, I took ownership of the JavaScript functionality. This project taught me the importance of collaboration, as well as the significance of integrating different technologies seamlessly to achieve project goals.

• Problem-Solving Skills: Throughout the development process, I encountered various challenges and bugs that required creative problem-solving skills to resolve. These challenges provided opportunities for growth and helped me develop my debugging abilities.

• Continuous Improvement: Reflecting on this project, I realize the importance of continuous improvement. Moving forward, I aim to refine the design, add additional features such as more songs, and enhance the interactivity to provide users with an even more enjoyable experience.