JSFiddle - React, Tailwind, and code Playground

by paveltrty

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="katalog">
    <div href="" class="goods js-goods" data-goods-price="100" data-goods-name="moher" data-goods-src="1.jpeg" data-goods-matirial="matirial" data-goods-developer="prois" data-goods-weight="200">
			<a href="" class="goods__img"><img class="goods__img"src="1.jpeg" alt="" ></a>
			<a href="" class="goods__about"><p> красный мохер <br/></p></a>
			<a class="goods__in-basket js-btn-add-to-cart js-open-modal" data-popup="goods-popup">добавить в корзину</a>
    </div>
    <div href="" class="goods js-goods" data-goods-price="12" data-goods-name="qasa" data-goods-src="2.jpeg" data-goods-matirial="m12tirial" data-goods-developer="prois" data-goods-weight="100">
			<a href="" class="goods__img"><img class="goods__img"src="2.jpeg" alt="" ></a>
			<a href="" class="goods__about"><p> 121 <br/></p></a>
			<button class="goods__in-basket js-btn-add-to-cart" data-popup="goods-popup" >добавить в корзину</button>
    </div>
    </div>
    <div class="js-cart">
      <div class="cart-item">
        <img class="cart-item__img " src="1.jpeg">
        <h1 class="cart-item__name cart-item__description">moher</h1>
        <h2 class="cart-item__matirial cart-item__description" >sksdos</h2>
        <h2 class="cart-item__price cart-item__description">sksdos</h2>
        <label >
            <h2 class="cart-item__description cart-item__label-name"> asc</h2>
            <input type="text" class="cart-item__input-of-weight">
        </label>
        <button class="js-btn-cart-item-remove delete-button"></button>  
      </div>
      <div class="js-cart-total-price"></div>     
      <div class="js-cart-total-qnt"></div> 
      <div class="popup goods-popup">
      <div class="popup__wrapper">
        <div class="popup__inner">
          <div...

CSS

html{
  font-family: sans-serif;
}
.goods{
    text-decoration: none;
    display: grid;
    grid-template-columns: 2fr 0.5fr;
    background: #47857A;
    max-height: 290px;
    max-width: 220px;
}
.goods__about{
	text-decoration: none;
	color: #000;
	margin-left: 10px;
	font-family: "RobotoSlab";
	font-weight: 400;
	font-size: 18px;
}
.goods__about p{
	font-family: 'RobotoSlab';
	margin: 0;
}
.goods__img{
	grid-column: 1/3;
  width: 220px;
  height: 250px;
}
.goods__in-basket{
	background: rgb(54, 172, 31);
  display: block;
	text-align: center;
	width: 25px;
	height: 25px;
	border: none;
	margin-top: 10px;
}
.katalog{
	font-family: 'RobotoSlab';
	display: grid;
	grid-template-columns: repeat(4,minmax(120px,1fr));
	grid-gap: 10px;
}
.cart-item {
  position: relative;
  background: #f4df87;
  margin-top: 30px;
  width: 500px;
  border: 3px solid #47857A;
  display: grid;
  border-radius: 50px;
  grid-template-columns: 150px 320px;
  grid-template-rows: repeat(5,30px);
  grid-gap: 0 10px;
}
.cart-item__img{
    width: 150px;
    grid-row: 1/5;
    border-right: 2px solid#47857A;
    border-radius: 46px 0 0 46px;
}

.cart-item__description{
  margin-top: 5px; 
}
.cart-item__input-of-weight{
  margin: 10px 0 0 10px;
}
.cart-item__label-name{
  float: left;
}
.cart-item__name{
  margin:0;
}
.cart-item__input-of-weight{
  font-family: sans-serif;
  transition: all 1s;
  height: 25px;
  border: solid 2px #47857A;
  font-size: 17px;
  font-weight: bolder;
}
.cart-item__input-of-weight:focus{
	border-radius: 10px;
	transition: all 1s;
	outline: none;
	border: solid 2px darkblue;
}
.delete-button {
  position: absolute;
  background: transparent;
  width: 25px;
  height: 25px;
  border-radius: 30px;
  border: 2px solid #47857A;
  right: 30px;
  top: 15px;
}
.delete-button::before {
  content: '';
  width: 17px;
  position: absolute;
  height: 3px;
  background: #47857A;
  transform: rotate(45deg);
  display: block;
  left: 2px;
  top: 9px;
}
.delete-button::after{
 ...

JavaScript

;(function(){
	const cartDOMElement = document.querySelector('.js-cart');
	if (!cartDOMElement) {
		return;
	}	
	const cartItemsCounterDOMElement = document.querySelector('.js-cart-total-count-items');
	const cartTotalPriceDOMElement = document.querySelector('.js-cart-total-price');
	const cartTotalQuntDOMElement = document.querySelector('.js-cart-total-qnt');
	const cart = JSON.parse(localStorage.getItem('cart')) || {};
  	const renderCartItem = ({name, price, matirial,src,developer,id,weight}) => {
		updateCart();
  		const cartItemDOMElement = document.createElement('div');
  		
  		const itemTemplate = `
	  		<div class="js-cart">
	      		<div class="cart-item">
	        	<img class="cart-item__img " src="${src}">
	        	<h1 class="cart-item__name cart-item__description">${name}</h1>
	        	<h2 class="cart-item__matirial cart-item__description" >${matirial}</h2>
	        	<h2 class="cart-item__price cart-item__description js-cart-item-price">${price * weight}</h2>
	        	<label >
	            	<h2 class="cart-item__description cart-item__label-name"> Вес:</h2>
	            	<input type="number" class="cart-item__input-of-weight js-input-weight"  value="${weight}">
	        	</label>
	          <button class="js-btn-cart-item-remove delete-button"></button>  
	      		</div>
	    	</div>`;
		cartItemDOMElement.innerHTML = itemTemplate;
		cartItemDOMElement.setAttribute('data-product-id', id);
		cartItemDOMElement.classList.add('js-cart-item');
		cartDOMElement.appendChild(cartItemDOMElement);
  	} 
    const newPrice = (id) => {
      const cartItemDOMElement = cartDOMElement.querySelector(`[data-product-id="${id}"]`);
      const inputWeight = cartItemDOMElement.querySelector('.js-input-weight');
      const cartItemPriceDOMElement = cartItemDOMElement.querySelector('.js-cart-item-price');
      inputWeight.oninput = () => {
          cartItemPriceDOMElement.textContent = inputWeight.value * cart[id].price;
          cart[id].weight =...