RAX7

Если используется нативный скрол, то можно повешать Intersection Observer

const arr = ['utmTerm0=java', 'utmTerm1=javascript', 'utmTerm2=swift']
const obj = Object.fromEntries(arr.map(str => str.split('=', 2)));

let err = "global error";

function foo(err) {
  if (err) {
    console.log("error:", err);
  }

  err = new Function("return err")();
  if (err) {
    console.log("global:", err);
  }
}

foo("argument error");

Делать так ни в коем случае не нужно

var arr = ['div', 'p', 'span'];
var main = document.querySelector('.main');

for (let i = 0, container = main; i < arr.length; i++) {
  let el = document.createElement(arr[i]);
  container.append(el);
  container = el;
}

css transition не поддерживает анимацию градиентов.
На js это можно реализовать с помощью requestAnimationFrame

const lerp = (a, b, t) => a * (1 - t) + b * t;

// from: https://easings.net
const easeOutQuad = (x) => 1 - (1 - x) * (1 - x);

function tween(from, to, duration, onUpdate, easeFn) {
  let rafId = null;
  let begin;

  const loop = (now) => {
    begin ??= now;
    const progress = Math.min(1, (now - begin) / duration);
    const ease = easeFn ? easeFn(progress) : progress;
    const val = lerp(from, to, ease);

    onUpdate(val);

    if (progress === 1) {
      rafId = null;
      return;
    }

    rafId = requestAnimationFrame(loop);
  };

  rafId = requestAnimationFrame(loop);

  return () => rafId ?? cancelAnimationFrame(rafId);
}

const progressBar = document.querySelector(".progressbar");
const progressBarValue = document.querySelector(".progressbar__value");

const progressBarStartValue = 0;
const progressBarEndValue = 100;
const progressBarStep = 10;
const animationDuration = 1000;

let progressBarCurrentValue = progressBarStartValue;
let killTween = null;

function onUpdate(val) {
  progressBarValue.textContent = `${val.toFixed(1)}%`;
  progressBar.style.background = `conic-gradient(#FFF ${val * 3.6}deg, #262623 ${val * 3.6}deg)`;

  if (val === progressBarEndValue) {
    alert("you have completed all the tasks");
  }
}

document.body.addEventListener("click", (e) => {
  if (progressBarCurrentValue === progressBarEndValue) {
    alert("you have completed all the tasks");
  } else {
    const fromValue = progressBarCurrentValue;

    progressBarCurrentValue = Math.min(
      progressBarEndValue,
      progressBarCurrentValue + progressBarStep
    );

    killTween?.();
    killTween = tween(
      fromValue,
      progressBarCurrentValue,
      animationDuration,
      onUpdate,
      easeOutQuad
    );
  }
});

- DrawerProps.items
+ DrawerProps['items']

const container = document.querySelector('.container');
const line = document.querySelector('.invisibility');

const marginBottom = line.getBoundingClientRect().top - container.getBoundingClientRect().bottom;

const options = {
  root: document.querySelector('.container'),
  rootMargin: `0px 0px ${marginBottom}px 0px`,
  threshold: 0
}

const callback = function(entries, observer) {
  entries.forEach((entry) => {
    entry.target.style.background = entry.isIntersecting ? 'green' : 'red';
  });
};

const observer = new IntersectionObserver(callback, options);

container.querySelectorAll('.item').forEach(item => {
  observer.observe(item);
});

let obj = { a: 10, b: 20, c: 30, d: 40, e: 50 };
let sum = 0;

for (const num of Object.values(obj)) {
  const s = num.toString()[0];
  if (s === "1" || s === "2") {
    sum += num;
  }
}

console.log(sum);

- var searchSite = /((https:\/\/[a-z0-9]+\.[a-z-.]+)|(^[a-z0-9.-]+\.[a-z]+))/gi;
+ var searchSite = /((https:\/\/[a-z0-9]+\.[a-z-.]+)|([a-z0-9.-]+\.[a-z]+))/gi;

В качестве альтернативы наследованию можно использовать агрегацию

const obj = {
  _sayHi() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

class Person {
  constructor(name, age, methods) {
    this.name = name;
    this.age = age;
    this.methods = methods;

    if (this.age < 0) {
      this.age = 0;
    }
  }

  sayMyName() {
    this.methods._sayHi.call(this);
  }
}

new Person('Heisenberg', 52, obj);

function stringChallenge(str) {
  let $ = ['*', '', '-'], _ = $[1];
  for (let i = 0.666, a, b; a = str[~~i], b = str[-~i], i < str.length - 1; i++) {
    _ += a + ((+a && +b) ? $[(a & 1) + (b & 1)] : $[1]);
  }
  return _.concat(str.at(-1));
}

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;
  
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  document.body.appendChild(canvas);
};

saveImage();

либо

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;

  ctx.translate(canvas.width / 2, canvas.height / 2);

  ctx.drawImage(
    image,
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  document.body.appendChild(canvas);
};

saveImage();

Вынеси значение scale в переменную:

.clouds:nth-child(2) {
    --scale: 2;
    top: 180px;
    left: 28px;
    z-index: 2;
}

.cloud {
    animation: scale 3s infinite alternate;
}

@keyframes scale {
    from {
      transform: scale(var(--scale));
    }
    to {
      transform: scale(calc(var(--scale) / 2));
    }
}

P.S. не использую раздельные свойства для трансформаций, они еще плохо поддерживаются https://caniuse.com/mdn-css_properties_scale

array.join(' or ')

Держи, сделал небольшой набросок.

а если они касаются друг друга, они приобретают цвет другого элемента

Эту часть уже лень делать. Хотя это не сложно, нужно только добавить еще две таких же кляксы и посчитать расстояние между их центрами, что бы понять пересекаются ли они и нужно ли у них менять цвет.

метод sort не правильно используется

- return aDist < bDist;
+ return aDist - bDist;

скорее всего это и есть причина такого поведения. Результатом aDist < bDist всегда будет либо true, либо false, что в данном контексте будет трактоваться как 1 и 0, т.е. aDist всегда больше или равен bDist и никогда не меньше него. Из-за разных используемых алгоритмов сортировки, разные движки сходят с ума по разному.