JavaScript30 – Day 1 | Sign-t-ada

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). Actually I saw this challenge at the beginning of the year and thought "no, won't take it because probably I won't finish it" ... but here I am. I'm still not sure about finishing, but if I can get it through till the end of the year - well done! The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 1: Demo - Day 1

const– so far I've used only var to define variables. Const values cannot be changed or redeclared.
` back-ticks and template literals:
```
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
```
This is the part I struggled the most. If I copied it, it worked, if wrote it on my own– it didn't. And I couldn't understand why? And no ideas what to google for. Fortunately there is always Twitter. Yes, I know there are different types of quotes - ",',´. But turns out there are also backticks - on Win you can type them ALT + (num keyboard on right) 9+ (num keyboard on right) 6 or you have to Google for which key to press. `${variable}` as templating literals allowing embedded variables.
http://keycode.info/ to find quickly keyboard's key code.
if(!Obj) return; – stop the function if the Obj is null (there is no such object). I think I'm familiar with the concept but why I haven't it used before?

arrow-function So this function:

 allAs.forEach(function(element) {
             element.classList.add('playing');
        });

can be written as an arrow-function:

 allAs.forEach(element => element.classList.add('playing'));

<kbd> is html—tag for keyboard input
Adding audio files I had to add .mp3 to the end.
```
	
```
As I changed the word to "javascript" I had two "A"s. It got me some time to figure out that I can't detect if it is the first A or the second one by keypress. So, I had to modify my code: a) check if it is A b) if it is get all the A-s (document.querySelectorAll) c) and each of them add class "playing"
```
 if(e.keyCode =="65"){
         // get all letter A                 
         allAs = document.querySelectorAll(`div[data-key="${e.keyCode}"]`);
         allAs.forEach(element => element.classList.add('playing'));
         
    } else {
       key.classList.add('playing');
    }
```

Day 1 code on github.