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 3/25/2024 in #front-end
Force Overflow Scrollbar to be visible on mobile
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:
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:
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
1 replies
KPCKevin Powell - Community
•Created by Matt on 2/14/2024 in #front-end
Responsive Card Layout (CSS)
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 you4 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:
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
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:
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)
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)
This issue goes away once background-attachment: fixed;
is removed
Thank you1 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:
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-pTgwgvgH27 replies