Вёрстка карточки

Question

Задача: Сверстать такую карточку и сделать так, чтобы при выборе этой карточки, цвет её рамочки менялся с зелёного на другой.

https://i.stack.imgur.com/dTPV5.png

Я сверстала карточку таким образом, но в таком случае я не могу с помощью JS изменять цвет рамки при выборе карточки. Как решить эту задачу?

'use strict';

(function () {
  const elCollection = document.getElementsByClassName('catalog__item-wrapper');
  // const elNodes = document.querySelectorAll(".catalog__item-wrapper");

  for(var i = 0; i < elCollection.length; i++) {
    var elem = elCollection[i];
    elem.addEventListener("click", function() {
        this.classList.toggle("main--main-bg"); 
    })
  }
})();

.catalog__item {
    position: relative;
    margin-right: 87px;
    list-style: none;
}

.catalog__item-wrapper {
    position: relative;
    width: 312px;
    min-height: 472px;
  
    margin-bottom: 17px;
  
    background-color: #f2f2f2;
    background: linear-gradient(135deg, transparent 24px, #f2f2f2 24px);
    border-radius: 12px;
  }
  .catalog__item-wrapper::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;
  
    background-color: #1698d9;
    background: linear-gradient(135deg, transparent 25px, #31D916 25px);
    border-radius: 12px;
  }
 .main--main-bg {
  position: relative;
  z-index: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <li class="catalog__item">
    <div class="catalog__item-wrapper" id="iwr" onclick="showColor()" /> 
    </div>  
  </li>
  <script src="main.js"></script>
</body>
</html>

Answer 1

'use strict';

(function () {
  const elCollection = document.getElementsByClassName('catalog__item-wrapper');
  // const elNodes = document.querySelectorAll(".catalog__item-wrapper");

  for(var i = 0; i < elCollection.length; i++) {
    var elem = elCollection[i];
    elem.addEventListener("click", function() {
        this.classList.toggle("main--main-bg"); 
    })
  }
})();

.catalog__item {
    position: relative;
    margin-right: 87px;
    list-style: none;
}

.catalog__item-wrapper {
    position: relative;
    width: 312px;
    min-height: 472px;
  
    margin-bottom: 17px;
  
    background-color: #f2f2f2;
    background: linear-gradient(135deg, transparent 24px, #f2f2f2 24px);
    border-radius: 12px;
  }
  .catalog__item-wrapper::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;
  
    background-color: #1698d9;
    background: linear-gradient(135deg, transparent 25px, #31D916 25px);
    border-radius: 12px;
  }
.main--main-bg:before{
    background: linear-gradient(135deg, transparent 25px, #000 25px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <li class="catalog__item">
    <div class="catalog__item-wrapper" id="iwr" onclick="showColor()" /> 
    </div>  
  </li>
  <script src="main.js"></script>
</body>
</html>

БЛОГ НА HUSL

Вёрстка карточки

Ответы (1 шт):