Сергей Соколов

new Promise((resolve, reject) => {
  sql.query("SELECT * FROM users", (err, result) => {
    if (err) reject(err);
    else resolve(result);
  });
})
.then((result) => {
  console.log("Result!", result);
})
.catch((err) => console.error(err));

Заменили innerHTML — потеряли элементы, что там были до этого, с их слушателями.

В этой строке

document.querySelector('.show-wrapper').innerHTML = tasks.map...

удаляется элемент кнопки со слушателем. Вставляется новая разметка, с такой же кнопкой, но на которой нет слушателей.

$search = 'test';

$contains = array_keys(array_filter($arr, function($item) use ($search) { return in_array($search, $item['users']); }));

print_r($contains);  // ['test1']

Ключ одного из содержащих самый короткий подмассив 'users':

$keys = array_keys($arr);
usort($keys, function($a, $b) use ($arr) {
    return count($arr[$a]['users']) - count($arr[$b]['users']);
});

$shortest = $keys[0];

Таймеры щелкают не в классе, где их создали, а в глобальном объекте window – это его методы setTimeout(), setInterval(). Так что удалив какой-то свой объект, таймеры не погасить.
Надо сохранять id созданных таймеров и выключать их через clearTimeout(), clearInterval()

Не меняется, потому, что в JS примитивные типы (число, строка) передаются «по значению». Внутри цикла оказывается копия значения, никак не связанная с оригиналом. Поменять это значение в цикле — оно не изменяется в источнике.

Другое дело объекты – они передаются «по ссылке», и их содержание можно менять:

let a = [{v: 1}, {v: 2}, {v: 3}];
for (let obj of a) {
  obj.v += 1;
}
a // [{"v":2},{"v":3},{"v":4}]

Подробнее про Копирование объектов и ссылки

Свойство childNodes содержит живой NodeList дочерних узлов, не элементов. Первым идёт текстовый узел из пробелов и слова "от". Его-то и надо удалить.

const el = document.querySelector('span.qodef-e-price-value.qodef-e--value');

el.removeChild(el.childNodes[0]);

Букву строки можно получить, обратившись к строке по индексу:
'one'[0] // 'о'

const str = arr.map((word) => word[0]).join(', '); // 'o, t, t'

Из массива слов получается массив букв ['o', 't', 't'],
который склеивается в строку через разделитель запятая+пробел.

Можно заморочиться, арк'ами рисовать бублик:


Как текст рисовать: документация.

Можно без тригонометрии воспользоваться трансформациями canvas.
Двигать точку отсчёта ctx.translate(x, y) и поворачивать на угол ctx.rotate(a).

Набросал пример рисования ломаной штуковины, состоящей из прямых сегментов заданной длины и каждая крутится со своей скоростью:


p.s. Где-то встречалась тема, что концом такой конструкции можно нарисовать абсолютно любую фигуру. Хоть портрет в линиях, хоть подпись. Чем больше колен, тем точнее. Если помните такое — киньте ссылку, пожалуйста.

upd. Нашёл! Видео про комплексный ряд Фурье. Посмотрите, вдохновляет.

По клику получать элемент, его значение, его родительский список.
Определить второй список. В нём найти элемент с таким же значением:

Создать canvas, отрисовать в них картинку, получить из канвы Blob, из него ByteArray.

Примерно так:

const img = document.querySelector("img");

const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

canvas.toBlob((blob) => {
  blob.arrayBuffer()
  .then((buf) => {
    // тут как-то отправить эту буффонаду через WebSocket
  })
  .catch(console.error)
  ;

}, "image/png");

★ картинка должна загружаться с того же домена, что и страница, иначе она будет считаться «небезопасной» и не получиться её так прогнать через canvas.