DAD JOKES

Contributors: Trevor Rapp

this is a remake of a previous project, React Jokes

---

React.Jokes.mp4

---

---

DESCRIPTION

"How do React components say 'You're welcome?'"

"Prop you very much!"

--AltAcademy, Best React Jokes

A basic static page built using React that utilizes props.

---

QUICKSTART GUIDE

To use the app simply click on the View Project button or visit https://groan-worthy-dad-jokes.com.

---

PROJECT DEMONSTRATES THE FOLLOWING:

• Use of state and useEffect hooks
• Use of debouncer
• Use of basic syntax and architecture of React
• Use of parent > child components
• Use of JSX
• Use of custom composable, reusable components
• Use of Bable and Webpack through Create React App
• Use of git CLI and GitHub repositories
• Use of CSS and images in React environment
• Use of import and export statements
• Use of local server with webpack

---

CHALLENGES I OVERCAME...

• I wanted to apply an opacity effect, but was struggling to do it with CSS because React hadn't rendered the DOM yet. This was totally a new concept for me, so I had to figure out how to use a useEffect() and I combined it with a setTimeOut to get the timing correct.

  useEffect(() => {
    const noteContainer = document.querySelector("#root > div > div.p-container > div > div.joke-and-button-container > div > div")

    function applyOpacity() {
      noteContainer.style.transition = 'all 500ms ease-in-out';
      noteContainer.style.opacity = '1';
    }

    setTimeout(applyOpacity, 500)
          setTimeout(applyOpacity, 500)
  }, [props.state])
    

• In my designs I found that there were two elements that would overlapping, which I wanted, but the one would often make the text within the other unreadable...not acceptable. So I researched a way to calculate the positions of both relative to eachother and adjust padding when needed. This became a very expensive operation to do though, so I had to modify it later with a debouncer. See below:

 (() => {
  console.log('adjustPadding found');

  function throttle(func, wait) {
    let lastTime = 0;
    return function (...args) {
      const now = new Date().getTime();
      if (now - lastTime >= wait) {
        lastTime = now;
        func.apply(this, args);
      }
    };
  }

  function resolveOverlap() {
    const divA = document.getElementById('circle');
    const divB = document.getElementById('container');

    if (!divA || !divB) {
      console.log('Elements not found.');
      return;
    }

    // Get bounding rectangles
    const rectA = divA.getBoundingClientRect();
    const rectB = divB.getBoundingClientRect();

    // Check for overlap
    function isOverlapping() {
      console.log('isOverlapping fired');
      return !(
        rectA.right < rectB.left ||
        rectA.left > rectB.right ||
        rectA.bottom < rectB.top ||
        rectA.top > rectB.bottom
      );
    }

    // Increase padding until no overlap
    let padding = parseInt(window.getComputedStyle(divB).paddingLeft, 10);
    let stepSize = 5;
    while (isOverlapping() && padding < 100) {
      // Added a max limit to prevent infinite loops
      console.log('adjusting padding');
      padding += stepSize;
      divB.style.paddingLeft = `${padding}px`;
    }

    console.log(`Padding adjusted to ${padding}px to resolve overlap.`);
  }

  // Create a throttled version of the resolveOverlap function
  const throttledResolveOverlap = throttle(resolveOverlap, 100);

  // Attach event listeners
  window.addEventListener('resize', throttledResolveOverlap);
  document.addEventListener('DOMContentLoaded', throttledResolveOverlap);
})();

---

MY OWN PERSONAL CONTRIBUTIONS INCLUDED

• this was a remake of a previous project. The work is my own, though I brought the jokes from the previous project. I cannot take credit for any of their brilliance.

---

ATTRIBUTIONS

• No additional attributions needed at this time.

---

YOU CAN FIND ME AT:

For more information see my LinkedIn, or return to my Github