task 2503

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

task 2503

salton

задача выполнена:

но при этом мы получаем все печеньки открытыми:

если выполнить пункты 7,9,10 - то в конце не красиво получится - все печеньки видно((

Coderslang_Master

salton покажи свой код.

salton

<!DOCTYPE html>
<html>

<head>
  <title>Fortune cookies</title>
  <style>
    * {
      font-family: monospace;
    }

    h2 {
      text-align: center;
    }

    .container {
      display: flex;
      justify-content: center;
    }

    .cookie {
      margin: 16px;
      cursor: pointer;
      background-color: #285943;
      color: #285943;
      padding: 20px;
    }

    .opened {
      background-color: #AAFCB8;
      color: #480355;
    }
  </style>
</head>

<body>
  <h2>Open your fortune cookie</h2>
  <div class="container">
    <div class="cookie">Never do anything halfway</div>
    <div class="cookie">Run</div>
    <div class="cookie">Someone in your life need a letter from you</div>
  </div>
  <script>
    let cookieElem = document.querySelectorAll('.cookie');
    cookieElem.forEach(element =>


      element.addEventListener('click', (event) => {

        setClassStyle();

      }))

    function setClassStyle() {
      let cookie = document.querySelectorAll('.cookie');

      cookie.forEach(element => element.classList.add('opened'));
    }
  </script>
</body>

</html>

Coderslang_Master

salton результат который ты получаешь, соответствует коду. По клику ты выбираешь все "печеньки" и открываешь их.

Чтобы открывалась каждая печенька независимо от других, можно сделать так:

      Array.from(document.querySelectorAll('.cookie')).map(el => {
        el.addEventListener('click', () => {
          el.classList.add('opened');
        });
      });