Nolra / front_course_2023

charity course
7 stars 0 forks source link

React Refs #22

Open Nolra opened 1 year ago

Nolra commented 1 year ago

Code: https://github.com/Nolra/front_course_2023/tree/react-refs

Документация: https://react.dev/reference/react/useRef https://react.dev/reference/react/forwardRef#forwardref

HW: (https://nolra.github.io/react_hw/ - вкладка Refs)

  1. Навигация с прокруткой.

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

  1. Debounce buttons

Напишите небольшое приложение, которое будет “готовить еду”.

У нас должна быть панель с кнопками, которые будут “готовить” то или иное блюдо.

Нажатие на кнопку будет вызывать временную задержку (3s) во время которой будет появляться надпись “готовится…” и кнопка “отменить готовку”

Приложение должно позволять “готовить несколько блюд одновременно” и успешно отменять их приготовление. После отмены приложение возвращается к обычному виду (без лоадера “готовится…” и без кнопки “Отменить!”)

voidaugust commented 1 year ago

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

Nolra commented 1 year ago

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

Все хорошо, кроме того, что на моем ноутбуке (небольшая высота экрана) до сих пор возникают множественные баги с отображением (баг если возвращаться к навигации не через кнопку ↑ back to top ↑ а с помощью обычного скролла - невозможно дойти до начала страницы) Сымитировать можно сделав небольшую высоту экрана в dev tools (650px например).

NastyaKamalova commented 1 year ago

https://nastyakamalova.github.io/react_hw/ https://github.com/NastyaKamalova/react_hw/tree/main/src/components/Refs

nedostatoksna commented 1 year ago

https://nedostatoksna.github.io/react_homeworks/ https://github.com/nedostatoksna/react_homeworks/tree/main/src/components/Refs