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]);

Summary

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