Максим

Попробуйте заменить кавычки на обратные `:

$('#bombfire').html(`
<svg>...</svg>
`);

Только в обратных "бэк-тиках" можно текст разбивать на строки. Подробнее про строки и кавычки.

В обычных одинарных кавычках, как у вас, новую строку надо бы предварять обратным слешем:

const str = ' \
  line 1 \
  line 2 \
';

є декілька варіантів, сучасний це через спред оператор
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];

є більш старенький, але теж крутий
const arr4 = arr1.concat(arr2);

є ще крутий спосіб з reduce але в даному випадку він складний

в вашому випадку треба
let mass1 = ["zn1", "zn2", "zn3"];
let mass2 = [
{t1: "aa", p1: "lot"},
{t1: "ab", p1: "kot"},
{t1: "ac", p1: "mot"}
];

const newArr = mass2.map((item, idx) => {
return {...item, head: mass1[idx]}
})

Вариант с reduce() в копилку:

const zip = (arr1, arr2) => arr1.reduce(
  (acc, head, i) => (acc.push({ ...arr2[i], head }), acc),
  []
);

Использование:

zip(mass1, mass2) 
/* [
  { t1: "aa", p1: "lot", head: "zn1" },
  { t1: "ab", p1: "kot", head: "zn2" },
  { t1: "ac", p1: "mot", head: "zn3" },
] */

Конечно, map() тут больше подходит:
mass1.map((head, i) => ({ head, ...mass2[i] }))

Если массивы одинаковой длины, то можно просто через цикл

let mass1 = ["zn1", "zn2", "zn3"]
let mass2 = [
  {t1: "aa", p1: "lot"},
  {t1: "ab", p1: "kot"},
  {t1: "ac", p1: "mot"}
]

let mass3 = []

for (let i = 0; i < mass1.length; i++) {
    mass3.push(
        Object.assign(mass2[i], {head: mass1[i]})
    )
}

1 вариант

[...new Map(arr.map((item) => [item["key"], item])).values()]

2 вариант

const uniqueIds = [];
arr.filter(element => {
  const isDuplicate = uniqueIds.includes(element.key);

  if (!isDuplicate) {
    uniqueIds.push(element.key);

    return true;
  }

  return false;
});

3 вариант
https://docs-lodash.com/v4/uniq-by/

4 вариант

Object.values(
  arr.reduce( (c, e) => {
    if (!c[e.key]) c[e.key] = e;
    return c;
  }, {})
);

5 вариант

const unique = (arr, key) => {
   const keys = new Set();
   return arr.filter(el => !keys.has(el[key]) && keys.add(el[key]));
 };
unique(arr, 'key')

По каким полям нужно сравнивать, можешь допилить сам.

getElementsByClassName() возвращает не ваш input, а живую HTML-коллекцию с единственным элементом. У коллекции нет свойства value.

- let input = document.getElementsByClassName('form-control');
+ const input = document.querySelector('input.form-control');

const res = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await res.json();
console.log(data)

.item{
display: flex;
  flex-direction:column;
  align-items:center;
  
}
span{
  margin-top: auto;
}

Не" какой-то другой", а "какой-то неправильный". Если ты поставишь например 0 0 500 500 - всё будет работать, просто бублик будет в 10 раз меньше.
Собственно это то, что делает viewBox - задаёт систему координат для вложенных элементов. Т.е. width у тебя 500px - эти 500px, размечены на отрезки от 0 до 50. Т.е. 1 -> 10px, r="15.9" -> r="159px". Всё просто.

Отменить всплытие события в обработчике клика дочернего элемента с помощью event.stopPropagation()

document.querySelector('.close').addEventListener('click', function(e){
  e.stopPropagation()
  document.querySelector('.result').insertAdjacentHTML('beforeend', '<div>Close</div>');
});

Либо в обработчике делать проверку на то, на каком конкретно элементе произошёл клик.

Object.fromEntries(Object.entries(obj).sort((a, b) => b[1] - a[1]))

Вот вроде основные:
GSAP,
TweenMax js
ScrollMagic js
barba js
swiper js
lottie

Возможно есть аналоги на js или jquer

Они все на js. Хотя jQuery у них к сайту тоже подключается.

Свойство order применяется только для flex и grid элементов, собственно, оно корректно только когда его родительский контейнер имеет свойство display: flex либо grid.

html, body {
  margin: 0;
  padding: 0;
}

Повторяющимся радиальным градиентом
https://jsfiddle.net/Ankhena/h21s4o0m/

google: chevron css