Post resume steps two and three is done

src/js/main.js

@@ -742,19 +742,20 @@ if(buttonMailingPhone && buttonMailingEmail)
   });
 }
 
-
 // Загрузка фото
 
 let canvasAvatar = document.querySelector('#canvas-avatar');
-let ctx = canvasAvatar.getContext("2d");
-
-let initialAvatar = new Image();
-
-// Загружаем файл изображения
-initialAvatar.src = "../img/img_substrate.png";
 
 if(canvasAvatar)
 {
+  let ctx = canvasAvatar.getContext("2d");
+
+  let initialAvatar = new Image();
+
+  // Загружаем файл изображения
+
+  initialAvatar.src = "../img/img_substrate.png";
+
   initialAvatar.onload = function() 
   {
     ctx.drawImage(initialAvatar, 0, 0, 210, 210);
@@ -785,6 +786,156 @@ if(canvasAvatar)
 }
 
 
+// Выбор должности
+
+let position = document.querySelector('#position');
+let otherPosition = document.querySelector('#other-position');
+
+if(position && otherPosition)
+{
+  position.addEventListener('change', () => {
+    console.log(1);
+    if(position.value === 'other')
+    {
+      otherPosition.removeAttribute('disabled');
+    }
+    else 
+    {
+      otherPosition.setAttribute('disabled', 'disabled');
+    }
+  });
+}
+
+
+// Добавить другой город
+
+let addOtherCity = document.querySelectorAll('.add-other-city');
+let indexCity = 0
+
+if(addOtherCity.length)
+{
+  addOtherCity.forEach(elem => {
+    elem.addEventListener('click', (e) => {
+      e.preventDefault();
+      let newCity = document.createElement('input');
+      indexCity++;
+      newCity.type = "text";
+      newCity.id = 'other-city' + indexCity;
+      newCity.name = 'other-city' + indexCity;
+      newCity.placeholder = 'ГОРОД';
+      newCity.style.marginTop = '7px';
+      elem.parentElement.parentElement.querySelector('.block-post-resume').appendChild(newCity);
+    });
+  });
+}
+
+
+// Начало и конец работы 
+
+let inputWork = document.querySelectorAll('.work-period__block input');
+
+if(inputWork.length)
+{
+  inputWork.forEach(elem => 
+  {
+    datepicker(elem, {
+      formatter: (input, date, instance) => 
+      {
+        const value = date.toLocaleDateString();
+        input.value = value; // => '1/1/2099'
+      },
+      startDay: 0,
+      customDays: ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'],
+      customMonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+      showAllDates: true, 
+      overlayButton: 'Выбрать', 
+      overlayPlaceholder: 'Укажите год'
+    
+    });
+  });
+}
+
+
+// Добавление места работы 
+
+let addPlaceWork = document.querySelectorAll('.add-place-work');
+let indexPlaceWork = 0;
+
+if(addPlaceWork.length)
+{
+  addPlaceWork.forEach(elem => {
+    elem.addEventListener('click', (e) => 
+    {
+      e.preventDefault();
+      let newForm = elem.parentElement.parentElement.querySelector('.data-form-experience').cloneNode(true);
+      newForm.style.marginTop = '43px';
+      let newInputs = newForm.querySelectorAll('input');
+      let newLabels = newForm.querySelectorAll('label');
+      let newSelects = newForm.querySelectorAll('select');
+      let newTextarea = newForm.querySelectorAll('textarea');
+      indexPlaceWork++;
+      
+      newInputs.forEach(input => {
+        let oldName = input.name;
+        input.name = oldName + indexPlaceWork;
+        let oldId = input.id;
+        input.id = oldId + indexPlaceWork;
+      });
+
+      newLabels.forEach(label => {
+        let oldFor = label.getAttribute('for');
+        label.setAttribute('for', oldFor + indexPlaceWork);
+      });
+
+      newSelects.forEach(select => {
+        let oldName = select.name;
+        select.name = oldName + indexPlaceWork;
+        let oldId = select.id;
+        select.id = oldId + indexPlaceWork;
+      });
+
+      newTextarea.forEach(textarea => {
+        let oldName = textarea.name;
+        textarea.name = oldName + indexPlaceWork;
+        let oldId = textarea.id;
+        textarea.id = oldId + indexPlaceWork;
+      });
+
+      elem.parentElement.parentElement.insertBefore(newForm, elem.parentElement);
+
+      newSelects.forEach(select => {
+        new Choices(select, {
+          choices: [],
+          placeholder: true,
+          searchEnabled: false,
+          itemSelectText: ''
+        });
+      });
+
+      newForm.querySelectorAll('.work-period__block input').forEach(elem => {
+        datepicker(elem, {
+          formatter: (input, date, instance) => 
+          {
+            const value = date.toLocaleDateString();
+            input.value = value; // => '1/1/2099'
+          },
+          startDay: 0,
+          customDays: ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'],
+          customMonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+          showAllDates: true, 
+          overlayButton: 'Выбрать', 
+          overlayPlaceholder: 'Укажите год'
+        
+        });
+      });
+
+    });
+  });
+}
+
+
+
+
 
 
 

src/main.html

@@ -206,8 +206,14 @@
                         <li>
                             <a href="post-resume-step1.html">Разместить резюме - Шаг 1</a>
                         </li>
-                        <!-- <li>
+                        <li>
                             <a href="post-resume-step2.html">Разместить резюме - Шаг 2</a>
+                        </li>
+                        <li>
+                            <a href="post-resume-step3.html">Разместить резюме - Шаг 3</a>
+                        </li>
+                        <!-- <li>
+                            <a href="post-resume-step4.html">Разместить резюме - Шаг 4</a>
                         </li> -->
                     </ul>
                 </div>

src/scss/style.scss

@@ -695,6 +695,18 @@ ul
         {
             background-color: #b7b6c3;
         }
+        p 
+        {
+            font-family: Montserrat Regular;
+            font-size: 15px;
+            font-weight: 400;
+            font-stretch: normal;
+            font-style: normal;
+            line-height: normal;
+            letter-spacing: normal;
+            color: $color-primary;
+            width: 80%;
+        }
     }
 }
 .block-radio:hover 
@@ -755,6 +767,18 @@ ul
         {
             opacity: 1;
         }
+        p 
+        {
+            font-family: Montserrat Regular;
+            font-size: 15px;
+            font-weight: normal;
+            font-stretch: normal;
+            font-style: normal;
+            line-height: normal;
+            letter-spacing: normal;
+            color: $color-primary;
+            width: 80%;
+        }
     }
 }
 
@@ -3939,6 +3963,11 @@ input[type="submit"]
             color: $color-disabled;
             text-transform: uppercase;
             border: 0;
+            transition: .3s;
+        }
+        &__step:hover 
+        {
+            color: $color-hover;
         }
         &__step_current 
         {
@@ -3953,8 +3982,11 @@ input[type="submit"]
     form 
     {
         position: relative;
-        .transfer-steps 
-        {
+    }
+}
+
+.transfer-steps 
+{
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -3964,8 +3996,6 @@ input[type="submit"]
         z-index: -1;
         pointer-events: none;
     }
-        }
-    }
 }
 
 .load-avatar
@@ -4012,6 +4042,101 @@ input[type="submit"]
 }
 
 
+// Страница Разместить резюме - Шаг 2 
+
+.desired-salary 
+{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .choices, input{
+        width: 49.5% !important;
+    }
+}
+
+.block-post-resume 
+{
+    border-top: 2px solid #DDDCE8;
+    padding-top: 43px;
+    &__name 
+    {
+        font-family: Raleway Regular;
+        font-size: 16px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: normal;
+        letter-spacing: normal;
+        color: $color-primary;
+    }
+    .block-radio, .block-checkbox
+    {
+        margin-top: 0;
+        margin-bottom: 22px;
+    }
+    .block-callback
+    {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .block-callback .block-radio:nth-child(2)
+    {
+        margin-left: 0;
+    }
+}
+
+.block-add
+{
+    margin-top: 32px;
+    display: flex;
+}
+
+// Разместить резюме - Шаг 3
+
+.form-experience
+{
+    border-bottom: 2px solid #DDDCE8;
+}
+
+.block-skip-step 
+{
+    padding-bottom: 43px;
+    border-bottom: 2px solid #DDDCE8;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.work-period 
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &__block 
+    {
+        display: flex;
+        align-items: center;
+        input 
+        {
+            width: 184px;
+            margin-left: 10px;
+        }
+    }
+    p 
+    {
+        font-family: Montserrat Regular;
+        font-size: 15px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.88;
+        letter-spacing: normal;
+        color: $color-primary;
+    }
+}
+
+
+
 .footer 
 {
     background-color: #fff;