Matt
Matt
KPCKevin Powell - Community
Created by Matt on 4/19/2024 in #front-end
How to get a string within a string (JS)
Let's say for example, I have the following string in a URL /?search_query=new%shoes&filter=shirts&color=red or /?filter=jackets&search_query=new%shoes&color=orange or any other combination. What's the best approach at pulling only the search_query value from the string? search_query=new%shoes would result in 'New Shoes'. I need to do this dynamically to account for any size string and any order. I was thinking of using substring and trying to find the nearest index of say = and & or & and (nothing), if there is a case where URL is just /?search_query=new%shoes
13 replies
KPCKevin Powell - Community
Created by Matt on 4/11/2024 in #front-end
CSS Grid Issue
No description
6 replies
KPCKevin Powell - Community
Created by Matt on 3/25/2024 in #front-end
Force Overflow Scrollbar to be visible on mobile
No description
9 replies
KPCKevin Powell - Community
Created by Matt on 3/7/2024 in #front-end
Responsive Carousel V2
Goal: Create a responsive carousel for all screensizes Here is my attempted solution - https://codepen.io/Matt-CopOffMatt/pen/eYopOWj Using (multiple) media queries, I reduced the amount of visible cards. Then, using JS, I used a formula productRow.scrollWidth / productRow.offsetWidth) + productRow.offsetWidth to determine how much many cards to move per click (previous vs next) This works flawlessly, except there's no logic for detecting the first and last card (if you keep clicking, there winds up being white space) Any ideas or suggestions on how to handle this? The goal would be to ensure there is no white space Thanks in advance 👍
1 replies
KPCKevin Powell - Community
Created by Matt on 3/6/2024 in #back-end
Installing a library with JS
Hello, I'm trying to build a demo bar code scanner. I found this library: https://serratus.github.io/quaggaJS/#node-example I've installed Node + Quagga (library) My dependencies are the following:
{
"name": "bar-code-project",
"version": "1.0.0",
"description": "",
"main": "scan.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"node": "^21.6.2",
"quagga": "^0.12.1"
}
}
{
"name": "bar-code-project",
"version": "1.0.0",
"description": "",
"main": "scan.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"node": "^21.6.2",
"quagga": "^0.12.1"
}
}
However, when running test script (provided in docs), I get this error ReferenceError: require is not defined at scan.js:71:14 which makes me believe I've installed wrong. Any ideas how to fix this? Sample script ran:
var Quagga = require('quagga');

Quagga.decodeSingle({
src: "image-abc-123.jpg",
numOfWorkers: 0, // Needs to be 0 when used within node
inputStream: {
size: 800 // restrict input-size to be 800px in width (long-side)
},
decoder: {
readers: ["code_128_reader"] // List of active readers
},
}, function(result) {
if(result.codeResult) {
console.log("result", result.codeResult.code);
} else {
console.log("not detected");
}
});
var Quagga = require('quagga');

Quagga.decodeSingle({
src: "image-abc-123.jpg",
numOfWorkers: 0, // Needs to be 0 when used within node
inputStream: {
size: 800 // restrict input-size to be 800px in width (long-side)
},
decoder: {
readers: ["code_128_reader"] // List of active readers
},
}, function(result) {
if(result.codeResult) {
console.log("result", result.codeResult.code);
} else {
console.log("not detected");
}
});
29 replies
KPCKevin Powell - Community
Created by Matt on 3/5/2024 in #front-end
Responsive Carousel (TailWind + JS)
Hello, I'm trying to build a responsive carousel. Ideally, what I'd like to happen is that the amount of visible products decreases based on screen size. (ie: web: 5, tablet: 3, phone: 2). I tried using Grid instead of flex, but I couldn't stop content from wrapping. Any ideas would be greatly appreciated. Here's my demo: https://codepen.io/Matt-CopOffMatt/pen/eYopOWj Thank you!
4 replies
KPCKevin Powell - Community
Created by Matt on 2/21/2024 in #front-end
Best way to achieve this layout with Grid
No description
1 replies
KPCKevin Powell - Community
Created by Matt on 2/14/2024 in #front-end
Responsive Card Layout (CSS)
No description
12 replies
KPCKevin Powell - Community
Created by Matt on 2/3/2024 in #front-end
Carousel w/ JS
Hello, I'm trying to make a product carousel but I'm completely stuck on how to build / structure this. Basically, I want to display 5 products. Once NEXT button is clicked, slide and display the next 5 products. And vice versa with PREV button. I found a demo online and have been trying to understand it. It was a bit buggy and I tried to fix some things for my likings, but it's still rather buggy. I was wondering if anyone could possibly explain the logic for this as I'm completely confused and stuck and don't know how to go about fixing this. Any input is appreciated. Thank alot Buggy Demo - https://codepen.io/Matt-CopOffMatt/pen/OJqvqVg (Tailwind + JS)
21 replies
KPCKevin Powell - Community
Created by Matt on 2/2/2024 in #front-end
Product Carousel w/ GSAP (NEW POST)
Here's my codepen - https://codepen.io/Matt-CopOffMatt/pen/OJqvqVg I'm attempting to build a product carousel with GSAP I'm trying to stagger load each product card. I got the fade transition to work, but the stagger delay doesn't seem to be working properly. Any idea how to fix this? Also, when trying to animate the button fade in (changing opacity, then using transition: opacity 250ms ease) it doesn't seem to actually fade in, rather abruptly appear. Thank you
4 replies
KPCKevin Powell - Community
Created by Matt on 1/3/2024 in #front-end
Collapse Nav (Broken)
Here's my current code: https://codepen.io/Matt-CopOffMatt/pen/eYXJBpN Currently, I'm having issues with my functionality for collapsing by clicking outside of the menu. The following check:
menuChildren.forEach((child) => {
console.log(e.target, child)
if (e.target === child) {
console.log("Click outside of the menu")
} else {
checkbox.checked = false
menu.classList.remove('visible')
document.removeEventListener("click", checkMenu);
}
});
menuChildren.forEach((child) => {
console.log(e.target, child)
if (e.target === child) {
console.log("Click outside of the menu")
} else {
checkbox.checked = false
menu.classList.remove('visible')
document.removeEventListener("click", checkMenu);
}
});
Should loop through children and determine if the click is a child. If child is clicked, log (not execute the else). However, it seems as though the code is executing directly after calling the click event listener on document (which I assumed shouldn't work like this). What's the most optimal way of fixing this? Also, there's some weird glitch where it stutters when closing. What could be causing that? Thank you
45 replies
KPCKevin Powell - Community
Created by Matt on 12/21/2023 in #front-end
Preloader w/ JS
Hello, I'm trying to create a preload transition for each time a page is loaded. Here's my code: https://codepen.io/Matt-CopOffMatt/pen/NWJKmbK However, when adding the .hidden class, it doesn't seem to transition as I expected (fade to 0). I thought by adding an element and having transition with css, it would fade out. Does anyone know what I'm doing wrong? Also, is this the proper way to create a 'preloader'? Thank you!
3 replies
KPCKevin Powell - Community
Created by Matt on 12/11/2023 in #front-end
Pseudo Element clipping over text
No description
25 replies
KPCKevin Powell - Community
Created by Matt on 12/8/2023 in #front-end
IntersectionObserver Question
Hello, I'm trying to use IntersectionObserver for two different instances. First, to detect when a section is within view, then count from 0 to 500. Then, to detect if any img is in view, and to animate them appearing. Current Snippet:
const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting) {
countReviews()
console.log(entry)
};
});
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images
const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting) {
countReviews()
console.log(entry)
};
});
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images
This code works for counting, but I'm unsure how to incorporate a second observer. Do I need to check when theres an observation and determine if it's the counter or image by the observation target, then call each function accordingly? (didn't include the lazy load function) Any help is appreciated, thanks
18 replies
KPCKevin Powell - Community
Created by Matt on 12/5/2023 in #front-end
Forcing a Line Break (Responsive)
What's the best way to force a line break (<br>) but based on screen size? Using JS, or hidden HTML tags?
27 replies
KPCKevin Powell - Community
Created by Matt on 12/4/2023 in #front-end
Responsive Layout Issues
Hello, I'm having some difficulties making my layout responsive. From my Chrome POV, everything looks decent. That is until I open on my phone and everything looks entirely different. Any Suggestions or Tips would be greatly appreciated! Here's the link - https://nickscharpit.com/
3 replies
KPCKevin Powell - Community
Created by Matt on 12/4/2023 in #back-end
Setting up server (Webdock.io)
No description
2 replies
KPCKevin Powell - Community
Created by Matt on 12/3/2023 in #front-end
Moving Position on load? (background-attachment: fixed)
Hello, When adding background-attachment: fixed to my hero image, the starting position moves when the page is loaded (see GIF below) https://gyazo.com/b957d488dfdb4ff09938272699915a65 How do I prevent this from happening? Do I need to offset my background image? Here's the rest of the CSS applied to the img (div)
.hero__img {
position: absolute;
background: url(img/char.jpg) no-repeat;
background-size: cover;
background-position: right 35% bottom 24%;
background-attachment: fixed;
width: 100%;
height: 100%;
}
.hero__img {
position: absolute;
background: url(img/char.jpg) no-repeat;
background-size: cover;
background-position: right 35% bottom 24%;
background-attachment: fixed;
width: 100%;
height: 100%;
}
This issue goes away once background-attachment: fixed; is removed Thank you
1 replies
KPCKevin Powell - Community
Created by Matt on 12/1/2023 in #front-end
Uniform Nav Bar
I'm trying to have 3 sections in my Nav which all have equal width's. What is the better / more optimal solution to achieve this? Thank you 🙂 https://codepen.io/Matt-CopOffMatt/pen/MWLPEGq
5 replies
KPCKevin Powell - Community
Created by Matt on 10/23/2023 in #front-end
Rock, Paper, Scissors (Partial Solution)
Hello, I'm attempting to create the game "Rock, Paper, Scissors" using the files provided by FrontendMentor. My current solution logic somewhat works - https://codepen.io/Matt-CopOffMatt/pen/WNPbjqb Although this is probably not the optimal solution, I was wondering if anyone out there could check out my JS and give me some suggestions. Also, the only portion not working is:
resetGame.addEventListener("click", () => {
main.innerHTML = ""
userOptions.classList.remove("hidden")
userOptions.classList.added("visible")
})
resetGame.addEventListener("click", () => {
main.innerHTML = ""
userOptions.classList.remove("hidden")
userOptions.classList.added("visible")
})
which I'm confused about, as I'm adding display: none to an element, then removing, and adding display: block Let me know your thoughts (and yes, I know it's not done 👍 ) (Reference) - https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH
27 replies