Вадим

Подскажите что тут не правильно, ведь text() возвратить должен ответ сервера в виде текста?

Тут всё правильно. resp.text() как Вы заметили, тоже возвращает промис. А вот следующий then уже вернёт данные.

fetch(ajaxurl, {
  method: 'POST',
  body: formData
})
.then(resp => resp.text())
.then(data => alert(data))

А в чём сложность? У Вас все переменные уже есть. Осталось найти 100%.
100% это ширина для контента у родительского блока.
родительский блок - elem.parentElement
а там уже на Ваше усмотрение(по ситуации) как узнать чему будем равняться доступная для контента ширина.
Например
el.parentElement.clientWidth
или

getComputedStyle(el.parentElement).width // более точный результат, так как спрашивает у браузера конечные стили. Но, соответственно, и отработает медленнее(на глаз не заметно)

Не забудьте про падинги.

https://masonry.desandro.com/

Ну а вот подробная статья что можно получить сегодня другими методами (без js)
https://habr.com/ru/post/526008/

Фон linear-gradient + частицы на canvas.
Например, с помощью https://vincentgarreau.com/particles.js/#nasa

По клику на кнопку у неё меняется состояние. В данном случае - data атрибут.
По ховеру и по значению этого атрибута задано одинаковое оформление.

Если я верно понял, то проблема в том, что счётчик у карточек не работал.
И тогда ответ такой: потому что Вам стоит подучить область видимости, контекст, замыкания.
хотфикс:

https://developer.mozilla.org/ru/docs/Web/CSS/user...

Только вот действительно ли Вам нужен Map?

Array.from(map.values()).map(i=>`<li>${i}</li>`).join('') // "<li>Hello</li><li>World</li>"

let map = new Map([ [1, 'Hello'], [2, 'World'] ]);

let str = `
  Start
  <ol>
  ${ Array.from(map.values()).map(i=>`<li>${i}</li>`).join('') }
  </ol>
  End

Только вот не для фронта эта задача.

const result = {};
const arr = [{ name: "cat" }, { name: "cat" }];

arr.forEach(function(item){
  if(result[item.name]) {
    result[item.name].count += 1;
  } else {
    result[item.name] = {...item, count: 1};
  }
})

console.log(result) // { cat: { name: 'cat', count: 2 } }
console.log(Object.values(result)) // [{ name: "cat", count: 2 }]
console.log(arr) // [{ name: "cat" }, { name: "cat" }];

С переключением классов справитесь?

Изображений - сколько угодно.
Спецификация: https://html.spec.whatwg.org/multipage/grouping-co...
Пример из спецификации:

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

Если группировать figure во вложенные figure, то и figcaption тоже может быть много(по одной на каждый figure).
Пример из спецификации:

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

Теория: https://learn.javascript.ru/modifying-document
Примитивная демка:


Если вызвать append для элемента, который уже есть в дереве, то он вырежется из предыдущего места и вставится в указанное.

JS:

// так как Вы упомянули jQuery, то будем пользоваться старыми методами создания массива из html коллекции и var

var items = Array.prototype.slice.call(document.querySelectorAll('.cart__box-desktop-item')) 
var emptyMessageElement = document.querySelector('.cart__box-desktop-message')

// определяем что у всех есть класс none
var isAllHidden = items.every(function(item){return item.classList.contains('none')}) 

if(isAllHidden) {
  emptyMessageElement.classList.remove('none')
} else {
  emptyMessageElement.classList.add('none')
}

Если я правильно понял, Вы хотите добавлять класс на родительский элемент для ссылки.
Для этого поменяйте
$('.cat-article').addClass
на
$(this).closest('.cat-article').addClass

А если без jQuery, то на современном js будет так же просто(и работать будет быстрее):

this.closest('.cat-article').classList.add('cat-article-title')

А если ссылка прямой потомок cat-article то можно обойтись простым js без поиска по дереву(самый производительный вариант):

this.parentElement.classList.add('cat-article-title')

Потому что Вы в addTaskдобавляете класс lineThrough а в css у Вас textThrough.

const DONE = done ? 'textThrough' : ''; // profit

Теория

хотфикс решение:

.about-photo1-mobile:hover .about-photo1-hover {
    display: block;
    width: 762px;
    height: 722px;
    left: calc(50% - 332px/2 - 1px);
    background: rgba(237, 231, 230, 0.9);
    margin-top: -380px;
    padding-top: 47px;
    transform: translate3d(0,0,0); /* new */
}

А почему нет? picture рендерит img.
А img же можно в figure?
https://caninclude.glitch.me/can/include/?child=pi...