Ссылка на просмотр баллов по лабораторным: https://docs.google.com/spreadsheets/d/1ejWHxA-ZC-F3-VMgpQog1_faTB_uwUb5vXjx2m-CM9M/edit#gid=0
- Необходимо склонить данный репозиторий к себе на рабочий компьютер.
Для этого выполните в Terminal команду:
git clone <url который отобразиться при нажатии на зеленую кнопку clone or download> - Открыть папку которая у вас появилась в разделе в который вы клонировали репозиторий в любом из редакторов кода или IDE, например в VisualStudio Code
- Отвести ветку:
Для этого выполните в Terminal команду:
git checkout -b номер вашей группы/ваша фамилия
- Для начала выполнения лабораторных работ вам необходимо установить зависимости:
npm install - В папке lab№номер текущей лабораторной работы, вы найдете файлы, необходимо решить задачи во всех файлах в данной папке условие задачи описано комментариями в каждом файле
- Запуск тестов для проверки ваших лабораторных:
npm run test - Необходимо добиться того, чтобы все тесты проходили и горели зеленым, как только добъетесь этого можно переходить к этапу отправки лабораторной на проверку.
- Сначала вам необходимо закомитеть и отправить файлы измененные вами в ходе решения лабораторной работы, для этого выполните команды:
git add .
git commit -m 'Выполнил задание по 1 лабораторной работе <Фамилия>'
git push - После выполнение данных команд у вас появится ссылка в консоле на которую необходимо перейти и создать Pull Request.
- Далее тесты запустятся на вашем PR и как только они пройдут, мы возьмем ваши лабораторные на проверку.
- Если ваш PR будет ОТКЛОНЕН, то мы приняли вашу лабораторную на максиум!
- Если на вашем PR появятся какие либо комментарии от нас, то вам нужно будет что либо переделать, взависимости от того что мы написали вам в вашем PR, и повторить еще раз все действия описанные в пункте 3 только уже создавать PR не надо, ваши изменения подтянуть в уже существующий, после под каждым нашим комментарием написть done, если вы поправили, если нет то напишите почему или зайдайте вопросы.
Github Pages это сервис, для отдачи статических фалов.
Для его использования нужно просто создать репозиторий с названием <username>.github.io.
И вот магия - все работает!
- необходимо залить файлик в корень репозитория
index.html, и он станет доступен по урлуhttps://<username>.github.io.Подробная инструкция.
- необходимо сверстать статью из Медиума. Вот ссылка.
- начиная от начала статьи и до
Tutorials are divided into 17 relevant groups (see below).(в /images вы можете найти подсказку)) - шапка должна быть закреплена, если получится сделать красивую анимацию при скролле, будет супер!
- для отправки на проверку нужно будет заполнить в табличку ссылку на репозиторй и на развернутый проект.
Задание: используя открытое api, сверстать страницу погоды Можно захардкодить Москву (желательно сделать поиск) вот мое предложение https://openweathermap.org/current можете найти более удобное для себя, мы не против Вам нужно будет прочитать про запросы: https://learn.javascript.ru/fetch и про промисы: https://learn.javascript.ru/promise
Сайт должен быть адаптивным (адекватно выглядеть на всех экранах + мобилка) Рекомендуется сделать это через относительные размеры (проценты) И медиа запросы: http://htmlbook.ru/css/value/media Считается, что все что менбше 1000px (ширина) это мобильное устройство
Сайт должен быть красивым(дизайн придумывайте сами), удобным, адаптивным и с красивым кодом
нужно будет задеплоить его как и во второй лабе, чтоб мы посмотрели, заполнять ту же таблицу
PS страую лабу лучше переименовать в репозитории, чтоб она не потерялась
PPS если вы отправили лабу, и мы не проверили, значит мы этого не заметили, и нас нужно пингануть
Необходимо разработать форму содержащую по меньшей мере 4 поля
Пример: Имя Почта Телефон Описание Прикрепить файл
- Поля выбирайте сами
- Данные должны валидироваться, пользователь не должен иметь возможности ввести некорректную информацию. При вводе некорректной информации информировать об этом пользователя.
- Сделать какие либо поля обязательными какие либо не обязательными.
- В случае если пользователь вбил корректную информацию отображать любым образом успешное отправление данных
Пример: https://thmoon.ru/#form
Положить все введенные пользотваелем данные в базу. Для базы будем использовать firebase: https://firebase.google.com/?hl=ru
Firebase - облачная СУБД с открытым API.
- в корневой директории должен быть index.html файл где будут ссылки на задеплоенные лаб работы (можно без css)
- создать папку под каждую лабу с деплоем (lab2, lab3, lab4)
- в каждой папке переименовть html файл в index.html
таким образом будут всегода доступны все лаб работы:
- my-nickname.github.io - разводящая страница с ссылками
- my-nickname.github.io/lab2 - вторая лаб работа и т д
Задание: Сделать конвертер валют с авторизацией и регистрацией. ВЕРСТКА АДАПТИВНАЯ Разработка домашней работы будет проходить в 3 этапа!
- Разработка главной страницы с текущим курсом всех валют, которые отдает АПИ, по отношению к рублю. Дизайн на свой вкус, но должно быть красиво и адаптивно.
- Разработка еще 2-х страниц + доработка главной страницы. Страница авторизации, страница регистрации, если пользователь авторизован, то на главной странице появялется кнопка "Рассчитать Валюту", которая ведет на странице конвертера.
- Разработка еще 1 страницы одной страницы, а именно страницы Конвертера.
Стек технологий:
- База данных Firebase.
- JS, React, HTML, CSS. Использование HTML и CSS фреймворков запрещено.
- JQUERY - ЗАПРЕЩЕН
- АПИ для получения валют: https://exchangeratesapi.io/
- пример тспользования АПИ: https://api.exchangeratesapi.io/latest?base=RUB
Для диплоя на github pages вам необходимо будет собрать продовую сборку npm run build, и файлик который вам соберется залить на Github Pages, в папку lab5.
Техническое задание Приложение должно быть написано на React, с помощью create-react-app. Необходимо очистить от ненужных вещей тот проект, что он создаст. Приложение должно включать в себя 4 страницы, с адаптивной версткой Конвертера Валют.
На всех страницах в хедере должен находится логотип, или же кнопка "Главная" возвращающая пользователя на главную страницу.
Главная страница имеет два состояния:
- пользователь неавторизован;
- пользователь авторизован.
В случае если пользователь неавторизован, на экране у него имеется Курс доступных валют относительно рубля. В хедере имеется две кнопки, "Войти" и "Регисрация", которые ведут на соответствующие страницы с Авторизацией и Регистрацией.
В случае если пользователь авторизован, на экране у него имеется Кнопка "Рассчитать Валюту", которая ведет на страницу Конвертера, а также ниже теже данные которые у неавторизованного пользователя. В хедере присутсвует только одна кнопка "Выйти", при нажатии на которую пользователь выходит из личного кабинета и попадает на состояние страницы когда он не авторизован.
Урл для страницы регистрации выбираете на свое устмотрение Пример: /register
На странице регистрации должна отображаться форма регистрации с обязательными и необязательными полями, в числе которых обязательно должны присутствовать Имя и Фотография. Необходимое условие для формы, наличие валидации на каждое поля и масок или плейсхолдеров. В случае введения пользователем некорректных данных, должна высвечиваться не нативная, ошибка, с ПОНЯТНЫМ текстом ошибки. В общем-то форма должна быть User Friendly.
При успешном заполнении всех данных и нажатии на кнопку "Зарегестрироваться", пользователь успешно проходит регистрацию и попадает на главную страницу находящуюся в состоянии "пользователь авторизован".
Урл для страницы авторизации выбираете на свое устмотрение Пример: /auth
На странице авторизации должна отображаться форма авторизации с обязательными полями такими как Email or Login и password Необходимое условие для формы, наличие валидации на каждое поля и масок или плейсхолдеров. В случае введения пользователем некорректных данных, должна высвечиваться не нативная, ошибка, с ПОНЯТНЫМ текстом ошибки. В общем-то форма должна быть User Friendly.
При успешном заполнении всех данных и нажатии на кнопку "Войти", пользователь успешно проходит авторизацию и попадает на главную страницу находящуюся в состоянии "пользователь авторизован".
Урл для страницы конвертера выбираете на свое устмотрение Пример: /converter
На странице должно находится два селекта формата выпадющий список, а также 1 инпут.
1 - ый селектор является селектором той валюты в которой у пользователя есть в данный момент деньги. 2 - ой селектор является селектором той валюты в которую пользователь хочет перевести деньги.
В инпут пользователь вводит сумму которую хочет перевести. Система после остановки ввода автоматически должна рассчитать сумму которую пользователь получит в той валюте, в которой ему это нужно. Абсолютно все поля должны быть подписаны, и валидированы. К примеру, пользователь не может вбивать буквы в поле где указывает сумму.
В конце, вы должны получить польностью готовый сервис, с хорошим дизайном, адаптивной версткой работающий без перебоев.
По всем вопросам пишите в телеграмм!