Projects > Interact with JS

Interact with JS

June 01, 2021 | Learning JS

Event Listener

        
          window.addEventListener('keydown', function(e) {
            console.log(e)
            // e is all about keydown events
            // Ex: change, keydown, keyup, mouseover, mouseout, mousemove;
          })
        
      

Query Selector

        
          // Let's say we have 3 html elements
           audio data-key="57" src="sounds/sfdas.mp3" 
           audio data-key="23" src="sounds/test.mp3" 
           // data-key here is a made up attribute
           // It's a start to use data-name 

           div class="key" data-key="57"
           div class="key" data-key="23"
        
        
           const audio = document.querySelector(`audio[data-key=${57}]`);
           // audio has many properties such as currentTime, play, stop
          // Query selecting with where
          const key = document.querySelector(`.key[data-key=${23}]`);
          // key.dataset tells about data-key
          // You can use not just any html element but also class to find the element
        
      

Query SelectorAll

        
          // You can select all the html objects with
          let keys = document.querySelectorAll('.keys');
          // You can do many things such as
          // Create event listener for each
          keys.forEach(key => key.addEventListener('event', functionName));
        
      

CSS Interaction

      
        key.classList.add('cssClass');
        key.classList.remove('cssClass');
        key.classList.toggle('cssClass');
        key.style.ProperName = newValue;
        // clock.style.background = "black";
        // If you target the element, you can add it with this
      

      

Useful functions

      
          // Run function after time, repeat
          setInterval(function, time); 
          // Run function once after time, no repeat
          setTimeOut(function, time); 
      
      

ES6 Fx vs Normal Fx

      
          const updateHandle = (e) => {
            console.log(e, e.target, e.target.value);
          }
      
      
        function updateMove() {
          console.log(this.value);
        }
      
      
      const inputs = document.querySelectorAll('input');
      inputs
        .forEach(input => input.addEventListener('change', 
          e => updateHandle(e)));
      inputs
        .forEach(input => input.addEventListener('mousemove', 
          updateMove));
      
      

Document

      
        document.documentElement.style.setProperty(`--var`, newVar)