DEV Community

Maxim Nosov ✪
Maxim Nosov ✪

Posted on

Hacktoberfest - PR#3

Hi!

I hope you are enjoying Hacktoberfest with lots of different projects.

Project

This week I contributed to React JS project. In this project you can create a meeting via Calendly and join other meetings as well.

Issue

For my Issue, I had to add dynamic background image to the app, so that background image is changing every 10 seconds.

Solution

For my PR I added a function that would change the background image:

const [counter, setCounter] = useState(0); const [backgroundClass, setBackgroundClass] = useState(""); const backgroundImages = [ "backgroundImage1", "backgroundImage2", "backgroundImage3", "backgroundImage4", "backgroundImage5", ]; function changeBackgroundImage() { if (counter === 4) { setCounter(0); } else { setBackgroundClass(backgroundImages[counter]); setCounter(counter + 1); } } useEffect(() => { setTimeout(() => { changeBackgroundImage(); }, 10000); }, [counter]); 
Enter fullscreen mode Exit fullscreen mode

Summary

It took some time for me to find the way to implement that feature, but it was a great experience!

Top comments (0)