https://github.com/terkasm/cviceni-xylofon

https://github.com/terkasm/cviceni-xylofon

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/terkasm/cviceni-xylofon
• Owner: TerkaSm
• Created: 2023-10-17T10:03:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-17T11:49:41.000Z (over 1 year ago)
• Last Synced: 2024-11-05T11:15:26.040Z (3 months ago)
• Language: CSS
• Size: 1.15 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Cvičení: Xylofon

## Zadání

Oživ xylofon, aby kliknutí na jednotlivé kameny měnilo nadpis stránky podle písmene na kameni a ozval se příslušný tón.

![ukázka](zadani/xylofon.gif)

1. Vycházej z kódu v tomto repozitáři.

1. Pracuj v souboru `index.js`.

1. Soubory `index.html`, `styly.css` a složku `tony` si jen zběžně prohlédni.

1. Pomocí `querySelectorAll` najdi na stránce všechny kameny a přidej jim posluchač události na kliknutí.

1. V posluchači změň nadpis stránky `
` na text stištěného kamene.


1. Se stiskem přehraj i příslušný mp3 soubor ze složky `tony`.

   Tón přehraješ tak, že si do proměnné uložíš nové audio a poté na něm zavoláš metodu `play`.

   ```js

   const zvuk = new Audio('tony/D.mp3')

   zvuk.play()

   ```

## Bonus

Přidej ovládání přes klávesnici.

1. Přidej posluchač události `keydown` na celou stránku.

1. Pokud vlastnost `code` vzniklé události začíná na `Digit`, ulož si do proměnné následující číslo. Například z `Digit4` si ulož `4`.

1. Pokud je číslo větší nebo rovno jedné a menší nebo rovno počtu kamenů, přehraj tón na příslušném kamenu. Nezapomeň, že pole se v JavaScriptu indexují od nuly, takže například pro číslo `1` přehraj tón na kameni s indexem `0`.