search

Nolra / front_course_2023

charity course
7 stars 0 forks source link

JS native Project #14

Open Nolra opened 1 year ago

Nolra commented 1 year ago

Макет нашего итогового приложения в курсе html/css/js

Ведите разработку следующими этапами -

  1. разработать компонентную html структуру
  2. реализовать css (выделите общие стили и частные блоки) + адаптивность
  3. добавьте интерактивности с помощью js

Приложение представляет из себя страницу валютного обменника.

Функциональные части (js):

  1. мобильное меню (для экранов меньше 992px)
  2. модальные окна (для демонстрационных элементов - ссылок и пр, и для функциональных элементов макета)
  3. обменник, подключённый к бесплатному API, обычно бесплатные API ограничены поэтому для тестирования и разработки используйте объект по этой ссылке (он точно такой же как ответы которые вы будете получать через API)
  4. Блок с последними операциями - реализация через localStorage
  5. Блок с последними операциями (для экранов меньше 992px) - реализация через слайдер

Сдавайте проект на ревью частями, после разработки каждой части разбивая работу по этапам и разработке функциональности

удачи

voidaugust commented 1 year ago

https://github.com/pashbespaloff/cryptosale https://pashbespaloff.github.io/cryptosale/

Это первая итерация. Чего пока нет:

Nolra commented 1 year ago

https://github.com/pashbespaloff/cryptosale https://pashbespaloff.github.io/cryptosale/

Это первая итерация. Чего пока нет:

  • иллюстрация из макета скачивается криво, с лишними кругами, поэтому выглядит стрёмно и сжимается тоже стрёмно — переделаю, если будет возможно скачать нормальную иллюстрацию,
  • адаптивности блока latest applications (то есть слайдера),
  • выплывающего меню по клику на кнопку-бургер,
  • работы с JS (только визуальный эффект на хедере при скролле).

Все очень хорошо по стилю кода и по правильности html/css, но есть проблема с самим макетом. Он "резиновый", и есть множественные проблемы на разных экранах, чтобы их избежать стоит задать паттерн, во-первых паттерн контейнеров. В оригинальном дизайне они в целом схожи с bootstrap размерами контейнера. Можно использовать его, а можно просто сделать фиксированный контейнер, который при 1200 становится 100%.

Я рекомендую отказаться от идеи резинового контейнера и остановится на проекте фиксированных контейнеров в px. Чтобы понять в чем проблема поставь ширину экрана 2560 (4к) кнопка Exchange имеет ширину 768px, такого быть не должно. И я рекомендую отсмотреть начиная с этого разрешения и до 1200, он не должен меняться, должен быть стабильным. Его максимальный фрейм - 1160px согласно макету. При переходу к мобильной верстке я также рекомендую избегать резиновых элементов (таких как кнопки, inputs), они должны иметь стабильный размер для каждого устройства.

В сухом остатке все отлично по коду, но есть небольшие проблемы с визуальной частью сайта.

p.s: я убрал из макета тени изображения, которые мешали

NastyaKamalova commented 1 year ago

https://nastyakamalova.github.io/CurrencyExchangeProject/

JanMayen commented 1 year ago

https://github.com/JanMayen/CurrencyExchange

Nolra commented 1 year ago

https://github.com/JanMayen/CurrencyExchange

включи git pages в репозитории пожалуйста, чтобы визуально было удобно смотреть html назови index.html (и в нем на 157 строке какой-то странный баг)

voidaugust commented 1 year ago

https://github.com/pashbespaloff/cryptosale https://pashbespaloff.github.io/cryptosale/ Это первая итерация. Чего пока нет:

  • иллюстрация из макета скачивается криво, с лишними кругами, поэтому выглядит стрёмно и сжимается тоже стрёмно — переделаю, если будет возможно скачать нормальную иллюстрацию,
  • адаптивности блока latest applications (то есть слайдера),
  • выплывающего меню по клику на кнопку-бургер,
  • работы с JS (только визуальный эффект на хедере при скролле).

Все очень хорошо по стилю кода и по правильности html/css, но есть проблема с самим макетом. Он "резиновый", и есть множественные проблемы на разных экранах, чтобы их избежать стоит задать паттерн, во-первых паттерн контейнеров. В оригинальном дизайне они в целом схожи с bootstrap размерами контейнера. Можно использовать его, а можно просто сделать фиксированный контейнер, который при 1200 становится 100%.

Я рекомендую отказаться от идеи резинового контейнера и остановится на проекте фиксированных контейнеров в px. Чтобы понять в чем проблема поставь ширину экрана 2560 (4к) кнопка Exchange имеет ширину 768px, такого быть не должно. И я рекомендую отсмотреть начиная с этого разрешения и до 1200, он не должен меняться, должен быть стабильным. Его максимальный фрейм - 1160px согласно макету. При переходу к мобильной верстке я также рекомендую избегать резиновых элементов (таких как кнопки, inputs), они должны иметь стабильный размер для каждого устройства.

В сухом остатке все отлично по коду, но есть небольшие проблемы с визуальной частью сайта.

p.s: я убрал из макета тени изображения, которые мешали

https://github.com/pashbespaloff/cryptosale/tree/view-fix https://pashbespaloff.github.io/cryptosale/

Новая версия, избавился от всех vh, сделал фиксированный фрейм 1200, исправил проблемы с резиновостью на больших экранах (но всё равно оставил плавающие размеры в некоторых случаях, когда это помогало шаблону лучше смотреться, на мой взгляд).

https://github.com/pashbespaloff/cryptosale/tree/reload https://pashbespaloff.github.io/cryptosale/

Ещё новая версия — избавился от общего контейнера на весь сайт, соответственно переверстал, на 320 и 4K проверил, горизонтальных скроллов нет.

nedostatoksna commented 1 year ago

Сдаю проект, постаралась учесть то, что на уроке с ревью обсуждали. https://github.com/nedostatoksna/currency-exchange-project/tree/currency-exchange-ver-3 https://nedostatoksna.github.io/currency-exchange-project/

nedostatoksna commented 1 year ago

новая версия https://github.com/nedostatoksna/currency-exchange-project/tree/currency-exchange-project-ver-4 https://nedostatoksna.github.io/currency-exchange-project/