This is the third day of my participation in Gwen Challenge

I. Background introduction

What is JavaScript30? JavaScript30 is a 30-day pure JavaScript coding challenge from Wes Bos. The project comes complete with 30 days of video tutorials, documentation and source code for solutions to 30 challenges. Designed to help us play with pure JavaScript, truly no framework, no compiler, no libraries and no references.

The official website says:

Build 30 things in 30 days with 30 tutorials



No Frameworks×No Compilers×No Libraries×No Boilerplate

List the relevant link address of the project, not repeated in the later stage:

JavaScript30 Challenge official website: javascript30.com/

JavaScript30 challenge github source address: github.com/wesbos/Java…

Chinese Contact Guide Address: github.com/soyaine/Jav…

Second, the purpose of

Although there are relevant information on the Internet, but I still want to practice, record their own process, check the gaps, do a challenge, at the same time to increase their own thinking, after all, code knocking this thing, eyes over a thousand times, not as hand over again, read more, not as again and again to achieve their own.

As stated on the author’s website:

There is no formation without repetition.

Three, reserve knowledge

Here it mainly refers to some reserve knowledge about ES6. It can be seen from the author’s final code that the author uses:

  1. Const (declared read-only constant, non-repeatable assignment) and template strings;
  2. ForEach and arrow functions.

Iv. Case implementation process

This module is intended to simulate a drumming page. When the user hits the keys ASDFGHJKL on the keyboard, the buttons corresponding to the keyboard letters on the page will change, with bright circles and enlarged effects, and the corresponding sound similar to drumming will be emitted.

Five, the implementation

First, we can download the github source code locally, and we will find that each file contains two such files.

  • Index-start. HTML ———— this is the initialization document, which has written the basic HTML and CSS styles, we only need to write JavaScript code.
  • Index-finished. HTML ———— this must be the final document that has been implemented, so that we can see the final results and provide ideas for solutions.

    The final code

    <script>
    (function(){

        window.addEventListener('keydown',playHandler)

        function playHandler(e){

          console.log(e); 

          //play music

          const audio = document.querySelector(`audio[data-key="${e.keyCode}"] `);
          
          if(audio) {

            audio.currentTime = 0;

            audio.play();
            
          }
          
          //console.log('audio',audio);

          //dom style

          const dom = document.querySelector(`div[data-key="${e.keyCode}"] `);

          if(dom) {

            dom.classList.add('playing');

          }

          //console.log('dom',dom);
        }
        
        document.querySelectorAll('.key').forEach(key= > {

              key.addEventListener('transitionend',transitionHandler);

          })

          function transitionHandler(e){

              console.log(e);

              if(e.propertyName === 'transform'){

                e.currentTarget.classList.remove('playing');

              }

          }

    })()
</script>
Copy the code

    6. Summary and review

    As you can see from the above code, there are three main things that this feature does:

    Added keyboard events to play corresponding sound effects to change the style of click effects

    (function(){
        window.addEventListener('keydown',playHandler)

        function playHandler(e){

          console.log(e); 

          //play music

          //dom style

        }
    })()
Copy the code

    1. Process decomposition

    1. Keyboard listening event;
    2. Add keyDown (or keyUp if you prefer) to the window keyboard event;
    3. Corresponding event processing, including:

    (1) First, I got the key code of the keyboard event;

          Such as F12.

          Like the directional button (2) Use querySelector to get elements (don’t ask why, just ask);

    (3) Elements matching data-key and corresponding key code;

          const audio = document.querySelector(`audio[data-key="${e.keyCode}"] `);
      
      const dom = document.querySelector(`div[data-key="${e.keyCode}"] `);
Copy the code

    (4) Element processing, that is, playing sound, style changes.

    audio.play();

dom.classList.add('playing');
Copy the code

    When we get to this stage, which of course is not done, there are two questions:

    (1) The style cannot be closed after the button is pressed;

    ② When you open the console (F12), hold down A button continuously, such as A, you will find that sometimes it is triggered, sometimes it is not triggered.

    ③ When I randomly press another key, it will report an error.

    1. Add the transitionEnd event to each ‘. Key ‘.

    Note here that the transitionEnd event has many attributes.

    Let’s show its properties in code:

    document.querySelectorAll('.key').forEach(key= > {
              key.addEventListener('transitionend',transitionHandler);
          })
          function transitionHandler(e){
              console.log(e);
          }
Copy the code

    On the console we can see several of its properties:

    7. Key and difficult points

    1. Corresponding keyboard keys and page buttons

          const audio = document.querySelector(`audio[data-key="${e.keyCode}"] `);
      
      const dom = document.querySelector(`div[data-key="${e.keyCode}"] `);
Copy the code

    2. The button cannot be closed, that is, the page button cannot be restored to its original state

    The transform property in the transitionEnd event removes the style each time the key is triggered.

       if(e.propertyName === 'transform'){

       e.currentTarget.classList.remove('playing');

   }
Copy the code

    3. An error is reported when pressing other keys on the keyboard

       if(audio) {

       audio.play();
   }
          
   if(dom) {

       dom.classList.add('playing');

   }
Copy the code

    4. If you hold it down, it will not trigger immediately

    All you need to do is set the playback time to 0 before each sound is played.

          if(audio) {
            // Set the time to 0 before each playback
            audio.currentTime = 0;

            audio.play();
      }
Copy the code

    5. Digression

    If you are interested, you can go to see the label of KBD written inside the author. Although we only need to add JavaScript code, we need to have a good understanding of what has already been written, otherwise we can’t do anything else.

    Today is over, the holiday is coming soon, I wish you a happy holiday!