Максим

Не добавляется потому что нельзя в одном addEventListenerписать два события.
click touch

А анимацию с помощью @keyframes
css:

.active{
    animation-name: toggle;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

@keyframes toggle{
  50% {transform: scale(0.7)}
  100% {transform: scale(1)}
}

js:

leftBtn.addEventListener('click', (evt) => {
    leftBtn.classList.add('active')
    setTimeout(()=>{
      leftBtn.classList.remove('active')
    }, 300)
})

Пример функции для выборочного обновления контента:

async function elementUpdate(selector) {
	try {
		var html = await (await fetch(location.href)).text();
		var newdoc = new DOMParser().parseFromString(html, 'text/html');
		document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML;
		console.log('Элемент '+selector+' был успешно обновлен');
		return true;
	} catch(err) {
		console.log('При обновлении элемента '+selector+' произошла ошибка:');
		console.dir(err);
		return false;
	}
}

Вызывайте функцию elementUpdate() передав внутрь него CSS-селектор того элемента, который вы хотите обновить. Например, если взять таблицу, которая имеет id равное test, то достаточно выполнить:
elementUpdate('table#test');

Если хотите привязать это действие к кнопке, то можете сделать так:

<button onclick="elementUpdate('table#test');">Нажми меня, чтобы обновить таблицу</button>

Как получить src:

const getSrc = img => img.getAttribute('src');
// или
const getSrc = img => img.attributes.src.value;

Чтобы дальше два раза одно и то же не писать, небольшой декоратор:

const relativeOnly = f => img => {
  const src = getSrc(img);
  if (!/^https?:\/\//.test(src)) {
    f(img, src);
  }
};

Можно перезаписывать разметку:

document.querySelectorAll('img').forEach(relativeOnly((img, src) =>
  img.outerHTML = `
    <picture>
      <source srcset="${src}" type="image/svg+xml">
      ${img.outerHTML}
    </picture>`
));

Или, создавать новые элементы напрямую:

const wrapImages = relativeOnly((img, src) => {
  const picture = document.createElement('picture');
  const source = document.createElement('source');
  source.srcset = src;
  source.type = 'image/svg+xml';
  img.replaceWith(picture);
  picture.append(source, img);
});

for (const n of document.getElementsByTagName('img')) {
  wrapImages(n);
}

// или

Array.prototype.forEach.call(document.images, wrapImages);

Как проще реализовать подобные блоки?

Простыми div с заливкой и позиционированием, это ж просто черные и белые прямоугольники. Если хотите красоты в коде - то блоками before, after, тегов меньше, суть та же.

https://jsfiddle.net/j3suj624/

Где удалять: const className = 'cart__counter';.

Как удалять:

const remove = el => el.innerText = parseInt(el.innerText);
// или
const remove = el => el.innerHTML = el.innerHTML.match(/\d+/)[0];
// или
const remove = el => el.textContent = el.textContent.replace(/\D/g, '');
// или
const remove = el => [ el.firstChild.data ] = el.firstChild.data.split(' ');
// или
const remove = el => el.childNodes[0].nodeValue = parseFloat(el.childNodes[0].nodeValue);

Удаляем:

document.querySelectorAll(`.${className}`).forEach(remove);

// или

for (const n of document.getElementsByClassName(className)) {
  remove(n);
}

Но вообще, это конечно костыль. Вы бы посмотрели - может есть возможность настроить корзину так, чтобы лишние надписи изначально не выводились.

Добавь viewBox

https://jsfiddle.net/zu6mnxpy/

SVG + 2 маски, одна пропорционально растягивается, другая непропорционально. Отрицательным margin загнать секции одна на другую.

https://codepen.io/aliencash/pen/vYKopwa

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

Если нет желания тратиться на собственный домен (560р/год в зоне ru), для демонстрации верстки вполне можно ипользовать github pages. Тройной бонус — бесплатно, виден результат, виден код.

Если 560 р/год не жалко, можно и домен приобрести, сделать свой сайт, разместить на нем портфолио, резюме, вести блог разработчика.

Я создавал темы на форумах, о том что бесплатно сверстаю что-то в шару, желающих было много, выбирал те проекты которые мне были по плечу и делал. После чего получал отличный фидбек как от заказчиков так и от тех кто скачивал шару, плюс ко всему это не поделка для себя, какая-то конкретная задача, хоть и бесплатно. После пары таких макетов, я уже начал брать символическую плату и верстать на заказ и портфолио само росло. Но опять же смотря какие цели вы преследуете, чтобы попасть в компанию вам необязательно иметь какое-то особенное портфолио, пару примеров, список навыков, главное не писать все подряд, типа люблю погрустить у окна и т.д.. только по факту и только по конкретной работе. А вот если собираетесь на фриланс, тут уже нужно создать вау эффект, чтобы конкурировать, хороших фрилансеров по рекомендациям находят, а не по портфолио, но начинать с чего-то надо.

гугли "rhombus layout codepen"
https://codepen.io/fafi/pen/cqDCu
https://codepen.io/imhvost/pen/KmweVp