this is a remake of a previous project, React Jokes
React.Jokes.mp4
"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.
To use the app simply click on the View Project button or visit https://groan-worthy-dad-jokes.com.
- 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
- 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);
})();- 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.
- No additional attributions needed at this time.
For more information see my LinkedIn, or return to my Github