https://github.com/paricoderdeveloper/music-selection-counter
A simple web app that counts selected music genres from a dropdown menu. Clicking a button displays the count using JavaScript and DOM manipulation.
https://github.com/paricoderdeveloper/music-selection-counter
beginnerproject css dom frontend html htmlform javascript javascriptevents webapp webdevelopment
Last synced: 8 months ago
JSON representation
A simple web app that counts selected music genres from a dropdown menu. Clicking a button displays the count using JavaScript and DOM manipulation.
- Host: GitHub
- URL: https://github.com/paricoderdeveloper/music-selection-counter
- Owner: PariCoderDeveloper
- Created: 2025-06-10T12:00:26.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-10T12:49:16.000Z (8 months ago)
- Last Synced: 2025-06-10T13:26:21.942Z (8 months ago)
- Topics: beginnerproject, css, dom, frontend, html, htmlform, javascript, javascriptevents, webapp, webdevelopment
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Music Selection Counter
A simple web app that lets users select multiple music genres from a dropdown and displays the count of selected options upon clicking a button. **My primary focus in this project has been on JavaScript**, as it handles the core logic and dynamic interactions.
## Features
* Choose multiple music genres from a multi-select dropdown.
* Click a button to display the number of selected genres.
* Responsive and clean user interface with HTML, CSS, and JavaScript.
## How to Run
1. **Clone the repository:**
```bash
git clone [https://github.com/PariCoderDeveloper/Music-Selection-Counter.git](https://github.com/PariCoderDeveloper/Music-Selection-Counter.git)
```
2. Open `index.html` in a web browser.
## Files
* `index.html`: Main HTML structure for the app.
* `css/style.css`: CSS styles for the page layout and design.
* `javascript/script.js`: JavaScript logic to count selected options.
* `README.md`: Project documentation.
* `.gitattributes`: This file specifies certain rules for Git, including **instructing GitHub's language detection to exclude HTML and CSS from the language statistics** shown for this repository.
## Technologies
* JavaScript (Primary focus)
* HTML
* CSS
## Project Structure
```plaintext
Music-Selection-Counter/
├── css/
│ └── style.css
├── javascript/
│ └── script.js
├── .gitattributes # This file instructs Git/GitHub about language statistics
├── index.html
└── README.md