diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..1f67998
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": 2
+      }
+    ]
+  ]
+}
diff --git a/.gitignore b/.gitignore
index 6aaaf01..97e6428 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,9 @@
 /node_modules
 /dist
-
+notes.txt
 yarn-error.log
 .idea
 .cache
 .DS_Store
-
+js/dev/hhApiAreas.json
 .vscode/
\ No newline at end of file
diff --git a/css/blocks/form/form.less b/css/blocks/form/form.less
index 82d7be8..e15dd3c 100644
--- a/css/blocks/form/form.less
+++ b/css/blocks/form/form.less
@@ -1,5 +1,15 @@
 .form {
   background-color: @color-light;
+  position: relative;
+
+  @media @screen-gt-s {
+    margin: 5px auto;
+    max-width: 768px;
+  }
+
+  @media @screen-gt-m {
+    max-width: 1010px;
+  }
 
   &__heading {
     margin-top: 20px;
@@ -7,19 +17,28 @@
   }
 
   &__input-text {
+    position: relative;
     margin: 10px 0;
   }
 
   &__input-tel {
     display: flex;
     margin-top: 5px;
+    position: relative;
   }
 
   &__delivery-method {
     display: flex;
   }
 
+  &__delivery-address {
+    &_hide {
+      display: none;
+    }
+  }
+
   &__textarea {
+    position: relative;
     margin-top: 10px;
   }
 
@@ -59,21 +78,38 @@
   }
 }
 
-.form-pug {
-  /* Заглушка, будет popup */
-  width: 290px;
-  height: 450px;
-  background-color: black;
-  opacity: 0.1;
-  font-size: 50px;
-  float: right;
-  margin-top: 136px;
-  color: white;
-  justify-content: center;
-  align-items: center;
-  display: none;
+.orderForm {
+  position: absolute;
+  top: 0;
+  z-index: 100;
+  overflow: hidden;
+  opacity: 0;
+  transition: all 300ms linear;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
 
-  @media @screen-gt-s {
-    display: flex;
+  &_active {
+    opacity: 1;
+  }
+}
+
+.form-error-block {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 5px 10px 5px 5px;
+  margin: 0;
+  color: @color-dark;
+  background-color: @color-light;
+  border: 1px solid @color-light-grey;
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  box-sizing: border-box;
+  font: 14px/ (@control-height - 18px) Arial, sans-serif;
+  text-align: left;
+
+  &__item {
+    list-style: none;
   }
 }
diff --git a/css/blocks/popup/popup.less b/css/blocks/popup/popup.less
index db87c20..d05f907 100644
--- a/css/blocks/popup/popup.less
+++ b/css/blocks/popup/popup.less
@@ -1,7 +1,15 @@
 .popup {
   width: 280px;
   border: 1px solid;
-  margin: 40px auto;
+  position: absolute;
+  opacity: 0;
+  transition: all 100ms linear;
+  background-color: @color-light;
+  z-index: 100;
+
+  &_active {
+    opacity: 1;
+  }
 
   @media @screen-gt-s {
     width: 242px;
@@ -30,5 +38,21 @@
     z-index: 100;
     right: -10px;
     top: -10px;
+
+    @media @screen-gt-m {
+      display: none;
+    }
+  }
+}
+
+.js-mobile-outer {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+
+  &__popup {
+    position: relative;
   }
 }
diff --git a/css/blocks/product-card/product-card.less b/css/blocks/product-card/product-card.less
index 52acb32..fb42e92 100644
--- a/css/blocks/product-card/product-card.less
+++ b/css/blocks/product-card/product-card.less
@@ -5,19 +5,17 @@
   cursor: pointer;
 
   &__image-container {
-    margin-bottom: 10px;
     font-size: 0;
     position: relative;
 
-    &_popup {
-      width: 212px;
-      height: 212px;
-      margin: 0 auto 10px auto;
+    //width: 212px;
+    //height: 212px;
+    min-height: 212px;
+    margin: 0 auto 10px auto;
 
-      @media @screen-gt-m {
-        width: 290px;
-        height: 290px;
-      }
+    @media @screen-gt-m {
+      width: 290px;
+      height: 290px;
     }
 
     &_form {
diff --git a/css/common/button/button.less b/css/common/button/button.less
index e8f5762..90cfb3c 100644
--- a/css/common/button/button.less
+++ b/css/common/button/button.less
@@ -36,6 +36,10 @@
   .button();
   width: 100%;
 
+  &_disabled {
+    opacity: 0.5;
+  }
+
   @media @screen-gt-s {
     width: 138px;
   }
@@ -49,9 +53,7 @@
   cursor: pointer;
   text-indent: -9999px;
   background-image: url("close.svg");
-}
 
-.button-close {
   &:hover,
   &:focus {
     outline: none;
diff --git a/css/common/input/input.less b/css/common/input/input.less
index 904a210..aff36c1 100644
--- a/css/common/input/input.less
+++ b/css/common/input/input.less
@@ -37,15 +37,15 @@
 .input-tel {
   .default-input();
 
-  &__country-code {
+  &_country-code {
     width: 38px;
   }
 
-  &__operator-code {
+  &_operator-code {
     width: 62px;
   }
 
-  &__number {
+  &_number {
     width: 100%;
   }
 
@@ -58,3 +58,33 @@
     border-color: @color-red;
   }
 }
+
+.input {
+  &_invalid {
+    border-color: @color-red;
+  }
+}
+
+.input-select {
+  .default-input();
+  padding: 9px 30px 9px 10px;
+  background-color: @color-light-1;
+  caret-color: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  -webkit-text-fill-color: @color-dark-1;
+  opacity: 1; /* required on iOS */
+}
+
+::-webkit-input-placeholder {
+  color: @color-dark-1; /* Chrome, Safari, Opera */
+}
+::-moz-placeholder {
+  color: @color-dark-1; /* Firefox */
+}
+:-ms-input-placeholder {
+  color: @color-dark-1; /* IE */
+}
diff --git a/css/common/label/label.less b/css/common/label/label.less
index 29eb911..a8067e7 100644
--- a/css/common/label/label.less
+++ b/css/common/label/label.less
@@ -6,4 +6,8 @@
 
 .label {
   .label-default();
+
+  &_disabled {
+    opacity: 0.7;
+  }
 }
diff --git a/css/common/radio-button/radio-button.less b/css/common/radio-button/radio-button.less
index 630d9da..a3b5060 100644
--- a/css/common/radio-button/radio-button.less
+++ b/css/common/radio-button/radio-button.less
@@ -33,7 +33,8 @@
   .radio-button-default();
 
   &__button {
-    display: none;
+    position: absolute;
+    clip: rect(0 0 0 0);
   }
 
   &:checked + .radio-button-sqared__label {
diff --git a/css/common/select/select.less b/css/common/select/select.less
index 863276e..288b3dd 100644
--- a/css/common/select/select.less
+++ b/css/common/select/select.less
@@ -1,25 +1,6 @@
 .select {
   position: relative;
 
-  &__select-field {
-    width: 100%;
-    height: @control-height;
-    display: inline-block;
-    box-sizing: border-box;
-    background-color: @color-light-1;
-    padding: 9px 10px;
-    border: 1px solid #c5c9ca;
-    font: 14px/ (@control-height - 18px) Arial, sans-serif;
-    color: @color-dark-1;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
   &:before {
     content: "";
     position: absolute;
@@ -41,9 +22,46 @@
     border-width: 5px 5px 0 5px;
     border-color: #c5c9ca transparent transparent transparent;
     position: absolute;
-    top: 50%;
+    top: 45%;
     right: 10px;
     z-index: 1;
     pointer-events: none;
   }
 }
+
+.select_active {
+  &:after {
+    transform: matrix(1, 0, 0, -1, 0, 0);
+  }
+}
+
+.select_active > .input-select {
+  background-color: @color-grey;
+}
+
+.options-container {
+  position: absolute;
+  padding: 23px 0px;
+  height: 290px;
+  width: 100%;
+  background-color: @color-light;
+  z-index: 1000;
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  box-sizing: border-box;
+
+  &__item {
+    padding: 11px 12px;
+    height: 38px;
+    line-height: 16px;
+    box-sizing: border-box;
+    font-size: 14px;
+    display: block;
+
+    &:hover {
+      background-color: @color-primary;
+      color: white;
+      cursor: pointer;
+    }
+  }
+}
diff --git a/css/common/textarea/textarea.less b/css/common/textarea/textarea.less
index aaf9ce6..c350866 100644
--- a/css/common/textarea/textarea.less
+++ b/css/common/textarea/textarea.less
@@ -10,6 +10,10 @@
   color: #333333;
   resize: none;
 
+  &_invalid {
+    border: 1px solid #c52929;
+  }
+
   ::-webkit-input-placeholder {
     color: #aeb5b9; /* Chrome, Safari, Opera */
   }
diff --git a/css/global.less b/css/global.less
index 9d2228d..b70f740 100644
--- a/css/global.less
+++ b/css/global.less
@@ -5,6 +5,12 @@ body {
   font: 14px/1.43 Arial, sans-serif;
   color: #333;
 }
+::-webkit-scrollbar {
+  display: none;
+  -webkit-appearance: none;
+  width: 0;
+  height: 0;
+}
 
 a {
   color: #609fcf;
diff --git a/html/orderForm.html b/html/orderForm.html
new file mode 100644
index 0000000..6540f33
--- /dev/null
+++ b/html/orderForm.html
@@ -0,0 +1,157 @@
+
+    <form class="form" action="/" method="post">
+        <div class="columns-wrapper">
+          <div class="form__button-close">
+            <button class="button-close-icon button-close">
+              Закрыть
+            </button>
+          </div>
+          <div class="columns-row">
+            <div class="column column_s-2 column_m-3 column_l-7">
+              
+              <div class="form__section">
+                <div class="form__input-main-contacts">
+                  <h1 class="heading heading_level-1">Оформление заказа</h1>
+                  <h4 class="heading heading_level-4">Контактное лицо</h4>
+                  <input class="form__input-text input-text" type="text" name="fullName" placeholder="ФИО" value></input>
+                  <input class="form__input-text input-text" type="text" name="email" placeholder="Электронная почта" value></input>
+                </div> 
+             
+                <div class="form__input-tel">
+                  <input class="input-tel input-tel__country-code" type="text" name="countryCode" value="+7"
+                    readonly></input>
+                  <input class="input-tel input-tel__operator-code" type="text" name="operatorCode" placeholder="Код"
+                    value></input>
+                  <input class="input-tel input-tel__number" type="text" name="telNumber" placeholder="Номер" value></input>
+                </div>
+              </div>
+  
+              <div class="form__section">  
+                <h4 class="heading heading_level-4">Способ получения заказа</h4>
+                <div class="form__delivery-method">
+  
+                  <div class="form__radio-button"> 
+                    <input class="radio-button-sqared radio-button-sqared__button" type="radio" name="deliveryMethod"
+                    value="deliviryPickup" id="deliveryPickup"></input>
+                    <label class="radio-button-sqared__label" for="selfPickup">Самовывоз</label>
+                  </div>
+                  
+                  <div class="form__radio-button">
+                    <input class="radio-button-sqared radio-button-sqared__button" type="radio" name="deliveryMethod"
+                    value="selfPickup" id="selfPickup" checked></input>
+                    <label class="radio-button-sqared__label" for="deliveryPickup">Доставка</label>
+                  </div>
+                
+                </div>
+              </div>
+  
+              <div class="form__section">
+                <div class="form__delivery-address">
+                  <h4 class="heading heading_level-4">Адрес</h4>
+                  <div class="select">
+                    <select class="select__select-field" size="1" name="cityLocataion" value>
+                      <option class="select__item" value>Город</option>
+                      <option class="select__item" value>Город 2</option>
+                      <option class="select__item" value>Город 3</option>
+                    </select>
+                  </div>
+                  <div class="form__textarea">
+                    <textarea type="textarea" class="textarea" placeholder="Адрес"
+                    name="addressExpaned"></textarea>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="form__section">
+                <div class="form__payment-methods">
+                  <h4 class="heading heading_level-4">Оплата</h4>
+  
+                  <div class="form__payment-method">
+                    <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentOnline"
+                      id="paymentOnline"></input>
+                    <label class="radio-button-сircle__label" for="paymentOnline">Онлайн-оплата</label>
+                  </div>
+      
+                  <div class="form__payment-method">
+                    <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentCash"
+                      id="paymentCash"></input>
+                    <label class="radio-button-сircle__label" for="paymentCash">Наличными</label>
+                  </div>
+      
+                  <div class="form__payment-method">
+                    <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentCard"
+                      id="paymentCard"></input>
+                    <label class="radio-button-сircle__label" for="paymentCard">Картой при получении</label>
+                  </div>
+      
+                </div>
+              </div>
+              
+              <div class="form__section">
+                <div class="form__notification">
+                  <h4 class="heading heading_level-4">Уведомления</h4>
+  
+                  <div class="checkbox">
+                    <input class="checkbox__box" type="checkbox" name="smsNotification" value id="smsNotification"></input>
+                    <label class="label" for="smsNotification">Хочу получать SMS уведомления</label>
+                  </div>
+  
+                </div>
+              </div>
+  
+              <input class="button-submit form__button-submit" type="submit" value="Оформить заказ"></input>
+              
+            </div>
+  
+            <div class="column column_s-2 column_m-3 column_l-5">
+                  <div class="form__product-card">
+  
+                    <div class="product-card">
+                      <div class="product-card__image-container product-card__image-container_form">
+                        <img
+                          class="product-card__image"
+                          src="images/product-4.jpg"
+                          alt="Футболка"
+                        />
+                        <div class="product-card__sale">sale</div>
+                      </div>
+  
+                      <div class="product-card__name">Футболка</div>
+                      <div class="product-card__price">
+                        <div class="product-card__old-price">690</div>
+                        390 ₽
+                      </div>
+                      <h4 class="product-card__description">Красная хлопоковая футболка
+                          с коротким руковом</h4>
+                  
+                    <div class="product-card__sizes">
+                      <input class="radio-button-size-item " type="radio" name="size"
+                              value="xs" id="xs"></input>
+                      <label class="radio-button-size-item__label" for="xs">xs</label>
+                    
+                      <input class="radio-button-size-item " type="radio" name="size"
+                          value="s" id="s"></input>
+                      <label class="radio-button-size-item__label" for="s">s</label>
+          
+                      <input class="radio-button-size-item " type="radio" name="size"
+                          value="m" id="m"></input>
+                      <label class="radio-button-size-item__label" for="m">m</label>
+          
+                      <input class="radio-button-size-item " type="radio" name="size"
+                          value="l" id="l"></input>
+                      <label class="radio-button-size-item__label" for="l">l</label>
+          
+                      <input class="radio-button-size-item " type="radio" name="size"
+                          value="xl" id="xl"></input>
+                      <label class="radio-button-size-item__label" for="xl">xl</label>
+                      
+                      <input class="radio-button-size-item " type="radio" name="size"
+                          value="xxl" id="xxl"></input>
+                      <label class="radio-button-size-item__label" for="xxl">xxl</label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            
+          </div>
+      </form>
\ No newline at end of file
diff --git a/html/productCardPopup.html b/html/productCardPopup.html
new file mode 100644
index 0000000..4fce733
--- /dev/null
+++ b/html/productCardPopup.html
@@ -0,0 +1,55 @@
+<section class="popup">
+    <div class="popup-container">
+        <div class="popup-container__button-close">
+            <button class="button-close-icon button-close">
+              Закрыть
+            </button>
+        </div>
+        <div class="product-card">
+          <div class="product-card__image-container">
+            <img
+              class="product-card__image"
+              src="images/product-4.jpg"
+              alt="Футболка"
+            />
+            <div class="product-card__sale">sale</div>
+          </div>
+
+          <div class="product-card__name">Футболка</div>
+          <div class="product-card__price">
+            <div class="product-card__old-price">690</div>
+            390 ₽
+          </div>
+          <h4 class="product-card__description">Красная хлопоковая футболка
+              с коротким руковом</h4>
+    
+          <div class="product-card__sizes">
+              <input class="radio-button-size-item " type="radio" name="size"
+                      value="xs" id="xs-2"></input>
+              <label class="radio-button-size-item__label" for="xs-2">xs</label>
+            
+              <input class="radio-button-size-item " type="radio" name="size"
+                  value="s" id="s-2"></input>
+              <label class="radio-button-size-item__label" for="s-2">s</label>
+
+              <input class="radio-button-size-item " type="radio" name="size"
+                  value="m" id="m-2"></input>
+              <label class="radio-button-size-item__label" for="m-2">m</label>
+
+              <input class="radio-button-size-item " type="radio" name="size"
+                  value="l" id="l-2"></input>
+              <label class="radio-button-size-item__label" for="l-2">l</label>
+
+              <input class="radio-button-size-item " type="radio" name="size"
+                  value="xl" id="xl-2"></input>
+              <label class="radio-button-size-item__label" for="xl-2">xl</label>
+              
+              <input class="radio-button-size-item " type="radio" name="size"
+                  value="xxl" id="xxl-2"></input>
+              <label class="radio-button-size-item__label" for="xxl-2">xxl</label>
+          </div>
+        </div>
+        <input class="button-submit product-card__button-submit" type="submit" value="Заказать"></input>
+    </div>
+
+ 
\ No newline at end of file
diff --git a/index.html b/index.html
index bb24f27..8eaee71 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <title>HTML и CSS</title>
   <link rel="stylesheet" href="css/styles.less" />
 </head>
-<body>
+<body class="body">
   <section class="navbar">
     <div class="columns-wrapper">
       <div class="navbar__content">
@@ -136,7 +136,7 @@ <h1 class="carousel-section__heading heading heading_level-1">
       <h2 class="heading heading_level-2">Популярные товары</h2>
       <div class="columns-row">
         <div class="column column_s-1 column_m-2 column_l-4">
-          <div class="product-card">
+          <div data-product-id="1" class="product-card">
             <div class="product-card__image-container">
               <img class="product-card__image" src="images/product-1.jpg" alt="Зонт" />
             </div>
@@ -147,7 +147,7 @@ <h2 class="heading heading_level-2">Популярные товары</h2>
           </div>
         </div>
         <div class="column column_s-1 column_m-2 column_l-4">
-          <div class="product-card">
+          <div data-product-id="2" class="product-card">
             <div class="product-card__image-container">
               <img class="product-card__image" src="images/product-2.jpg" alt="Сумка" />
             </div>
@@ -158,7 +158,7 @@ <h2 class="heading heading_level-2">Популярные товары</h2>
           </div>
         </div>
         <div class="column column_s-1 column_m-2 column_l-4">
-          <div class="product-card">
+          <div data-product-id="3" class="product-card">
             <div class="product-card__image-container">
               <img class="product-card__image" src="images/product-3.jpg" alt="Шлепанцы" />
             </div>
@@ -169,7 +169,7 @@ <h2 class="heading heading_level-2">Популярные товары</h2>
           </div>
         </div>
         <div class="column column_s-1 column_m-2 column_l-4">
-          <div class="product-card">
+          <div data-product-id="4" class="product-card">
             <div class="product-card__image-container">
               <img class="product-card__image" src="images/product-4.jpg" alt="Футболка" />
               <div class="product-card__sale">sale</div>
@@ -182,7 +182,7 @@ <h2 class="heading heading_level-2">Популярные товары</h2>
           </div>
         </div>
         <div class="column column_s-1 column_m-2 column_l-4">
-          <div class="product-card">
+          <div data-product-id="5" class="product-card">
             <div class="product-card__image-container">
               <img class="product-card__image" src="images/product-5.jpg" alt="Толстовка" />
             </div>
@@ -193,7 +193,7 @@ <h2 class="heading heading_level-2">Популярные товары</h2>
           </div>
         </div>
         <div class="column column_s-1 column_m-2 column_l-4">
-          <div class="product-card">
+          <div data-product-id="6" class="product-card">
             <div class="product-card__image-container">
               <img class="product-card__image" src="images/product-6.jpg" alt="Подушка" />
             </div>
@@ -300,224 +300,6 @@ <h2 class="heading heading_level-2">Популярные товары</h2>
       </div>
     </div>
   </footer>
-
-  <section>
-    <form class="form" action="/" method="post">
-      <div class="columns-wrapper">
-        <div class="form__button-close">
-          <button class="button-close-icon button-close">
-            Закрыть
-          </button>
-        </div>
-        <div class="columns-row">
-          <div class="column column_s-2 column_m-3 column_l-7">
-            
-            <div class="form__section">
-              <div class="form__input-main-contacts">
-                <h1 class="heading heading_level-1">Оформление заказа</h1>
-                <h4 class="heading heading_level-4">Контактное лицо</h4>
-                <input class="form__input-text input-text" type="text" name="fullName" placeholder="ФИО" value></input>
-                <input class="form__input-text input-text" type="text" name="email" placeholder="Электронная почта" value></input>
-              </div> 
-           
-              <div class="form__input-tel">
-                <input class="input-tel input-tel__country-code" type="text" name="countryCode" value="+7"
-                  readonly></input>
-                <input class="input-tel input-tel__operator-code" type="text" name="operatorCode" placeholder="Код"
-                  value></input>
-                <input class="input-tel input-tel__number" type="text" name="telNumber" placeholder="Номер" value></input>
-              </div>
-            </div>
-
-            <div class="form__section">  
-              <h4 class="heading heading_level-4">Способ получения заказа</h4>
-              <div class="form__delivery-method">
-
-                <div class="form__radio-button"> 
-                  <input class="radio-button-sqared radio-button-sqared__button" type="radio" name="deliveryMethod"
-                  value="deliviryPickup" id="deliveryPickup"></input>
-                  <label class="radio-button-sqared__label" for="selfPickup">Самовывоз</label>
-                </div>
-                
-                <div class="form__radio-button">
-                  <input class="radio-button-sqared radio-button-sqared__button" type="radio" name="deliveryMethod"
-                  value="selfPickup" id="selfPickup" checked></input>
-                  <label class="radio-button-sqared__label" for="deliveryPickup">Доставка</label>
-                </div>
-              
-              </div>
-            </div>
-
-            <div class="form__section">
-              <div class="form__delivery-address">
-                <h4 class="heading heading_level-4">Адрес</h4>
-                <div class="select">
-                  <select class="select__select-field" size="1" name="cityLocataion" value>
-                    <option class="select__item" value>Город</option>
-                    <option class="select__item" value>Город 2</option>
-                    <option class="select__item" value>Город 3</option>
-                  </select>
-                </div>
-                <div class="form__textarea">
-                  <textarea type="textarea" class="textarea" placeholder="Адрес"
-                  name="addressExpaned"></textarea>
-                </div>
-              </div>
-            </div>
-            
-            <div class="form__section">
-              <div class="form__payment-methods">
-                <h4 class="heading heading_level-4">Оплата</h4>
-
-                <div class="form__payment-method">
-                  <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentOnline"
-                    id="paymentOnline"></input>
-                  <label class="radio-button-сircle__label" for="paymentOnline">Онлайн-оплата</label>
-                </div>
-    
-                <div class="form__payment-method">
-                  <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentCash"
-                    id="paymentCash"></input>
-                  <label class="radio-button-сircle__label" for="paymentCash">Наличными</label>
-                </div>
-    
-                <div class="form__payment-method">
-                  <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentCard"
-                    id="paymentCard"></input>
-                  <label class="radio-button-сircle__label" for="paymentCard">Картой при получении</label>
-                </div>
-    
-              </div>
-            </div>
-            
-            <div class="form__section">
-              <div class="form__notification">
-                <h4 class="heading heading_level-4">Уведомления</h4>
-
-                <div class="checkbox">
-                  <input class="checkbox__box" type="checkbox" name="smsNotification" value id="smsNotification"></input>
-                  <label class="label" for="smsNotification">Хочу получать SMS уведомления</label>
-                </div>
-
-              </div>
-            </div>
-
-            <input class="button-submit form__button-submit" type="submit" value="Оформить заказ"></input>
-            
-          </div>
-
-          <div class="column column_s-2 column_m-3 column_l-5">
-                <div class="form__product-card">
-
-                  <div class="product-card">
-                    <div class="product-card__image-container product-card__image-container_form">
-                      <img
-                        class="product-card__image"
-                        src="images/product-4.jpg"
-                        alt="Футболка"
-                      />
-                      <div class="product-card__sale">sale</div>
-                    </div>
-
-                    <div class="product-card__name">Футболка</div>
-                    <div class="product-card__price">
-                      <div class="product-card__old-price">690</div>
-                      390 ₽
-                    </div>
-                    <h4 class="product-card__description">Красная хлопоковая футболка
-                        с коротким руковом</h4>
-                
-                  <div class="product-card__sizes">
-                    <input class="radio-button-size-item " type="radio" name="size"
-                            value="xs" id="xs"></input>
-                    <label class="radio-button-size-item__label" for="xs">xs</label>
-                  
-                    <input class="radio-button-size-item " type="radio" name="size"
-                        value="s" id="s"></input>
-                    <label class="radio-button-size-item__label" for="s">s</label>
-        
-                    <input class="radio-button-size-item " type="radio" name="size"
-                        value="m" id="m"></input>
-                    <label class="radio-button-size-item__label" for="m">m</label>
-        
-                    <input class="radio-button-size-item " type="radio" name="size"
-                        value="l" id="l"></input>
-                    <label class="radio-button-size-item__label" for="l">l</label>
-        
-                    <input class="radio-button-size-item " type="radio" name="size"
-                        value="xl" id="xl"></input>
-                    <label class="radio-button-size-item__label" for="xl">xl</label>
-                    
-                    <input class="radio-button-size-item " type="radio" name="size"
-                        value="xxl" id="xxl"></input>
-                    <label class="radio-button-size-item__label" for="xxl">xxl</label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          
-        </div>
-    </form>
-  </section>
-
-  <section class="popup">
-    <div class="popup-container">
-        <div class="popup-container__button-close">
-            <button class="button-close-icon button-close">
-              Закрыть
-            </button>
-        </div>
-        <div class="product-card">
-          <div class="product-card__image-container product-card__image-container_popup">
-            <img
-              class="product-card__image"
-              src="images/product-4.jpg"
-              alt="Футболка"
-            />
-            <div class="product-card__sale">sale</div>
-          </div>
-
-          <div class="product-card__name">Футболка</div>
-          <div class="product-card__price">
-            <div class="product-card__old-price">690</div>
-            390 ₽
-          </div>
-          <h4 class="product-card__description">Красная хлопоковая футболка
-              с коротким руковом</h4>
-    
-          <div class="product-card__sizes">
-              <input class="radio-button-size-item " type="radio" name="size"
-                      value="xs" id="xs-2"></input>
-              <label class="radio-button-size-item__label" for="xs-2">xs</label>
-            
-              <input class="radio-button-size-item " type="radio" name="size"
-                  value="s" id="s-2"></input>
-              <label class="radio-button-size-item__label" for="s-2">s</label>
-
-              <input class="radio-button-size-item " type="radio" name="size"
-                  value="m" id="m-2"></input>
-              <label class="radio-button-size-item__label" for="m-2">m</label>
-
-              <input class="radio-button-size-item " type="radio" name="size"
-                  value="l" id="l-2"></input>
-              <label class="radio-button-size-item__label" for="l-2">l</label>
-
-              <input class="radio-button-size-item " type="radio" name="size"
-                  value="xl" id="xl-2"></input>
-              <label class="radio-button-size-item__label" for="xl-2">xl</label>
-              
-              <input class="radio-button-size-item " type="radio" name="size"
-                  value="xxl" id="xxl-2"></input>
-              <label class="radio-button-size-item__label" for="xxl-2">xxl</label>
-          </div>
-        </div>
-        <input class="button-submit product-card__button-submit" type="submit" value="Заказать"></input>
-    </div>
-
-    
-  </section>
-    
-</section>
   <script src="js/index.js"></script>
 </body>
 
diff --git a/js/common/fieldValidation.js b/js/common/fieldValidation.js
new file mode 100644
index 0000000..6dc20cb
--- /dev/null
+++ b/js/common/fieldValidation.js
@@ -0,0 +1,90 @@
+//Класс валидации для field.
+//Содержит массив validaties, в который помещаются необходимые проверки,
+//а также общие для field методы
+import { showValidationError, removeValidationError } from "./validationError";
+
+export class FieldValidation {
+  constructor() {
+    this.validities = [this.isEmptyField, this.isBigString];
+    this.errors = [];
+    this.isInvalid = true;
+  }
+
+  //Провести необходимые валидации
+  checkValidities(field) {
+    if (field.touched) {
+      this.validities.forEach(validity => {
+        const error = validity(field);
+
+        //Текущие ошибки храним в this.errors
+        //(может понадобиться, если потребуется выводить информация пользователю)
+        if (error) this.errors.push(error);
+      });
+
+      //Обработать ошибки
+      field.validation.handleErrors(field);
+    }
+  }
+
+  //Выставить класс _invalid для field
+  setInvalid(field) {
+    const className = getClassName(field);
+    if (!field.classList.contains(`${className}_invalid`)) {
+      field.classList.add(`${className}_invalid`);
+    }
+    this.isInvalid = true;
+  }
+
+  //Убрать класс _invalid для input
+  removeInvalid(field) {
+    const className = getClassName(field);
+    if (field.classList.contains(`${className}_invalid`)) {
+      field.classList.remove(`${className}_invalid`);
+    }
+    this.isInvalid = false;
+  }
+
+  //Общая для всех field проверка на пустой ввод
+  isEmptyField(field) {
+    if (!field.value.trim()) {
+      return "Поле не может быть пустым";
+    }
+  }
+
+  //Общая для всех field проверка на максимальную длину строки
+  isBigString(field) {
+    if (field.value.length > 100) {
+      return "Максимальная длина строки 100 символов";
+    }
+  }
+
+  //Обработать текущие ошибки валидации
+  handleErrors(field) {
+    if (this.errors.length) {
+      this.setInvalid(field);
+      showValidationError(field, this.errors);
+      this.errors = [];
+    } else {
+      this.removeInvalid(field);
+      removeValidationError(field);
+    }
+  }
+
+  //Отладочная функция - выводит текущие ошибки в консоль
+  showErrors() {
+    if (this.errors.length) {
+      for (let i = 0; i < this.errors.length; i++) {
+        console.log(this.errors[i]);
+      }
+      this.errors = [];
+    }
+  }
+}
+
+function getClassName(elem) {
+  if (elem.className.match(/input/)) {
+    return "input";
+  } else if (elem.className.match(/textarea/)) {
+    return "textarea";
+  }
+}
diff --git a/js/common/getCoords.js b/js/common/getCoords.js
new file mode 100644
index 0000000..8e718e2
--- /dev/null
+++ b/js/common/getCoords.js
@@ -0,0 +1,9 @@
+// получаем координаты элемента в контексте документа
+export const getCoords = elem => {
+  let box = elem.getBoundingClientRect();
+
+  return {
+    top: box.top + pageYOffset,
+    left: box.left + pageXOffset
+  };
+};
diff --git a/js/common/getDataAsync.js b/js/common/getDataAsync.js
new file mode 100644
index 0000000..63595d9
--- /dev/null
+++ b/js/common/getDataAsync.js
@@ -0,0 +1,15 @@
+//функция загрузки произвольных данных в JSON с произвольного сервера
+export const getDataAsync = async function(url) {
+  try {
+    //загружаем данные
+    const response = await fetch(url);
+
+    let parsedData = await response.json();
+
+    //Регионы parsedData.areas
+
+    return parsedData;
+  } catch (err) {
+    alert("Не удалось получить данные...");
+  }
+};
diff --git a/js/common/getDocumentHeight.js b/js/common/getDocumentHeight.js
new file mode 100644
index 0000000..01e79fb
--- /dev/null
+++ b/js/common/getDocumentHeight.js
@@ -0,0 +1,12 @@
+export const getDocumentHeight = () => {
+  const documentHeight = Math.max(
+    document.body.scrollHeight,
+    document.documentElement.scrollHeight,
+    document.body.offsetHeight,
+    document.documentElement.offsetHeight,
+    document.body.clientHeight,
+    document.documentElement.clientHeight
+  );
+
+  return documentHeight;
+};
diff --git a/js/common/touchHandler.js b/js/common/touchHandler.js
new file mode 100644
index 0000000..97e883b
--- /dev/null
+++ b/js/common/touchHandler.js
@@ -0,0 +1,4 @@
+//для ios необходимо превентить события скролла (для попапа на mobile)
+export const touchHandler = e => {
+  e.preventDefault();
+};
diff --git a/js/common/validationError.js b/js/common/validationError.js
new file mode 100644
index 0000000..1da8d97
--- /dev/null
+++ b/js/common/validationError.js
@@ -0,0 +1,33 @@
+//показывает ошибки валидации пользователю
+export const showValidationError = (target, errors) => {
+  //если уже показывается ошибка, то выйти
+  if (
+    document.querySelector(
+      `.js-error.form-error-block[data-target-name="${target.name}"]`
+    )
+  ) {
+    return;
+  }
+
+  let errorBlock = document.createElement("ul");
+  errorBlock.classList.add("js-error");
+  errorBlock.classList.add("form-error-block");
+  errorBlock.setAttribute("data-target-name", `${target.name}`);
+  errors.forEach(error => {
+    errorBlock.innerHTML += `<li class='form-error-block__item'>${error}</li>`;
+  });
+  errorBlock.style.top = target.offsetHeight + "px";
+  target = target.parentNode;
+  target.appendChild(errorBlock);
+};
+
+//убирает попап с текущими ошибками для поля
+export const removeValidationError = target => {
+  const currentErrorBlock = document.querySelector(
+    `.js-error.form-error-block[data-target-name="${target.name}"]`
+  );
+
+  if (currentErrorBlock) {
+    currentErrorBlock.remove();
+  }
+};
diff --git a/js/dev/grid.js b/js/dev/grid.js
new file mode 100644
index 0000000..15aa737
--- /dev/null
+++ b/js/dev/grid.js
@@ -0,0 +1,9 @@
+const grid = document.createElement("div");
+grid.className = "grid";
+document.body.appendChild(grid);
+
+document.addEventListener("keydown", event => {
+  if (event.ctrlKey && event.code === "KeyG") {
+    grid.classList.toggle("grid_visible");
+  }
+});
diff --git a/js/grid.js b/js/grid.js
deleted file mode 100644
index 2d0e99a..0000000
--- a/js/grid.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const grid = document.createElement('div');
-grid.className = 'grid';
-document.body.appendChild(grid);
-
-document.addEventListener('keydown', (event) => {
-    if (event.ctrlKey && event.code === 'KeyG') {
-        grid.classList.toggle('grid_visible');
-    }
-});
diff --git a/js/index.js b/js/index.js
index f8b8ff8..4ee23d2 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,2 +1,3 @@
-import "./grid";
-import "./slider";
+import "./dev/grid";
+import "./slider/slider";
+import "./popup/popup";
diff --git a/js/input/inputHandler.js b/js/input/inputHandler.js
new file mode 100644
index 0000000..2f712a0
--- /dev/null
+++ b/js/input/inputHandler.js
@@ -0,0 +1,41 @@
+import { FieldValidation } from "../common/FieldValidation";
+import { removeValidationError } from "../common/validationError";
+import {
+  isEmailInvalid,
+  isOperatorCodeInvalid,
+  isTelNumberInvalid
+} from "./inputValidationFunction";
+
+//Обработчик для input
+export const inputHandler = input => {
+  //присвоить необходимые для валидации общие свойства и методы для input
+  input.validation = new FieldValidation();
+  input.touched = false;
+
+  //В зависимости от функциональной принадлежности input - добавить дополнительные проверки
+  if (input.name === "email") input.validation.validities.push(isEmailInvalid);
+
+  if (input.name === "operatorCode")
+    input.validation.validities.push(isOperatorCodeInvalid);
+
+  if (input.name === "telNumber")
+    input.validation.validities.push(isTelNumberInvalid);
+
+  input.addEventListener("keyup", e => {
+    //Если переключение при помощи Tab, то не обрабатывать
+    if (e.code === "Tab") return;
+
+    //иначе отметить, что с текущим input уже работали
+    if (!input.touched) {
+      input.touched = true;
+    }
+
+    input.validation.checkValidities(input);
+  });
+
+  //Назначить обработчик ухода с поля input
+  input.addEventListener("blur", e => {
+    //убрать ошибки валидации при фокусе
+    removeValidationError(input);
+  });
+};
diff --git a/js/input/inputValidationFunction.js b/js/input/inputValidationFunction.js
new file mode 100644
index 0000000..7d85348
--- /dev/null
+++ b/js/input/inputValidationFunction.js
@@ -0,0 +1,30 @@
+//содержит необходимые для валидации input функции
+
+//Проверка валидности ввода email адреса
+export const isEmailInvalid = input => {
+  const match = input.value.match(
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  );
+
+  if (!match) {
+    return "Введите корректный email-адрес";
+  }
+};
+
+//Проверка валидности ввода кода оператор телефона
+export const isOperatorCodeInvalid = input => {
+  const match = input.value.match(/\b\d{3}\b/);
+
+  if (!match) {
+    return "Введите валидный цифровой код оператора длиной 3 символа";
+  }
+};
+
+//Проверка валидности ввода номера телефона
+export const isTelNumberInvalid = input => {
+  const match = input.value.match(/\b\d{7}\b/);
+
+  if (!match) {
+    return "Введите валидный номер телефона длиной 7 символов";
+  }
+};
diff --git a/js/input/inputsOrderForm.js b/js/input/inputsOrderForm.js
new file mode 100644
index 0000000..6ea1636
--- /dev/null
+++ b/js/input/inputsOrderForm.js
@@ -0,0 +1,12 @@
+import { inputHandler } from "./inputHandler";
+
+//Обработать и получить обязательные к заполнению inputs на форме заказа
+export const inputsOrderForm = () => {
+  const inputs = document.querySelectorAll(".js-input-required");
+  if (inputs) {
+    inputs.forEach(input => {
+      inputHandler(input);
+    });
+    return inputs;
+  }
+};
diff --git a/js/models/productCardModel.js b/js/models/productCardModel.js
new file mode 100644
index 0000000..aa7facf
--- /dev/null
+++ b/js/models/productCardModel.js
@@ -0,0 +1,69 @@
+export let productsData = [
+  {
+    id: "1",
+    name: "Зонт",
+    description: "Красный зонт с логотипом HH",
+    image: "product-1.jpg",
+    price: "1&nbsp;990"
+  },
+  {
+    id: "2",
+    name: "Сумка",
+    description: "Красная сумка с логотипом HH",
+    image: "product-2.jpg",
+    price: "290"
+  },
+  {
+    id: "3",
+    name: "Шлепанцы",
+    description: "Красные шлепанцы с логотипом HH",
+    image: "product-3.jpg",
+    price: "790",
+    sizes: {
+      xs: true,
+      x: true,
+      m: false,
+      l: true,
+      xl: true,
+      xxl: true
+    }
+  },
+  {
+    id: "4",
+    name: "Футболка",
+    description: "Красная футболка с логотипом HH",
+    image: "product-4.jpg",
+    price: "690",
+    salePrice: "390",
+    sizes: {
+      xs: true,
+      x: true,
+      m: true,
+      l: true,
+      xl: true,
+      xxl: true
+    }
+  },
+  {
+    id: "5",
+    name: "Толстовка",
+    description: "Красная толстовка с логотипом HH",
+    image: "product-5.jpg",
+    price: "3 990",
+    sizes: {
+      xs: true,
+      x: true,
+      m: true,
+      l: true,
+      xl: true,
+      xxl: true
+    }
+  },
+  {
+    id: "6",
+    name: "Подушка",
+    description: "Красная подушка с логотипом HH",
+    image: "product-6.jpg",
+    price: "990"
+  }
+];
diff --git a/js/orderForm/hideOrderForm.js b/js/orderForm/hideOrderForm.js
new file mode 100644
index 0000000..ac6fdec
--- /dev/null
+++ b/js/orderForm/hideOrderForm.js
@@ -0,0 +1,34 @@
+export const hideOrderForm = e => {
+  let target = e.target;
+
+  while (
+    !target.classList.contains("orderForm") ||
+    e.type !== "successSubmitForm"
+  ) {
+    //если клик по форме, то ничего не делать
+    if (target.classList.contains("form")) {
+      return;
+    }
+
+    //если клик вне формы, то скрыть форму
+    if (target.classList.contains("orderForm")) {
+      break;
+    }
+    //если клик на кнопку "Закрыть", то скрыть форму
+    if (target.classList.contains("form__button-close")) {
+      break;
+    }
+
+    target = target.parentNode;
+  }
+
+  event.preventDefault();
+  const currentForm = document.querySelector(".orderForm_active");
+
+  if (currentForm) {
+    currentForm.classList.remove("orderForm_active");
+    setTimeout(() => {
+      currentForm.remove();
+    }, 300);
+  }
+};
diff --git a/js/orderForm/orderForm.js b/js/orderForm/orderForm.js
new file mode 100644
index 0000000..53d2324
--- /dev/null
+++ b/js/orderForm/orderForm.js
@@ -0,0 +1,55 @@
+import { showOrderForm } from "./showOrderForm";
+import { hideOrderForm } from "./hideOrderForm";
+import { selectTowns } from "../select/selectTowns";
+import { shutDownSelect } from "../select/shutDownSelect";
+import { inputsOrderForm } from "../input/inputsOrderForm";
+import { textareaOrderForm } from "../textarea/textareaOrderForm";
+import { radioOrderForm } from "../radio/radioOrderForm";
+import { prepareToSubmit } from "./prepareToSubmit";
+
+//Событие успешной отправки формы
+export const successSubmitForm = new CustomEvent("successSubmitForm", {
+  bubbles: true
+});
+
+//Работа с формой заказа
+export const orderForm = productData => {
+  //показать форму заказа
+  showOrderForm(productData);
+
+  //назначить обработчик клика по области формы
+  const orderForm = document.querySelector(".orderForm");
+  orderForm.addEventListener("click", hideOrderForm);
+  orderForm.addEventListener("click", shutDownSelect);
+
+  //назначить обработчик клика по кнопке "Закрыть", чтобы скрывать форму
+  document
+    .querySelector(".button-close-icon")
+    .addEventListener("click", hideOrderForm);
+
+  //назначить обработчик события успешной отправки формы
+  document.addEventListener("successSubmitForm", hideOrderForm);
+
+  //обработать и получить select выбора городов
+  const select = selectTowns();
+
+  //обработать и получить все необходимые для формы inputs
+  const inputs = inputsOrderForm();
+
+  //обработать требуемые radio button
+  radioOrderForm();
+
+  //обработать и получить обязательное к заполнению textarea для ввода адреса
+  const textarea = textareaOrderForm();
+
+  //назначать обработчик клика на кнопку "оформить заказ"
+  const submitButton = document.querySelector(".form__button-submit");
+  submitButton.addEventListener("click", e => {
+    e.preventDefault();
+    const result = prepareToSubmit({ inputs, textarea, productData });
+    if (result) {
+      //если форма отправлена успешна, то генерировать событие
+      orderForm.dispatchEvent(successSubmitForm);
+    }
+  });
+};
diff --git a/js/orderForm/prepareToSubmit.js b/js/orderForm/prepareToSubmit.js
new file mode 100644
index 0000000..91f173d
--- /dev/null
+++ b/js/orderForm/prepareToSubmit.js
@@ -0,0 +1,58 @@
+export const prepareToSubmit = optData => {
+  const { productData, inputs, textarea } = optData;
+
+  //Контакная информация и расширенный адрес - обязательные поля.
+  //проверить, все ли требуемые элементы прошли валидацию
+  for (let i = 0; i < inputs.length; i++) {
+    if (inputs[i].validation.isInvalid) {
+      //Указать на первое поле, которое не валидно
+      inputs[i].touched = true;
+      inputs[i].validation.checkValidities(inputs[i]);
+      return;
+    }
+  }
+
+  //Проверить, показывается ли секция с адресом (если нет, то не обрабывать эти данные)
+  const deliveryAddressSection = document.querySelector(
+    ".form__delivery-address"
+  );
+  if (
+    !deliveryAddressSection.classList.contains("form__delivery-address_hide") &&
+    textarea.validation.isInvalid
+  ) {
+    //Указать, что расширенный адрес не прошёл валидацию
+    textarea.touched = true;
+    textarea.validation.checkValidities(textarea);
+    return;
+  }
+
+  //Если всё ОК, то подготовить данные для отправки
+  let formData = {};
+  //Сохранить значения всех inputs
+  const allInputs = document.querySelectorAll("input");
+  [].forEach.call(allInputs, input => {
+    if (input.type === "text" || (input.type === "radio" && input.checked)) {
+      formData[input.name] = input.value;
+    } else if (input.type === "checkbox") {
+      formData[input.name] = input.checked ? true : false;
+    }
+  });
+
+  //Сохранить значения textarea
+  formData[textarea.name] = textarea.value;
+
+  //Пользователь может изменить размер в форме.
+  //На случай изменений, сохранить последний выбор
+  const checkedSize = document.querySelector(".radio-button-size-item:checked");
+  if (checkedSize) {
+    productData.checkedSize = checkedSize.value;
+  }
+
+  //Добавить данные по выбранному товару
+  formData.productData = productData;
+
+  console.log(formData);
+  console.log("Спасибо!");
+
+  return true;
+};
diff --git a/js/orderForm/renderOrderForm.js b/js/orderForm/renderOrderForm.js
new file mode 100644
index 0000000..bd33b40
--- /dev/null
+++ b/js/orderForm/renderOrderForm.js
@@ -0,0 +1,24 @@
+import { getDocumentHeight } from "../common/getDocumentHeight";
+
+//Рендер формы заказа
+
+export const renderOrderForm = orderFormHTML => {
+  const orderForm = document.createElement("div");
+
+  orderForm.classList.add("js-orderForm");
+  orderForm.classList.add("orderForm");
+  orderForm.innerHTML = orderFormHTML;
+
+  //Получить и присвоить высоту документа
+  const documentHeight = getDocumentHeight();
+  orderForm.style.height = documentHeight + "px";
+  document.body.append(orderForm);
+
+  //Показать форму по центру документа
+  const form = document.querySelector(".form");
+  form.style.top = (documentHeight - form.offsetHeight) / 2 + "px";
+
+  setTimeout(() => {
+    orderForm.classList.add("orderForm_active");
+  }, 0);
+};
diff --git a/js/orderForm/showOrderForm.js b/js/orderForm/showOrderForm.js
new file mode 100644
index 0000000..a74c263
--- /dev/null
+++ b/js/orderForm/showOrderForm.js
@@ -0,0 +1,12 @@
+//Показ и работа с формой заказа
+
+import { renderOrderForm } from "./renderOrderForm";
+import { orderFormTemplate } from "../templates/orderFormTemplate";
+
+export const showOrderForm = productData => {
+  //Получить HTML из шаблона формы
+  const orderFormHTML = orderFormTemplate(productData);
+
+  //Рендер формы
+  renderOrderForm(orderFormHTML);
+};
diff --git a/js/popup/getPopupCoords.js b/js/popup/getPopupCoords.js
new file mode 100644
index 0000000..cfdb9c5
--- /dev/null
+++ b/js/popup/getPopupCoords.js
@@ -0,0 +1,44 @@
+//Рассчитывает координаты попапа
+export const getPopupCoords = () => {
+  //Common
+  const popupBorderWidth = 1;
+  const screenGreaterS = 768;
+  const screenGreaterM = 1000;
+
+  //Tablet
+  const popupPaddingLeftTablet = 15;
+  const popupPaddingTopTablet = 20;
+
+  //Desktop
+  const popupPaddingLeftDesktop = 20;
+  const popupPaddingTopDesktop = 20;
+
+  let shiftLeft = 0;
+  let shiftTop = 0;
+
+  //получить текущее разрешение экрана
+  const screenWidth = window.innerWidth;
+
+  //Если попап для Mobile, то координаты не возвращаем
+  if (screenWidth < screenGreaterS) {
+    return null;
+  }
+
+  //Tablet
+  if (screenWidth >= screenGreaterS && screenWidth < screenGreaterM) {
+    shiftLeft = -(popupBorderWidth + popupPaddingLeftTablet);
+    shiftTop = -(popupBorderWidth + popupPaddingTopTablet);
+  }
+
+  //Desktop
+  if (screenWidth >= screenGreaterM) {
+    shiftLeft = -(popupBorderWidth + popupPaddingLeftDesktop);
+    shiftTop = -(popupBorderWidth + popupPaddingTopDesktop);
+  }
+
+  let popupCoords = {};
+  popupCoords.left = shiftLeft;
+  popupCoords.top = shiftTop;
+
+  return popupCoords;
+};
diff --git a/js/popup/hidePopup.js b/js/popup/hidePopup.js
new file mode 100644
index 0000000..34d9963
--- /dev/null
+++ b/js/popup/hidePopup.js
@@ -0,0 +1,21 @@
+import { touchHandler } from "../common/touchHandler";
+
+export const hidePopup = () => {
+  const currentPopup = document.querySelector(".popup_active");
+
+  if (currentPopup) {
+    currentPopup.classList.remove("popup_active");
+
+    const mobileOuter = document.querySelector(".js-mobile-outer");
+    if (mobileOuter) {
+      mobileOuter.remove();
+      document.body.style.overflow = "";
+      //для ios необходимо превентить события скролла (для попапа на mobile)
+      document.removeEventListener("touchmove", touchHandler);
+    }
+
+    setTimeout(() => {
+      currentPopup.remove();
+    }, 300);
+  } else return;
+};
diff --git a/js/popup/popup.js b/js/popup/popup.js
new file mode 100644
index 0000000..1ec6da2
--- /dev/null
+++ b/js/popup/popup.js
@@ -0,0 +1,18 @@
+import { showPopup } from "./showPopup";
+import { hidePopup } from "./hidePopup";
+
+//Назначить обработчик клика по карточке товара
+document.querySelectorAll(".product-card").forEach(productCard => {
+  productCard.addEventListener("click", showPopup);
+});
+
+//Назначить обработчик клика по документу
+//(закрытие попапа при клике не по нему и не по другой карточке товара)
+document.addEventListener("click", e => {
+  let target = e.target;
+  if (target.closest(".popup_active")) {
+    return;
+  } else {
+    hidePopup();
+  }
+});
diff --git a/js/popup/relocatePopup.js b/js/popup/relocatePopup.js
new file mode 100644
index 0000000..28906c8
--- /dev/null
+++ b/js/popup/relocatePopup.js
@@ -0,0 +1,44 @@
+import { showPopup } from "./showPopup";
+import { hidePopup } from "./hidePopup";
+
+//обработчик события resize window
+export const relocatePopup = () => {
+  //получить текущее разрешение экрана
+  const screenWidth = window.innerWidth;
+  const screenGreaterS = 768;
+
+  const activePopup = document.querySelector(".popup_active");
+
+  //Перерисовать popup только при пересечении граничных условий:
+  //если попап отображался для Mobile и разрешение стало больше Mobile или
+  //попап отображался для Tablet/Desktop и разрешение стало меньше Mobile
+  if (
+    (activePopup &&
+      screenWidth >= screenGreaterS &&
+      activePopup.size === "mobile") ||
+    (activePopup &&
+      screenWidth < screenGreaterS &&
+      activePopup.size === "tablet-desktop")
+  ) {
+    //перерисовать попап
+    const productId = document.querySelector(".popup_active .product-card")
+      .dataset.productId;
+    hidePopup();
+
+    const target = document.querySelector(
+      `.product-card[data-product-id="${productId}"]`
+    );
+    showPopup(null, target);
+  }
+
+  //При изменение размера окна для Mobile изменять положение динамически
+  if (
+    activePopup &&
+    screenWidth < screenGreaterS &&
+    activePopup.size === "mobile"
+  ) {
+    //получить ширину окна
+    const windowWidth = document.documentElement.clientWidth;
+    activePopup.style.left = (windowWidth - activePopup.offsetWidth) / 2 + "px";
+  }
+};
diff --git a/js/popup/renderPopupElem.js b/js/popup/renderPopupElem.js
new file mode 100644
index 0000000..66ff97d
--- /dev/null
+++ b/js/popup/renderPopupElem.js
@@ -0,0 +1,40 @@
+import { touchHandler } from "../common/touchHandler";
+
+//Рендерит и возвращает элемент попапа согласно данным о продукте
+
+export const renderPopupElem = (popupHTML, coords, insertTarget) => {
+  const popup = document.createElement("div");
+
+  popup.classList.add("js-popup");
+  popup.classList.add("popup");
+  popup.innerHTML = popupHTML;
+
+  //Если есть coords, значит Tablet/Desktop
+  if (coords) {
+    insertTarget.append(popup);
+    popup.style.left = coords.left + "px";
+    popup.style.top = coords.top + "px";
+    popup.size = "tablet-desktop";
+  } else {
+    //Иначе Mobile
+    let mobileOuter = document.createElement("div");
+    mobileOuter.classList.add("js-mobile-outer");
+    mobileOuter.style.top = window.pageYOffset + "px";
+    mobileOuter.append(popup);
+    document.body.append(mobileOuter);
+
+    //получить высоту и ширину окна
+    const windowHeight = document.documentElement.clientHeight;
+    const windowWidth = document.documentElement.clientWidth;
+
+    popup.style.left = (windowWidth - popup.offsetWidth) / 2 + "px";
+    popup.style.top = (windowHeight - popup.offsetHeight) / 2 + "px";
+    popup.size = "mobile";
+
+    document.body.style.overflow = "hidden";
+    //для ios необходимо превентить события скролла (для попапа на mobile)
+    document.addEventListener("touchmove", touchHandler, { passive: false });
+  }
+
+  return popup;
+};
diff --git a/js/popup/showPopup.js b/js/popup/showPopup.js
new file mode 100644
index 0000000..8ea095a
--- /dev/null
+++ b/js/popup/showPopup.js
@@ -0,0 +1,103 @@
+import { productsData } from "../models/productCardModel";
+import { productCardPopupTemplate } from "../templates/productCardPopupTemplate";
+import { hidePopup } from "./hidePopup";
+import { renderPopupElem } from "./renderPopupElem";
+import { getPopupCoords } from "./getPopupCoords";
+import { orderForm } from "../orderForm/orderForm";
+import { relocatePopup } from "./relocatePopup";
+
+//показать попап
+export const showPopup = (e, targetFromRelocate) => {
+  //если событие "клик", то target из event
+  //иначе был resize и получаем target как targetFromRelocate
+  let target;
+
+  if (e) {
+    target = e.target;
+    //Если клик активному попапу, то ничего не делать
+    if (
+      target.closest(".popup_active") ||
+      target.closest(".product-card__button-submit")
+    ) {
+      return;
+    }
+
+    //Если клик кнопке закрыть, то скрыть попап
+    if (target.closest(".popup-container__button-close")) {
+      hidePopup();
+      return;
+    }
+
+    //если клик по другой карточке продукта, то скрыть текущий попап и отрисовать другой
+    if (
+      target.closest(".product-card") &&
+      document.querySelector(".popup_active")
+    ) {
+      hidePopup();
+    }
+
+    while (!target.classList.contains("product-card")) {
+      target = target.parentNode;
+    }
+  } else {
+    target = targetFromRelocate;
+  }
+
+  //Получить информацию по продукту из модели
+  const productData = productsData.find(
+    product => product.id === target.dataset.productId
+  );
+
+  //Получить HTML из шаблона попапа для данного продукта
+  const popupHTML = productCardPopupTemplate(productData);
+
+  //Получить координаты попапа
+  const popupCoords = getPopupCoords();
+
+  //Рендер попапа на странице
+  const popup = renderPopupElem(popupHTML, popupCoords, target);
+
+  //Повесить обработчик на resize
+  window.addEventListener("resize", relocatePopup);
+
+  setTimeout(() => {
+    popup.classList.add("popup_active");
+
+    //Назначить обработчик клика по кнопке "Закрыть", чтобы скрывать попап
+    document
+      .querySelector(".popup-container__button-close")
+      .addEventListener("click", hidePopup);
+
+    //Назначить обработчик клика по размеру (если товар не безразмерный)
+    if (productData.sizes) {
+      document
+        .querySelectorAll(".radio-button-size-item__label")
+        .forEach(size => {
+          size.addEventListener("click", () => {
+            //если выбрнан размер, то разблокировать кнопку заказа
+            const submitButton = document.querySelector(
+              ".product-card__button-submit"
+            );
+            if (size.classList.contains("label_disabled")) return;
+            submitButton.classList.remove("button-submit_disabled");
+            submitButton.disabled = false;
+
+            //сохранить выбранный пользователем размер
+            //для последующего отображения в форме
+            productData.checkedSize = size.htmlFor;
+          });
+        });
+    }
+
+    //Назначить обработчик клика по кнопке "Заказать"
+    document
+      .querySelector(".product-card__button-submit")
+      .addEventListener("click", () => {
+        //Убрать ранее показанный попап продукта
+        hidePopup();
+
+        //Показать форму
+        orderForm(productData);
+      });
+  }, 300);
+};
diff --git a/js/radio/radioOrderForm.js b/js/radio/radioOrderForm.js
new file mode 100644
index 0000000..e82f411
--- /dev/null
+++ b/js/radio/radioOrderForm.js
@@ -0,0 +1,15 @@
+//Обработать radio-buttons на форме заказа
+export const radioOrderForm = () => {
+  const radioBtns = document.querySelectorAll('input[name="deliveryMethod"]');
+  radioBtns.forEach(radioBtn => {
+    radioBtn.addEventListener("click", () => {
+      if (radioBtn.checked) {
+        //скрыть секцию адрес доставки
+        const deliveryAddressSection = document.querySelector(
+          ".form__delivery-address"
+        );
+        deliveryAddressSection.classList.toggle("form__delivery-address_hide");
+      }
+    });
+  });
+};
diff --git a/js/select/openUpSelect.js b/js/select/openUpSelect.js
new file mode 100644
index 0000000..d829521
--- /dev/null
+++ b/js/select/openUpSelect.js
@@ -0,0 +1,34 @@
+import { shutDownSelect } from "./shutDownSelect";
+import { getDataAsync } from "../common/getDataAsync";
+import { renderSelectOptions } from "./renderSelectOptions";
+
+//открывает options-container закрытого селектора
+export const openUpSelect = selectBlock => {
+  selectBlock.classList.add("select_active");
+  document.querySelector(".input-select").disabled = "disabled";
+
+  //Получить данные адресов для селектора
+  getDataAsync("https://api.hh.ru/areas/113").then(parsedData => {
+    //Для примера берем Московскую область, 7 городов
+    const areas = parsedData.areas[21].areas.slice(0, 7);
+
+    //Начать рендеринг опций селектора
+    const optionsContainer = renderSelectOptions(areas);
+
+    selectBlock.append(optionsContainer);
+
+    //Назначить обработчик клика по опции в селекторе
+    document.querySelectorAll(".options-container__item").forEach(option => {
+      option.addEventListener("click", e => {
+        e.stopPropagation();
+        const checkedArea = e.target.innerHTML;
+        const inputSelect = document.querySelector(".input-select");
+        inputSelect.placeholder = checkedArea;
+        inputSelect.value = checkedArea;
+
+        //Скрыть выбор опций селектора
+        shutDownSelect();
+      });
+    });
+  });
+};
diff --git a/js/select/renderSelectOptions.js b/js/select/renderSelectOptions.js
new file mode 100644
index 0000000..88c13d5
--- /dev/null
+++ b/js/select/renderSelectOptions.js
@@ -0,0 +1,10 @@
+export const renderSelectOptions = dataList => {
+  let optionsContainer = document.createElement("div");
+  optionsContainer.classList.add("options-container");
+
+  dataList.forEach(dataItem => {
+    optionsContainer.innerHTML += `<div class="options-container__item" value='${dataItem.name}'>${dataItem.name}</div>\n`;
+  });
+
+  return optionsContainer;
+};
diff --git a/js/select/selectHandler.js b/js/select/selectHandler.js
new file mode 100644
index 0000000..bbf61c0
--- /dev/null
+++ b/js/select/selectHandler.js
@@ -0,0 +1,18 @@
+import { shutDownSelect } from "./shutDownSelect";
+import { openUpSelect } from "./openUpSelect";
+
+export const selectHandler = e => {
+  let target = e.target;
+
+  //Если клик по активному селекту, то cкрыть options-container
+  if (target.closest(".select_active")) {
+    shutDownSelect();
+    document.querySelector(".input-select").disabled = "";
+  } else {
+    //иначе открыть
+    while (!target.classList.contains("select")) {
+      target = target.parentNode;
+    }
+    openUpSelect(target);
+  }
+};
diff --git a/js/select/selectTowns.js b/js/select/selectTowns.js
new file mode 100644
index 0000000..7746fe8
--- /dev/null
+++ b/js/select/selectTowns.js
@@ -0,0 +1,14 @@
+import { selectHandler } from "./selectHandler";
+
+//Возвращает обработанный select для выбора городов
+export const selectTowns = () => {
+  //Обработать селектор города
+  const select = document.querySelector(".select");
+  if (select) {
+    select.addEventListener("click", selectHandler);
+    select.addEventListener("input", e => {
+      e.target.value = "";
+    });
+    return select;
+  }
+};
diff --git a/js/select/shutDownSelect.js b/js/select/shutDownSelect.js
new file mode 100644
index 0000000..e987547
--- /dev/null
+++ b/js/select/shutDownSelect.js
@@ -0,0 +1,9 @@
+//скрывает options-container открытого селектора
+export const shutDownSelect = () => {
+  const optionsContainer = document.querySelector(".options-container");
+  if (optionsContainer) {
+    document.querySelector(".select").classList.remove("select_active");
+    document.querySelector(".input-select").disabled = "";
+    optionsContainer.remove();
+  }
+};
diff --git a/js/slider.js b/js/slider/slider.js
similarity index 100%
rename from js/slider.js
rename to js/slider/slider.js
diff --git a/js/templates/orderFormTemplate.js b/js/templates/orderFormTemplate.js
new file mode 100644
index 0000000..0679fb4
--- /dev/null
+++ b/js/templates/orderFormTemplate.js
@@ -0,0 +1,123 @@
+//Шаблон формы заказа продукта, основанный на интерполяции строк
+
+import { productCardTemplate } from "./productCardTemplate";
+
+export const orderFormTemplate = productData => {
+  const formPartOneHTML = `<form class="form">
+      <div class="columns-wrapper">
+        <div class="form__button-close">
+          <button class="button-close-icon">
+            Закрыть
+          </button>
+        </div>
+        <div class="columns-row">
+          <div class="column column_s-2 column_m-3 column_l-7">
+            
+            <div class="form__section">
+              <div class="form__input-main-contacts">
+                <h1 class="heading heading_level-1">Оформление заказа</h1>
+                <h4 class="heading heading_level-4">Контактное лицо</h4>
+                <div class="form__input-text">
+                  <input class="input-text js-input-required" type="text" name="fullName" placeholder="ФИО" autocomplete="off" value></input>
+                </div>
+                <div class="form__input-text">
+                  <input class="input-text js-input-required" type="text" name="email" placeholder="Электронная почта" autocomplete="off" value></input>
+                </div>
+              </div> 
+           
+              <div class="form__input-tel">
+                <input class="input-tel input-tel_country-code" type="text" name="countryCode" value="+7"
+                  readonly></input>
+                <input class="input-tel input-tel_operator-code js-input-required" type="text" name="operatorCode" placeholder="Код" autocomplete="off"></input>
+                <input class="input-tel input-tel_number js-input-required" type="text" name="telNumber" placeholder="Номер" autocomplete="off"></input>
+              </div>
+            </div>
+
+            <div class="form__section">  
+              <h4 class="heading heading_level-4">Способ получения заказа</h4>
+              <div class="form__delivery-method">
+
+                <div class="form__radio-button">
+                  <input class="radio-button-sqared radio-button-sqared__button" type="radio" name="deliveryMethod"
+                  value="selfPickup" id="selfPickup"></input> 
+                  <label class="radio-button-sqared__label" for="selfPickup">Самовывоз</label>
+                </div>
+                
+                <div class="form__radio-button">
+                  <input class="radio-button-sqared radio-button-sqared__button" type="radio" name="deliveryMethod"
+                  value="deliviryPickup" id="deliveryPickup" checked></input>
+                  <label class="radio-button-sqared__label" for="deliveryPickup">Доставка</label>
+                </div>
+              
+              </div>
+            </div>
+
+            <div class="form__section">
+              <div class="form__delivery-address">
+                <h4 class="heading heading_level-4">Адрес</h4>
+                <div class="select">
+                  <input class="input-select" name="cityLocataion" placeholder="Город" inputmode="none" type="text" autocomplete="off">
+                  </input>
+                </div>
+                <div class="form__textarea">
+                  <textarea type="textarea" class="textarea" placeholder="Адрес"
+                  name="addressExpaned"></textarea>
+                </div>
+              </div>
+            </div>
+            
+            <div class="form__section">
+              <div class="form__payment-methods">
+                <h4 class="heading heading_level-4">Оплата</h4>
+
+                <div class="form__payment-method">
+                  <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentOnline"
+                    id="paymentOnline" checked></input>
+                  <label class="radio-button-сircle__label" for="paymentOnline">Онлайн-оплата</label>
+                </div>
+    
+                <div class="form__payment-method">
+                  <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentCash"
+                    id="paymentCash"></input>
+                  <label class="radio-button-сircle__label" for="paymentCash">Наличными</label>
+                </div>
+    
+                <div class="form__payment-method">
+                  <input class="radio-button-circle" type="radio" name="paymentMethod" value="paymentCard"
+                    id="paymentCard"></input>
+                  <label class="radio-button-сircle__label" for="paymentCard">Картой при получении</label>
+                </div>
+    
+              </div>
+            </div>
+            
+            <div class="form__section">
+              <div class="form__notification">
+                <h4 class="heading heading_level-4">Уведомления</h4>
+
+                <div class="checkbox">
+                  <input class="checkbox__box" type="checkbox" name="smsNotification" value id="smsNotification"></input>
+                  <label class="label" for="smsNotification">Хочу получать SMS уведомления</label>
+                </div>
+
+              </div>
+            </div>
+
+            <input class="button-submit form__button-submit" type="submit" value="Оформить заказ"></input>
+            
+          </div>`;
+
+  const formPartTwoHTML = `<div class="column column_s-2 column_m-3 column_l-5">
+              <div class="form__product-card">`;
+
+  const productCardHTML = productCardTemplate(productData, true);
+
+  const formPartThreeHTML = `</div>
+           </div>         
+        </div>
+    </form> `;
+
+  return (
+    formPartOneHTML + formPartTwoHTML + productCardHTML + formPartThreeHTML
+  );
+};
diff --git a/js/templates/productCardPopupTemplate.js b/js/templates/productCardPopupTemplate.js
new file mode 100644
index 0000000..7e8f121
--- /dev/null
+++ b/js/templates/productCardPopupTemplate.js
@@ -0,0 +1,12 @@
+//Простой шаблон попапа карточки продукта, основанный на интерполяции строк
+import { productCardTemplate } from "./productCardTemplate";
+
+export const productCardPopupTemplate = productData => {
+  const productCardPopupHTML = `<div class="popup-container">
+  <div class="popup-container__button-close">
+    <button class="button-close-icon">Закрыть</button>
+  </div> `;
+  const productCardHTML = productCardTemplate(productData);
+
+  return productCardPopupHTML + productCardHTML + `</div>\n`;
+};
diff --git a/js/templates/productCardTemplate.js b/js/templates/productCardTemplate.js
new file mode 100644
index 0000000..3b29dcd
--- /dev/null
+++ b/js/templates/productCardTemplate.js
@@ -0,0 +1,82 @@
+//Шаблон карточки продукта, основанный на интерполяции строк
+//параметр formStyle генерирует дополнительную разметку для использования в шаблоне формы
+
+export const productCardTemplate = (productData, formStyle = false) => {
+  const productCardMainTemplate = `${
+    formStyle
+      ? `<div class="product-card">`
+      : `<div class="product-card" data-product-id="${productData.id}">`
+  }  
+    ${
+      formStyle
+        ? `<div class="product-card__image-container product-card__image-container_form">\n`
+        : `<div class="product-card__image-container">\n`
+    } 
+        
+        <img
+          class="product-card__image"
+          src="${productData.image}"
+          alt="${productData.name}"/>
+         
+          ${
+            productData.salePrice
+              ? '<div class="product-card__sale">sale</div>'
+              : ""
+          };
+      </div>
+  
+      <div class="product-card__name">${productData.name}</div>
+  
+      ${
+        productData.salePrice
+          ? `<div class="product-card__price"> <div class="product-card__old-price">${productData.price} ₽</div>${productData.salePrice}  ₽</div>\n`
+          : `<div class="product-card__price"> ${productData.price} ₽</div>\n`
+      } 
+  
+      <h4 class="product-card__description">${productData.description}</h4>\n`;
+
+  let submitButtonTemplate = "";
+  if (formStyle == false) {
+    submitButtonTemplate = `${
+      productData.sizes
+        ? `<input class="button-submit product-card__button-submit button-submit_disabled" type="submit" value="Заказать" disabled></input>\n`
+        : `<input class="button-submit product-card__button-submit" type="submit" value="Заказать"></input>\n`
+    }`;
+  }
+
+  if (!productData.sizes) {
+    //если товар безразмерный, то возвращаем шаблон
+    return productCardMainTemplate + "</div>\n" + submitButtonTemplate;
+  } else {
+    //иначе дополнительно генерируем для каждого размера блоки input-label с учётом доступности размера
+    let productCardSizesTemplate = '<div class="product-card__sizes">\n';
+
+    for (let size in productData.sizes) {
+      let labelPart = "";
+      let inputPart = "";
+
+      if (productData.sizes[size] == false) {
+        labelPart = `<label class="radio-button-size-item__label label_disabled" for="${size}">${size}</label>\n`;
+        inputPart = `<input class="radio-button-size-item" type="radio" name="size" value="${size}" id="${size} disabled"></input>\n`;
+      } else {
+        labelPart = `<label class="radio-button-size-item__label" for="${size}">${size}</label>\n`;
+        inputPart = `<input class="radio-button-size-item" type="radio" name="size" value="${size}" id="${size}"></input>\n`;
+      }
+
+      //При вызове формы присутствует выбранный ранее размер, его нужно установить
+      if (formStyle && productData.checkedSize == size) {
+        inputPart = inputPart.replace("<input ", "<input checked ");
+      }
+
+      productCardSizesTemplate += inputPart + labelPart;
+    }
+
+    return (
+      productCardMainTemplate +
+      productCardSizesTemplate +
+      "</div>\n" +
+      "</div>\n" +
+      submitButtonTemplate
+    );
+  }
+};
diff --git a/js/textarea/textareaHandler.js b/js/textarea/textareaHandler.js
new file mode 100644
index 0000000..1290cd7
--- /dev/null
+++ b/js/textarea/textareaHandler.js
@@ -0,0 +1,27 @@
+import { FieldValidation } from "../common/FieldValidation";
+import { removeValidationError } from "../common/validationError";
+
+//обработчик для textarea
+export const textareaHandler = textarea => {
+  textarea.validation = new FieldValidation();
+  textarea.touched = false;
+
+  //Назначить обработчик нажатия на клавиатуру внутри поля input
+  textarea.addEventListener("keyup", e => {
+    //Если переключение при помощи Tab, то не обрабатывать
+    if (e.code === "Tab") return;
+
+    //отметить, что с текущим textarea уже работали
+    if (!textarea.touched) {
+      textarea.touched = true;
+    }
+    //Провести проверку вводимого пользователем значения
+    textarea.validation.checkValidities(textarea);
+  });
+
+  //Назначить обработчик ухода с поля textarea
+  textarea.addEventListener("blur", e => {
+    //убрать ошибки валидации при фокусе
+    removeValidationError(textarea);
+  });
+};
diff --git a/js/textarea/textareaOrderForm.js b/js/textarea/textareaOrderForm.js
new file mode 100644
index 0000000..f787f88
--- /dev/null
+++ b/js/textarea/textareaOrderForm.js
@@ -0,0 +1,10 @@
+import { textareaHandler } from "./textareaHandler";
+
+//Обработать и получить обязательное к заполнению textarea на форме заказа
+export const textareaOrderForm = () => {
+  const textarea = document.querySelector("textarea");
+  if (textarea) {
+    textareaHandler(textarea);
+    return textarea;
+  }
+};
diff --git a/package.json b/package.json
index a3d042f..e31b378 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,13 @@
     "deploy": "yarn build && gh-pages -d dist"
   },
   "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-transform-runtime": "^7.7.6",
     "cssnano": "^4.1.10",
     "gh-pages": "^2.1.1",
     "less": "^3.10.3"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs2": "^7.7.7"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index b011caf..052dae0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,152 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/core@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
+  integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.7"
+    "@babel/helpers" "^7.7.4"
+    "@babel/parser" "^7.7.7"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@babel/types" "^7.7.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.7.4", "@babel/generator@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.7.tgz#859ac733c44c74148e1a72980a64ec84b85f4f45"
+  integrity sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ==
+  dependencies:
+    "@babel/types" "^7.7.4"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
+"@babel/helper-function-name@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
+  integrity sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.7.4"
+    "@babel/template" "^7.7.4"
+    "@babel/types" "^7.7.4"
+
+"@babel/helper-get-function-arity@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
+  integrity sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==
+  dependencies:
+    "@babel/types" "^7.7.4"
+
+"@babel/helper-module-imports@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91"
+  integrity sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==
+  dependencies:
+    "@babel/types" "^7.7.4"
+
+"@babel/helper-plugin-utils@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
+  integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
+
+"@babel/helper-split-export-declaration@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
+  integrity sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==
+  dependencies:
+    "@babel/types" "^7.7.4"
+
+"@babel/helpers@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302"
+  integrity sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg==
+  dependencies:
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@babel/types" "^7.7.4"
+
+"@babel/highlight@^7.0.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
+  integrity sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.7.4", "@babel/parser@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
+  integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw==
+
+"@babel/plugin-transform-runtime@^7.7.6":
+  version "7.7.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
+  integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A==
+  dependencies:
+    "@babel/helper-module-imports" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
+"@babel/runtime-corejs2@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.7.7.tgz#44885957b275a5fd70413142eda9cff4662847ac"
+  integrity sha512-P91T3dFYQL7aj44PxOMIAbo66Ag3NbmXG9fseSYaXxapp3K9XTct5HU9IpTOm2D0AoktKusgqzN5YcSxZXEKBQ==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
+"@babel/template@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
+  integrity sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.7.4"
+    "@babel/types" "^7.7.4"
+
+"@babel/traverse@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
+  integrity sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.4"
+    "@babel/helper-function-name" "^7.7.4"
+    "@babel/helper-split-export-declaration" "^7.7.4"
+    "@babel/parser" "^7.7.4"
+    "@babel/types" "^7.7.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/types@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
+  integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
@@ -160,7 +306,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -233,6 +379,18 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
+convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+core-js@^2.6.5:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -381,6 +539,13 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+debug@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -498,6 +663,11 @@ esprima@^4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -611,6 +781,11 @@ glob@^7.0.3, glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -813,6 +988,11 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
@@ -826,6 +1006,11 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -846,6 +1031,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json5@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
+  integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==
+  dependencies:
+    minimist "^1.2.0"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -889,7 +1081,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.14:
+lodash@^4.17.13, lodash@^4.17.14:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -928,6 +1120,11 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
+minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+
 mkdirp@^0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -935,6 +1132,11 @@ mkdirp@^0.5.0, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 node-releases@^1.1.40:
   version "1.1.40"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.40.tgz#a94facfa8e2d612302601ca1361741d529c4515a"
@@ -1022,6 +1224,11 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -1374,6 +1581,11 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+
 request@^2.83.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
@@ -1405,6 +1617,13 @@ resolve-from@^3.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
   integrity sha1-six699nWiBvItuZTM17rywoYh0g=
 
+resolve@^1.3.2, resolve@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.1.tgz#9e018c540fcf0c427d678b9931cbf45e984bcaff"
+  integrity sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==
+  dependencies:
+    path-parse "^1.0.6"
+
 rgb-regex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
@@ -1427,6 +1646,11 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
   integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
 
+safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
 safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -1437,6 +1661,11 @@ sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+semver@^5.4.1, semver@^5.5.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
 semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -1456,6 +1685,11 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+source-map@^0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
 source-map@^0.6.1, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -1566,6 +1800,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
 tough-cookie@~2.4.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"