Skip to content

KostyanB/digElemTask

Repository files navigation

"DigElem" Тестовое задание

О приложениии

Demo.

  • Отправка данных пользователя из модального окна, вызываемого кликом по 'Let’s Talk' в одноименном разделе
  • Валидация формы: Кнопка Submit разблокируется после проверки на пустые поля и валидации полей.
  • Поле Full Name - удаляются множественные пробелы и запрет ввода имени короче 3 символов
  • Поле E-mail - блокируется ввод пробелов и кириллицы, валидация по маске
  • Поле Message - удаляются множественные знаки препинания
  • Уведомление пользователя при успешной/ошибочной отправке данных на сервер
  • Закрытие popup кликом на "крестик" или мимо формы (оверлей)
  • Автозакрытие popup-уведомления через 5 секунд
  • Очистка popup формы после успешной отправки
  • Плавный скролл при навигации по странице - выпадающее меню в header и навигационные ссылки в footer (в примере ссылки на соцсети заменены "якорями" в начало страницы).
  • Отключение скролла при открытии модального окна

Стек технологий

  • Формирование навигационных ссылок в header/footer и блока Our Clients с помощью скриптов.
  • Настройки навигации и api-ссылки отправки данных юзера в файле env.json;
  • Модульная структура скриптов /src;
  • Сборка webpack;
  • Отправка данных на сервер rest-api;
  • Адаптивная верска, без учета IE;
  • SVG изображения и SVG-спрайт иконок;
  • Использование SCSS для стилизации;
  • Адаптивность с помощью flex/grid и медиа-запросов;
  • Использование CSS-функции clamp() для плавного иземения отступов и шрифтов заголовков;
  • CSS анимация;
  • Деплой демо на Google Firebase.

Как установить

  • Скопировать содержимое репозитория в рабочую папку
  • В терминале выполнить команду npm install
  • Для использования ES12 синтаксиса, после установки 'node_modules' выполнить в консоли команду./node_modules/.bin/babel src --out-dir lib
  • Запуск режима разработчика командой npm run dev
  • Открыть https://localhost:3000 для просмотра в браузере
  • Для сборки приложения команда npm run build. Готовый проект будет в папке build рабочей директории