Resume

Readme.md

Здравствуйте. Меня зовут Андрей Островский. Разработкой начал заниматься два года назад, окончив интенсив “Базовый HTML и CSS” в HTML academy. Затем, спустя пол-года, прошёл продвинутый интенсив. В сентябре 2017 окончил интенсив “Базовый JavaScript”. Все три интенсива окнчил успешно, защитив проекты на 100%. За время работы приходилось верстать, как небольшие лендинги, так и полноценные многостраничные сайты, в том числе и интернет-магазины. Среди сделанных мной проектов могу выделить:

• https://trezerbit.com/ вёрстка, js (файл со скриптами - в гисте. script.js)
• http://orius.by/ вёрстка, js
• https://yurkasvitebsk.by/ вёрстка, js (мобильное меню)

Являюсь наставником на интенсивах HTML академии “Базовый HTML и CSS” и “Продвинутый HTML и CSS”

Начал изучать React, хочу развиваться именно в сторону полноценного фронтенда

FlexBox, postCss, scss, BEM, gulp, git, js

catalog.css

.catalog {
  position: relative;
  @mixin container;
  padding-top: 70px;
  padding-right: 0;
  padding-bottom: 20px;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(100% - 30px);
    height: 1px;
    transform: translateX(-50%);
    background-color: #d0d3da;
  }
}

.catalog__title {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  font-style: italic;
}

.catalog__inner {
  margin-top: 30px;
  padding-bottom: 30px;
  font-size: 0;
  white-space: nowrap;
  overflow-x: scroll;
}

@media (min-width: 768px) {
  .catalog {
    overflow: hidden;

    &::after {
      display: none;
    }
  }

  .catalog__title {
    font-size: 20px;
  }

  .catalog__inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 25px;
    margin-right: -30px;
    margin-bottom: -30px;
    overflow-x: auto;
  }
}

@media (min-width: 1200px) {
  .catalog {
    padding-top: 100px;
  }

  .catalog__title {
    font-size: 30px;
  }

  .catalog__inner {
    margin-top: 35px;
  }
}

form.js

'use strict';

(function () {
  // перемнные для валидации формы
  var form = document.querySelector('.notice__form');
  var titleField = form.querySelector('#title');
  var priceField = form.querySelector('#price');
  var timeinField = form.querySelector('#timein');
  var timeoutField = form.querySelector('#timeout');
  var typeField = form.querySelector('#type');
  var roomField = form.querySelector('#room_number');
  var capacityField = form.querySelector('#capacity');
  var optionsArray = capacityField.querySelectorAll('option');

  // объекты соответствия и массивы значений для полей формы
  var TYPE_VALUES = [
    'flat',
    'bungalo',
    'house',
    'palace'
  ];

  var PRICE_VALUES = [
    '1000',
    '0',
    '10000',
    '10000'
  ];

  var ROOMS_CAPACITY_MAP = {
    1: ['1'],
    2: ['1', '2'],
    3: ['1', '2', '3'],
    100: ['0']
  };

  var TIME_VALUES = [
    '12:00',
    '13:00',
    '14:00'
  ];

  // функция переключает класс invalid
  // Если поле валидно, !target.validity.valid возвращает false
  var validationInputHandler = function (evt) {
    evt.preventDefault();
    evt.target.classList.toggle('invalid', !evt.target.validity.valid);
  };

  var addFormValidationHandlers = function () {
    form.addEventListener('invalid', validationInputHandler, true);

    titleField.addEventListener('input', validationInputHandler);
    priceField.addEventListener('input', validationInputHandler);
  };

  // обработчик для синхронизации значений полей
  var syncFieldHandler = function (currentField, changedField, currentFieldArray, changedFieldArray) {
    changedField.value = changedFieldArray[currentFieldArray.indexOf(currentField.value)];
  };

  // обработчик для связывания типа жилья и цены
  var syncPriceHandler = function (currentField, changedField, currentFieldArray, changedFieldArray) {
    changedField.min = changedFieldArray[currentFieldArray.indexOf(currentField.value)];
  };

  // функция для связывания количества комнат и гостей
  var syncCapacityHandler = function (currentField, changedField, currentFieldArray) {
    [].forEach.call(changedField, function (element) {
      var capacityOption = currentFieldArray[currentField.value].indexOf(element.value);

      // если элемент не найден, то disabled = true
      element.disabled = !~capacityOption;
      element.selected = ~capacityOption;
    });
  };

  var errorHandler = function (errorMessage) {
    var node = document.createElement('div');
    node.className = 'error-message';

    node.textContent = errorMessage;
    document.body.insertAdjacentElement('afterbegin', node);
  };

  var successHandler = function () {
    var invalidFields = form.querySelectorAll('.invalid');

    [].forEach.call(invalidFields, function (element) {
      element.classList.remove('invalid');
    });

    form.reset();
  };

  var submitFormHandler = function (evt) {
    evt.preventDefault();

    window.backend.save(new FormData(form), successHandler, errorHandler);
  };

  // добавляю обработчики формы и полей
  var addFormListeners = function () {
    addFormValidationHandlers();

    form.addEventListener('submit', submitFormHandler);

    syncCapacityHandler(roomField, optionsArray, ROOMS_CAPACITY_MAP);
    syncPriceHandler(typeField, priceField, TYPE_VALUES, PRICE_VALUES);
  };


  window.synchronizeFields(timeinField, timeoutField, TIME_VALUES, TIME_VALUES, syncFieldHandler);
  window.synchronizeFields(timeoutField, timeinField, TIME_VALUES, TIME_VALUES, syncFieldHandler);
  window.synchronizeFields(typeField, priceField, TYPE_VALUES, PRICE_VALUES, syncPriceHandler);
  window.synchronizeFields(roomField, optionsArray, ROOMS_CAPACITY_MAP, ROOMS_CAPACITY_MAP, syncCapacityHandler);

  addFormListeners();
})();

script.js

"use strict";

(function () {
  var titles = document.querySelectorAll('.accordion__title');

  var showContent = function (item) {
    item.classList.toggle('accordion__title--active');
    item.nextElementSibling.classList.toggle('accordion__description--show');
  };

  [].forEach.call(titles, function (item) {
    item.addEventListener('click', function () {
      showContent(item);
    })
  });
})();

(function () {
  var inputs = document.querySelectorAll('.calculate__input');

  [].forEach.call(inputs, function (input) {
    var currentWidth = input.clientWidth;
    var step = 40;

    input.addEventListener('input', function (e) {
      var target = e.target;
      var width = target.value.length * step;

      target.setAttribute('style', 'width:' + width + 'px');

      if(width === 0) {
        target.setAttribute('style', 'width:' + currentWidth + 'px');
      }
    });
  });
})();