0xD34F

не могу додуматься как сделать когда берется уже не первая буква второго слова а последующие

const alphabet = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'.split('');
const arr = [ 'нора','дом','аметист','баржа','танк','каток','еж','рак','сом','морж','рога','том','сани','лимон','рыба','кот','собака','море','креветка' ];
const result = [];

getWord(alphabet);


while (arr.length) {
  const lastLetter = result[result.length - 1].split('').pop();
  const lastLetterIndex = alphabet.indexOf(lastLetter);
  let letters = [ lastLetter ];

  for (let i = 1; i < alphabet.length; i++) {
    letters.push(alphabet[lastLetterIndex + i], alphabet[lastLetterIndex - i]);
  }
  letters = letters.filter(n => !!n);

  getWord(letters);
}

console.log(arr);
console.log(result);

function getWord(letters) {
  for (let i = 0; i < letters.length; i++) {
    const letter = letters[i];
    const index = arr.findIndex(n => n[0] === letter);

    if (index !== -1) {
      result.push(arr.splice(index, 1)[0]);
      return;
    }
  }
}

почему-то в таймер добавляется один лишний день

1. 
   val = this.value
   
   на
   
   val = this.value.toUpperCase()
   
2. 
   

   if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {

   
   на
   
   if (arr[i].toUpperCase().includes(val)) {
   
3. 
   

   b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
   b.innerHTML += arr[i].substr(val.length);

   
   на
   
   

   b.innerHTML = arr[i]
     .split(RegExp(`(${val})`, 'i'))
     .map((n, i) => i & 1 ? `<b>${n}</b>` : n)
     .join('');

   
   
   

Сначала подумал что можно рандомизированный массив засунуть в set...

function randomArr(length, min, max) {
  const values = new Set;
  while (values.size < length) {
    values.add((Math.random() * (max - min + 1) | 0) + min);
  }
  return [...values];
}


const arr = randomArr(40, 1, 100);

function randomArr(length, min, max) {
  const arr = Array.from({ length: max - min + 1 }, (n, i) => i + min);
  return Array.from({ length }, () => arr.splice(Math.random() * arr.length | 0, 1)[0]);
}

function randomArr(length, min, max) {
  const arr = Array.from({ length: max - min + 1 }, (n, i) => i + min);

  for (let i = arr.length; --i > 0;) {
    const j = Math.random() * (i + 1) | 0;
    [ arr[j], arr[i] ] = [ arr[i], arr[j] ];
  }

  return arr.slice(0, length);
}

const getClassStyles = className =>
  [...document.styleSheets].reduce((styles, { cssRules }) => {
    return [...cssRules]
      .filter(n => n.selectorText === `.${className}`)
      .reduce((styles, { cssText }) => {
        return (cssText
          .match(/[\w\-]+: [^;]+/g) || [])
          .map(n => n.split(': '))
          .reduce((styles, [ k, v ]) => (styles[k] = v, styles), styles);
      }, styles);
  }, {});


const styles = getClassStyles('class-name');

получилось вывести только элементы первого уровня, но не могу понять, как заставить выводиться дочерние элементы

const createTreeElement = data =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n) => {
        const li = document.createElement('li');
        const div = document.createElement('div');
        div.textContent = n.name;
        li.append(div, createTreeElement(n.children));
        ul.append(li);
        return ul;
      }, document.createElement('ul'))
    : '';


document.body.append(createTreeElement(data));

const createTreeHTML = data =>
  data instanceof Array && data.length
    ? `<ul>${data.map(n => `
         <li>
           <div>${n.name}</div>
           ${createTreeHTML(n.children)}
         </li>`).join('')}
       </ul>`
    : '';


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

const images = [
  {
    src: 'https://i.imgur.com/GigS3KR.png',
    translate: [ 50, 50, 500, 20 ],
    rotate: [ 340, 200 ],
    draw: [ 0, 0, 0.95 ],
  },
  {
    src: 'https://i.imgur.com/y3JAe69.png',
    translate: [ 5, 0, 382, 2 ],
    rotate: [ 630, 40 ],
    draw: [ 150, 100, 0.84 ],
  },
  {
    src: 'https://i.imgur.com/v30JIWp.png',
    translate: [ 8, 150, 198, 3 ],
    rotate: [ 500, 450 ],
    draw: [ 0, 0, 0.7 ],
  },
].map(n => {
  n.draw.unshift(new Image);
  n.draw[0].src = n.src;
  return n;
});

const canvases = document.querySelectorAll('.canvas');
const canvasSize = document.documentElement.clientWidth;

for (const n of canvases) {
  n.setAttribute('width', canvasSize);
  n.setAttribute('height', canvasSize);
}

let ts0;
window.requestAnimationFrame(function draw(ts) {
  for (const n of canvases) {
    ts0 = ts0 || ts;
    const dt = ts - ts0;

    const ctx = n.getContext('2d');
    ctx.clearRect(0, 0, canvasSize, canvasSize);

    for (const { translate: t, rotate: r, draw: d } of images) {
      ctx.save();
      ctx.translate(t[0], t[1] + Math.sin(dt / t[2]) / t[3]);
      ctx.rotate(Math.sin(dt / r[0]) / r[1]);
      ctx.drawImage(d[0], d[1], d[2], canvasSize * d[3], canvasSize * d[3]);
      ctx.restore();
    }
  }

  window.requestAnimationFrame(draw);
});

const radioSelector = '.radio_wrap input[type="radio"]';

const getLabel = el => document.querySelector(`[for="${el.id}"]`).textContent;
// или
const getLabel = el => el.nextElementSibling.innerText;
// или
const getLabel = el => el.labels[0].innerHTML;

// назначаем обработчик события каждой радиокнопке индивидуально
document.querySelectorAll(radioSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => console.log(getLabel(e.target)));

// или, можно сделать делегированный обработчик, где будет проверка, откуда пришло событие
document.addEventListener('change', ({ target: t }) => {
  if (t.matches(radioSelector)) {
    console.log(getLabel(t));
  }
});

setTimeout(show(i), i * 300);

1. Оберните вызов своей функции в другую функцию, которая будет передана в setTimeout:
   
   setTimeout(() => show(i), i * 300);
   
   
2. Выполните привязку параметра:
   
   setTimeout(show.bind(null, i), i * 300);
   
   
3. Передавайте свою функцию в setTimeout, а параметры, с которыми она должны быть вызвана, укажите отдельно:
   
   setTimeout(show, i * 300, i);
   
   
4. Перепишите свою функцию так, чтобы она возвращала другую функцию:
   
   

   function show(x) {
     return function() {
       // сюда помещаете то, что находится у вас в show сейчас
     };
   }

   
   

Не работающая часть
class NewsLoader {

const ancestorSelector = 'селектор дальнего родителя';
const descendantSelector = 'селектор потомка';

document.addEventListener('click', ({ target: t }) => {
  if (t.matches(descendantSelector)) {
    const ancestor = t.closest(ancestorSelector);
    if (ancestor) {
      ancestor.remove();
    }
  }
});

document.addEventListener('click', e => {
  const descendant = e.target.closest(descendantSelector);
  if (descendant) {
    const ancestor = descendant.closest(ancestorSelector);
    if (ancestor) {
      ancestor.remove();
    }
  }
});

document.addEventListener('click', ({ target: t }) =>
  t.matches(descendantSelector) &&
  t.closest(ancestorSelector)?.remove()
);

document.addEventListener('click', e => {
  e.target.closest(descendantSelector)?.closest(ancestorSelector)?.remove();
});

<span id="typed"></span>
<div id="actions">
  <button data-action="start">play</button>
  <button data-action="stop">pause</button>
</div>

const typed = new Typed('#typed', {
  typeSpeed: 100,
  loop: true,
  strings: [
    'hello, world!!',
    'fuck the world',
    'fuck everything',
  ],
});

document.querySelector('#actions').addEventListener('click', e => {
  const { action } = e.target.dataset;
  if (action) {
    typed[action]();
  }
});

const cloud = new Image();
cloud.src = 'https://avatanplus.com/files/resources/mid/56dc1ba4ba1b81534bcbfb9a.png';

(function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(300, 200);

  const time = new Date();
  ctx.rotate(Math.sin(time / 500) / 10);

  ctx.drawImage(cloud, -300, -200);
  ctx.restore();

  window.requestAnimationFrame(draw);
})();

100 * arr.reduce((sum, n) => sum + +n.no_apply, 0) / arr.reduce((sum, n) => sum + +n.count, 0)

• Собирать индексы на всех уровнях вложенности, вместо одного числа будете хранить массив
  
• Вместо индексов использовать id (лично мне это видится наиболее предпочтительным вариантом - при изменении структуры меню информация о выбранном пункте останется корректной)
  
• Ну и наконец, самый лёгкий и простой способ - воспользоваться методом index соответственно вашей задумке, замените $(this).index() на $('.sub3').index(this) (за подробностями - в документацию)