From 9e339ea5f472145a02eb17acf12139cdce12feed Mon Sep 17 00:00:00 2001
From: Madhuparna Ghosh <145034107+awhyshll@users.noreply.github.com>
Date: Sat, 26 Oct 2024 14:26:08 +0530
Subject: [PATCH] Updated README.md and added the process to contribute

---
 README.md | 84 ++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index a351845..8813387 100644
--- a/README.md
+++ b/README.md
@@ -3,40 +3,57 @@
 A simple Drum Kit application built using HTML, CSS, and JavaScript. Users can play sounds by clicking on the drum pads or by pressing corresponding keyboard keys.
 
 
-## Features🚀
+## Features❇️
 
-- Play drum sounds by clicking on buttons.
-- Use keyboard keys (A, S, D, F, G, H, J, K, L) to trigger sounds.
-- Responsive design for better usability.
+- **Interactive Sound Play**: Click on the drum pads or press keys (A, S, D, F, G, H, J, K, L) to play sounds.
+- **Keyboard Accessibility**: Each drum sound can be triggered with keyboard keys, providing a more immersive experience.
+- **Responsive Design**: The layout adjusts seamlessly across different devices, ensuring usability on both mobile and desktop screens.
 
 ## Getting Started🚀
 
-### Prerequisites🚀
+#### Prerequisites🚀
 
 - A web browser (Chrome, Firefox, etc.)
-- Basic understanding of HTML, CSS, and JavaScript
+- Basic understanding of HTML[(MDN Web Docs)](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics), CSS[(W3Schools CSS Tutorial)](https://www.w3schools.com/css/default.asp), JavaScript [(JavaScript.info)](https://javascript.info/)
+## 🟥Submitting a Pull Request
+
+To submit your contributions, follow these steps:
+
+1. **Star the repository**: Star this repository to show your support!
+2. **Fork the Repository**: Click the "Fork" button at the top right corner of the repository to create your own copy.
+3. **Clone the repository**:
+```bash
+   git clone https://github.com/Chhavi9700225780/Drum-Kit.git
+   ```
+4.  **Change the working directory**: 
+```bash
+   cd Drum-Kit
+   ```
+5. 🔗 **Add a reference to the original repository**.
+```bash
+   git remote add upstream https://github.com/Chhavi9700225780/Drum-Kit.git
+   ```
+6. ⬇️ **Always take a pull from the upstream repository to your main branch to keep it up-to-date with the main project (updated repository)**.
+```bash
+   git pull upstream main
+   ```
+4.  **Create a Working Branch**🍀 : Create a new branch for your changes:
+```bash
+   git checkout -b YourFeatureName
+   ```
+5. **Make Changes**: Make your desired changes to the codebase.
+6. 📥 **Commit Changes**: Commit your changes with a descriptive commit message:
+```bash
+   git add .
+   git commit -m "Describe your changes here"
+   ```
+7. ⬇️ **Push Changes**: Push your changes to your forked repository:
+```bash
+   git push origin YourFeatureName
+   ```
+8. **Submit a Pull Request**: Go to your forked repository on GitHub and Click the "Pull requests" tab, then "New pull request". Be sure to provide a detailed description of your changes.
 
-### Installation OR How to Contribute🚀
 
-1. **Clone the repository:**
-   ```bash
-   git clone https://github.com/your-username/drum-kit.git
-   
-2.  **Make your changes and commit them:**
-    ```bash
-    git commit -m "Add your message"
-
-
-3. **Push to the branch:**
-   ```bash
-   git push origin feature/YourFeatureName
-
-
- 4.  Open a pull request
-  
-
-
- 
   ## File Structure
  
    ```bash
@@ -46,6 +63,21 @@ A simple Drum Kit application built using HTML, CSS, and JavaScript. Users can p
 ├── styles.css      # CSS for styling
 └── script.js       # JavaScript for functionality
 └── sounds/         # Directory for sound files
+```
+
+## 🌟 How You Can Enhance this Project as a Beginner
+ **If you're looking to contribute or experiment with this project, here are some beginner-friendly suggestions:**
+
+1. **Add More Sound Effects**: Extend the range of sounds by adding more ``.wav`` or ```.mp3``` files in the ```sounds/``` directory and updating the JavaScript logic.
+
+2. **Visual Feedback on Key Press**: Add animations or color changes to drum pads when they are clicked or activated by keyboard keys. This can be achieved with CSS transitions and JavaScript event handling.
+
+3. **Volume Control**: Add a volume slider to control the sound output level, giving users more flexibility.
+
+4. **Record and Playback Feature**: Introduce a feature to record sequences of drum beats and play them back.
 
+5. **Theme Customization**: Allow users to switch between dark and light themes for a personalized experience.
 
+## Acknowledgement🌻
 
+**A big thank you to all contributors and supporters of the Drum Kit Project!**