Первая программа: "Не надо стеснятся" [11/25] не могу пройти

Курсы Знакомство с событиями
1

пожалуйста помогите с программой, почитал теорию, не знаю с чего начать, можете скинуть готовы коды для изучения?

2

Смотрите. Спрашивайте.
var popup = document.querySelector(’.popup’);
var openPopupButton = document.querySelector(’.button-show’);
var closePopupButton = popup.querySelector(’.button-hide’);

openPopupButton.addEventListener(‘click’, function (evt) {
evt.preventDefault();
popup.classList.add(‘popup–open’);
});

closePopupButton.addEventListener(‘click’, function () {

popup.classList.remove(‘popup–open’);
});

document.addEventListener(‘keydown’, function (evt) {

if (evt.keyCode === 27) {
popup.classList.remove(‘popup–open’);
}

})

3

опять-же, трудновато, вставил код, протестировал, 3 правильных из 5, неверно работает :frowning:

4

Другие варианты у вас есть?

5

Друзья, подскажите, в чём дело, вышеописанное решение соответствует учебному видео, но не решает все задачи?

6

‘popup–open’ - тут двойной дефис, и везде кавычки одинарные.

Решение на 100%

var popup = document.querySelector(’.popup’);
var openPopupButton = document.querySelector(’.button-show’);
var closePopupButton = popup.querySelector(’.button-hide’);

openPopupButton.addEventListener(‘click’, function (evt) {
evt.preventDefault();
popup.classList.add(‘popup–open’);
});

closePopupButton.addEventListener(‘click’, function () {
popup.classList.remove(‘popup–open’);
});

document.addEventListener(‘keydown’, function (evt) {
if (evt.keyCode === 27) {
popup.classList.remove(‘popup–open’);
}
}
)

7

Низкий вам поклон! )

9

Решил немного поизвращаться над этим заданием, не для проверки в консоли.
Теперь окно закрывается не только с помощью ESC, а ещё при клике на любое место вне окна и при нажатии на крестик. Если кликнуть на само окно, то оно не закроется.
Может вышло немного коряво, хотелось бы послушать мнение на предмет ошибок и вообще лаконичности написания данного кода.

Код

let show = document.querySelector(’.card__button’);
let close_w = document.querySelector(’.button-hide’);
let popup = document.querySelector(’.popup’);
let popup_cont = document.querySelector(’.popup_content’);

    function toggleMenu() {
       popup.classList.toggle('popup--open');
    }

    show.addEventListener('click', function (e) {
        e.preventDefault();
        toggleMenu();
    })

    close_w.addEventListener('click', function () {
        toggleMenu();
    })

    document.addEventListener('click', function (e) {
        let target = e.target;
        let window_p = target == popup || popup.contains(target);
        let window_p_active = popup.classList.contains('popup--open')
        if (target.closest('.popup__content')) {
            e.preventDefault();
        } else if (window_p && window_p_active) {
            toggleMenu();
        }
    })

    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 27) {
            popup.classList.remove('popup--open');
        }
    })
11 
let popup = document.querySelector('.popup')
let openPopupButton = document.querySelector('.button-show')
let closePopupButton = popup.querySelector('.button-hide')

openPopupButton.addEventListener('click', function (evt) {
  evt.preventDefault()
  popup.classList.add('popup--open')
  })
  
closePopupButton.addEventListener('click', function () {
  popup.classList.remove('popup--open')
  })
  
document.addEventListener('keydown', function (evt) {
  if(evt.keyCode === 27) {
    popup.classList.remove('popup--open')
    }
  })