Issues by the weekend

[DevTalent1121]

• [ 1] : Bubble image keep the background static and have the bubbles move down as the user scrolls up. and once they hit the red line at the bottom of the background they dissapear. I'd also like this image to occupy the whole opening screen. looks like https://healthgorilla.com/. Bubbles can all move together.

• [ 2] Graph

On this health website bettertx.com they have this interactive graph that compares healthcare costs vs number of diagnosis for 4 conditions. Is there anyway to do this or integrate this into the website? I’d like the graph after "Chronic Disease" facts with the same background.

[ndev1991]

Thanks. i think the first task already done? Not sure, but need improvement for the first issue let me know. And the second one, need to implement the chart or need information for the chart? https://recharts.org/en-US/examples/CustomActiveShapePieChart Here is information for recharts. Please let me know what issue need to be resolved. Thanks

[ndev1991]

@DevTalent1121

[DevTalent1121]

@ndev1991 The first issue is not completed yet. Are you able to run the npm on your pc? Please have a look at the file - src\pages\landing-page\Banner.tsx I was going to perform bubble's moving down action using offset. But the useEffect is not called on scrolling. Please keep me update when you have checked the code. Thanks

[ndev1991]

@DevTalent1121 Eventually it's not a window that scroll works for scroll. It's happening on body

const onScroll: any = () => { console.log('--aa', window.pageYOffset) setOffset(window.pageYOffset); return true; }

useEffect(() => {
    document.body.addEventListener('scroll', onScroll, true);
  return document.body.removeEventListener('scroll', onScroll);
}, []);

So you need to do this. Like useEffect(() with empty [] as dependency is onmount and called only once. There we can add eventlistener for onscroll and then can remove that eventlistener when unmounted as you can see above.

Let me know if you have any further thing.

[DevTalent1121]

That works for me. Thanks!

[ndev1991]

Cool. If you have more issues just assign new issues @DevTalent1121