test

by hisbvdis

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/main.css">
  <title>Магазин «Mishka»</title>
</head>
<body>

<header class="section  header">
  <div class="header__container">
    <nav class="nav nav--opened nav--nojs">
      <div class="header__logo">
        <a class="header__logoLink" href="index.html">
          <picture>
            <source media="(min-width: 768px)" srcset="img/logo--tablet.svg" />
            <img class="header__logoImg" src="img/logo--mobile.svg" width="85" height="35" alt="Магазин «Mishka»" />
          </picture>
        </a>
        <button class="navBtn nav__btn js-navBtn" type="button">
          <span class="visuallyHidden">Навигация</span>
          <span class="navBtn__line"></span>
        </button>
      </div>
      <ul class="nav__content">
        <li class="nav__item  nav__item--noTablet">
          <a class="nav__link" href="catalog.html">Каталог товаров</a>
        </li>
        <li class="nav__item  nav__item--noTablet">
          <a class="nav__link" href="order.html">Вязание на заказ</a>
        </li>
        <li class="nav__item  nav__logo">
          <a class="nav__link" href="index.html">
            <svg class="nav__logo" width="149" height="72">
              <use xlink:href="img/svg-sprite.svg#logo--desktop" />
            </svg>
            <span class="visuallyHidden">На главную</span>
          </a>
        </li>
        <li class="nav__item">
          <a class="nav__link  nav__link--withIcon" href="plug-page.html">
            <svg class="nav__icon" width="18" height="18">
              <use xlink:href="img/svg-sprite.svg#search" />
            </svg>
            <span class="nav__linkTitle  nav__linkTitle--no-tablet">Поиск по сайту</span>
          </a>
        </li>
        <li class="nav__item">
          <a class="nav__link ...

CSS

@charset "UTF-8";

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("../fonts/OpenSans-Regular.ttf") format("woff2");
}

@font-face {
  font-family: 'Open Sans';
  font-style: bold;
  font-weight: 700;
  font-display: swap;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/OpenSans-Bold.ttf") format("woff2");
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  color: #000;
  line-height: 24px;
}

input,
textarea {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 17px;
  line-height: 18px;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #000;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}

@media (min-width: 768px) {
  body {
    font-size: 17px;
    line-height: 30px;
  }

  input,
  textarea {
    font-size: 19px;
  }
}

.section__container {
  display: flow-root;
  margin: 0 auto;
  padding: 27px 30px 43px;
}

.section__header {
  display: flex;
  margin-bottom: 23px;
}

.section__title {
  margin: 0;
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
}

.section__bottomWave {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 6px;
}

@media (min-width: 768px) {
  .section__container {
    max-width: 730px;
  }

  .section__header {
    justify-content: space-between;
    margin-bottom: 50px;
  }

  .section__title {
    font-size: 43px;
    line-height: 50px;
  }

  .section__bottomWave {
    height: 17px;
  }
}

@media (min-width: 1024px) {
  .section__container {
    max-width: 1050px;
  }
}

.btn {
  display:...

JavaScript

var navBtn = document.querySelector('.js-navBtn');
var nav = document.querySelector('.nav');


// Default nav opened classes delete
function navRemoveOpen() {
  nav.classList.remove('nav--opened');
  nav.classList.remove('nav--nojs');
}
document.onload = navRemoveOpen();


// Nav button click
navBtn.addEventListener('click', function(e) {
  e.preventDefault();
  nav.classList.toggle('nav--opened');
})


// Отслеживание нажатия на кнопку открытия модального окна
// ++ Кнопка открытия модалки
var addCartBtn = document.querySelector('.js-addCartBtn');
addCartBtn.addEventListener('click', function(e) {
  e.preventDefault();
  showModal('js-addCart'); // Открытие модального окна
// })


// ++ Функция открытия модального окна
function showModal(modalClass) {
  var modal = document.querySelector('.' + modalClass);
  modal.classList.add('modal--show');

  showModalUnderlay(modal); // Открытие подложки
  modalEnterDetect(modal); // Отслеживание Enter
  modalEscDetect(modal); // Отслеживание Escape
}


// ++ Функция открытия подложки модального окна
var underlay = document.querySelector('.modalUnderlay');
function showModalUnderlay(modal) {
  underlay.classList.add('modalUnderlay--show');

  // Отслеживание Esc для подложки
  window.addEventListener('keydown', function(e) {
    if (e.keyCode == 27 && underlay.classList.contains('modalUnderlay--show')) {
      e.preventDefault();
      closeModalUnderlay(underlay); // Закрытие подложки
    }
  })

  // Отслеживание нажатия на подложку => закрытие подложки и модального окна
  underlay.addEventListener('click', function(e) {
    e.preventDefault();
    closeModalUnderlay(underlay); // Закрытие подложки
    closeModal(modal); // Закрытие модального окна
  })
}


// ++ Функция отслеживания Enter => нажатие на кнопку действия в модальном окне
function modalEnterDetect(modal) {
  var modalEnter = modal.querySelector('.js-modalEnterBtn');
  window.addEventListener('keydown', function(e) {
    if (e.keyCode == 13 &&...