Tag Archives: day1

JavaScript30 – Day 1

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
  1. const– so far I've used only var to define variables. Const values cannot be changed or redeclared.
  2. ` 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.
  3. http://keycode.info/ to find quickly keyboard's key code.
  4. 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?
  5. 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'));
  6. <kbd> is html—tag for keyboard input
  7. Adding audio files I had to add .mp3 to the end.
  8. 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.