Leks's questions

document.addEventListener('keydown', e => {
    if (e.code == 'KeyW' && e.code == 'KeyQ') {
        console.log('yes')
    };
})

let canvas = document.getElementById('tutorial');
let c = canvas.getContext('2d');

let data = [16, 68, 20, 30, 54];
let labels = ["JAN", "FEB", "MAR", "APR", "MAY"];

c.fillStyle = 'grey';
c.fillRect(0, 0, 500, 500);
c.fillStyle = 'blue';

for (let i = 0; i < data.length; i++) {
    let dp = data[i];
    c.fillRect(25 + i * 100, 500 - dp * 5 - 30, 50, dp * 5);
}

c.fillStyle = 'black';
c.lineWidth = 2.0;
c.moveTo(30, 10);
c.lineTo(30, 460);
c.lineTo(490, 460);
c.stroke();

c.fillStyle = 'black';
for (let i = 0; i < 6; i++) {
    c.fillText((5 - i) * 20 + '', 4, i * 80 + 60);
    c.beginPath();
    c.moveTo(25, i * 80 + 60);
    c.lineTo(30, i * 80 + 60);
    c.stroke();
}

for (let i = 0; i < 5; i++) {
    c.fillText(labels[i], i * 100 + 50, 475);
}

c.fillStyle = 'white';
c.fillRect(0, 0, 500, 500);

c.fillStyle = 'blue';
for (let i = 0; i < data.length; i++) {
    let dp = data[i];
    c.fillRect(40 + i * 100, 460 - dp * 5, 50, dp * 5);
}

<canvas id="tutorial" width="500" height="500"></canvas>

function toggleText() {
  let button = document.querySelector('.toggle-text-button');
  let text = document.querySelector('#text');
  button.addEventListener('click', () => {
   
    if(text.hasAttributes('hidden') == true){
       console.log('adad')
      text.hidden = '';
    }
    text.hidden = true;
  })
}

toggleText()

<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
  <div id="text">Текст</div>

let arr = Array.from(document.querySelector('#grid').rows)
document.querySelector('#grid').addEventListener('click', event =>{
   if(event.target.dataset.type == 'number'){
      arr.forEach( item => {
         if(item.rowIndex > 0){
           
            arr.sort(() => {
               item.cells[0].firstChild.data > item.cells[0].firstChild.data
            })
            
         }
      }) 
   }
})

table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 4px;
  }
  th {
    cursor: pointer;
  }
  th:hover {
    background: yellow;
  }

  <table id="grid">
    <thead>
      <tr>
        <th data-type="number">Возраст</th>
        <th data-type="string">Имя</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>Вася</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Петя</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Женя</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Маша</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Илья</td>
      </tr>
    </tbody>
  </table>

class User {

  constructor(name) {
    this.name = name;
  sayHi() {
    alert('hello');
  }
  }

  

}

// Использование:
let user = new User("Иван");
user.sayHi();

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate 
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='0,314;314,0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg> 

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 120 120" >
  <!-- Фон серого цвета -->
  <rect x='0' y='0' width='100%' height='100%' fill='grey'/>
  <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
  <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='314; 0'
  />
  </circle>
  <text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text>
</svg>

<svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg">
<mask id='mask'>
<circle r="30" cx="50" cy="50" stroke='black' fill="black" stroke-width='50' stroke-dashoffset='20 20'>
<animate
attributeName='stroke-dashoffset'
begin='h.click'
dur='10s'
repeatCount='indefinite'
values='50'
/>
</circle>
<rect width="100%" height="100%" fill="green" />
</mask>
<circle r="30" cx="50" cy="50" fill="orange" />

<rect width="100" height="100" fill='tomato' mask='url(#mask)' />
</svg>

function sum(a){
  let sum = a;
  function count(b){
     return sum += b;
  }
  
   count.toString = function(){
    return sum;
  };
  return count;
};

console.log( sum(1)(2) );
console.log( sum(1)(2)(2) );
console.log( sum(1)(2)(2) );

<svg id="svg1" viewBox="0 0 520 520" width="500" style='border: 1px solid black'>
<ellipse cx="100" cy="50"  rx="80" ry="40" fill="red">
<animateColor attributeName="fill" 
         from="red" to="yellow" dur="3s"
         repeatCount="indefinite"/>
</ellipse>
</svg>

.gl {
  width: 300px;
  height: 300px;
  display: inline-block;
  max-width: 300px;
  max-height: 200px;
  background-color: #fff;
  position: relative;
  background-image: url('https://i.ibb.co/QfLmLrT/image.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.gl:before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, .5);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

a {
  color: red;
  font-size: 30px;
  cursor: pointer;
}

<div class="gl">
  <button>Know More</button>
</div>

<svg viewBox="0 0 520 520" width="500" style='border: 1px solid black'>
 
<defs>
<linearGradient id="MyGradient">
      <stop offset="0" style="stop-color:red;"/>
     <stop offset="100%" style="stop-color:blue;">
      <animate attributeName="offset" 
         from="0%" to="100%" dur="5s"
               repeatCount="indefinite"/>
      </stop>

</linearGradient>

  </defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/>
</svg>

let range = {
  from: 1,
  to: 5,
};

range[Symbol.iterator] = function(){
  return {
    d: this.from,
    s: this.to,

    next() {
      if( this.d <= this.s ){
        return {done: false, value: this.d++}
      } else{
        return {done: true};
      }
    }
  }
}

let arr = Array.from(range);

console.log( arr );

<svg width='400' height='400' style='border: 1px solid black'>
  
<radialGradient id='a'>
  <stop offset='40%' stop-color='red'></stop>
  <stop offset='60%' stop-color='blue'></stop>
</radialGradient>

<mask id='b'>
  <circle r="50" cx="50%" cy="50%" fill="url(#a)" />
</mask>
<image x="50%" y="50%" width="291" height="195"
       mask="url(#b)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>

</svg>

<svg width='400' height='400' style='border: 1px solid black'>
<defs>
   <clipPath  id='a'>
      <circle r="30" cy="100" r="90" />
  </clipPath >
</defs>  
  <image x="15%" y="35" width="250" height="250"
      clip-path="url(#a)" xlink:href="https://ibb.co/T0yn3RX"/>
</svg>

<svg viewBox="0 0 1000 400" width='1000' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern patternTransform='skew(10)' id="a" x='5' y='5' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="15" cx="15" cy="15" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="2"/>
</svg>

<svg viewBox="0 0 1000 400" width='1000' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='10' y='10' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="15" cx="10" cy="10" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="2"/>
</svg>

<svg width='1700' height='500' style='border:1px solid black' viewBox='0 0 400 400'>
  <path d="M15,15 L185,15 Z"/>
</svg>

let b = new MutationObserver(a => {
  console.log(a); // console.log(изменения)
});

// наблюдать за всем, кроме атрибутов
b.observe(elem, {
  childList: true, // наблюдать за непосредственными детьми
  subtree: true, // и более глубокими потомками
  characterDataOldValue: true  // передавать старое значение в колбэк
});

<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords);
});

mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
  // другие свойства пусты
}, {
  type: "characterData"
  target: <text node>
  // ...детали изменений зависят от того, как браузер обрабатывает такое удаление
  // он может соединить два соседних текстовых узла "Отредактируй " и ", пожалуйста" в один узел
  // или может оставить их разными текстовыми узлами
}];

<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>