https://github.com/id-andyyy/drum-keys

🥁⌨️ A website to play music with the keyboard
https://github.com/id-andyyy/drum-keys

adaptive-design css drumkit drums html javascript30 js keyboard vanilla

Last synced: 3 days ago
JSON representation

🥁⌨️ A website to play music with the keyboard

• Host: GitHub
• URL: https://github.com/id-andyyy/drum-keys
• Owner: id-andyyy
• Created: 2024-06-19T09:25:28.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-16T09:58:27.000Z (3 months ago)
• Last Synced: 2024-08-16T11:10:02.893Z (3 months ago)
• Topics: adaptive-design, css, drumkit, drums, html, javascript30, js, keyboard, vanilla
• Language: HTML
• Homepage: https://id-andyyy.github.io/Drum-Keys/
• Size: 937 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README-ru.md

Awesome Lists containing this project

README

        
![Арт](https://i.postimg.cc/LsqBjBxS/art.png)

![GitHub Created At](https://img.shields.io/github/created-at/id-andyyy/Drum-Keys?style=flat&color=%23540554)

![Lines Of Code](https://tokei.rs/b1/github/id-andyyy/Drum-Keys?style=flat&category=code&color=%23FF9100)

![Top Language](https://img.shields.io/github/languages/top/id-andyyy/Drum-Keys?style=flat)

![Website](https://img.shields.io/website?url=https%3A%2F%2Fid-andyyy.github.io%2FDrum-Keys%2F&style=flat)

# Drum Keys 🥁

Сайт с возможностью сыграть свою мелодию, используя клавиатуру ⌨. Это один из моих первых проектов 🔰.

## Описание

На компьютере: при нажатии определённых клавиш воспроизводятся соответствующие звуки (clap, hihat, kick, openhat, boom, ride, snare, tom, tink).

На телефоне: можно нажимать на изображения клавиш для получения соответствующих звуков.

## Демонстрация

Посетите [сайт](https://id-andyyy.github.io/Drum-Keys/) или посмотрите демонстрацию (клик на картинку) 👇

[![Превью](https://i.postimg.cc/DfbCf34f/preview.png)](https://youtu.be/I-6FkwnOGNU)

## Технологии и инструменты

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=white&color=yellow)

![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white&color=ad63f7)

![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white&color=f14e32)

Особенности разработки:

- Адаптивная вёрстка подстраивается под любое устройство

- Анимация при нажатии на клавиши

- БЭМ методология

- Чистый JavaScript (код разбит на функции)

- Настроены мета-теги

## Обратная связь

Буду признателен, если вы поставите звезду ⭐. Если вы нашли баг или у вас есть предложения по улучшению, используйте раздел [Issues](https://github.com/id-andyyy/Drum-Keys/issues).

## Благодарности

Благодарность за идею дизайна сайта [strawberry2892 🍓](https://github.com/strawberry2892). Сайт создан в рамках челленджа [JavaScript30](https://javascript30.com/).

Читать на [английском 🇬🇧](README.md)