Kevin Powell - Community

KPC

Kevin Powell - Community

Join the community to ask questions about Kevin Powell - Community and get answers from other members.

Join

front-end

resources

back-end

ui-ux

os-and-tools

Digital clock

Hello! I'm trying to create a digital clock but there are a few issues in it • the first one is that the seconds kept going from 1 to infinity to stop that i have put a condition to stop the seconds at 60 but after 60 they aren't starting from 1 when the page refreshes than it happens • also the minutes are not updating when 60sec are completing ...

Boilerplate - Vite + React + Typescript + SASS

Hi guys, I have recently quit my frontend job as the environment was super toxic and I need to build some projects. I'm looking for some solid boilerplate (vite - react - typescript - sass) so I don't have to spend a lot of time just building the structure. Continously if somebody has some good sass file sources (for example for using @include media('>=lg') for responsive) Thank you so so much guys! 🫶...

how to fix flex-direction: column; alignment here

.intro__area { grid-column: span 6; display: flex; flex-direction: column; gap: 2rem;...
No description

Substract image with css

hello there any ideas how to implement this to css from figma? im kinda understand how to make top one, but bottm one kinda tricky there's should be a shadow from image, i was thinking about clip-path or mask but im not sure btw price may have mroe numbers so it should be dynamic, and top one as well ...
No description

CSS class is ignored

I define my classes like this:```scss // Single select $ss-w-sm: 125px; $ss-w-md: 147px; $ss-w-lg: 180px;...
No description

Lining up table header borders with table body borders

I'm going through codecademy's Full Stack Dev course. The project I'm on currently is to develop a cheat sheet which includes a table. I want to have it such that the "borders" in the table head row line up vertically with those in the body column, with those in the head row inheriting the background colour, and those in the body taking the assigned rgb. It currently looks like the picture. Here is my CSS code: ...
No description

Select in Popup

Hey, I use the dialog element to create popups in react. I use these popups also for forms in which I use custom created selects. The problem. when I set no overflow on the dialog, it overflows on mobile devices and not the whole form is visible. when I set it to overflow-y: auto; it is scrollable, but the select dropdown is then no going outside the popup, which not only looks bad but also makes the user need to scroll down to the dropdown... The select just uses position relative and absolute on the dropdown. Is there a way to fix that?...

Responsive image

I want I image to be responsive but Its not https://codepen.io/tobygxgr-the-sans/pen/PwoBZQV...
No description

Link for Flex Box simplified course not received

I made a payment for the course on 19-03-2025 hoping to receive a discount. However, I neither I received it at the end of the payment nor received any link on my mail. Sent various mail on [email protected] and [email protected] but no response received till date. This is the last resort that I am forced to use it. Can somebody help me with this? @Kevin please help me with it.

How do I replicate this scrolling animation?

I found this scrolling animation on motion.dev and thought it would be great to implement it on my own website, but I have no idea where to start. Would appreciate literally any guiding steps on how to start/what the thought process looks like. Currently using React with Chakra UI and motion....

Suggestions for a customizable React component library for someone who actually likes CSS?

I've been doing CSS for forever and built design systems, but I have an idea for a product that I want to build quickly and not deal with all of that stuff for V1. But I know that I'm going to want to customize some things. It's inevitable. So I'm looking for a component library that can get me up and running quickly but gives me some options for customizing styles or composing with custom components. My preferred way of styling is with CSS Modules. No Tailwind or CSS-in-JS. The best options I've found so far look like PrimeReact and Mantine, but I'm wondering if there are any other options that I'm missing, or if anyone has experience with trying to work this way. I feel like I've seen other newer options in the past year or so, but I can't remember the names of any of them....

drag and drop but my text is in the way

I have a webapp where I list a bunch of items, and I decided to make the list drag and drop enabled, but when I try dragging the text gets selected and the drag event doesn't fire unless I already have selected text. How would I make the element drag instead of select the internal text? I tried stopPropagation() and it did nothing, same with preventDefault() The project itself is in svelte, but I added here an ugly rudimentary recreation of this part in vanilla js in a codepen, any help at all is appreciated https://codepen.io/mbaklor/pen/EaxRder?editors=1011...

Firefox flexbox column wraps, but parent width doesn’t expand (works fine in Chrome)

TL;DR: Chrome expands the flex container’s width when items wrap into new columns. Firefox doesn’t grow the container width (it stays as wide as the longest item) Hello, I’m running into a frustrating flexbox quirk in Firefox. I have a container using flex-direction: column; flex-wrap: wrap; with a fixed height. Once there’s no more vertical space, items wrap into a new column as they should. In Chrome, once items start wrapping into additional columns, the parent container’s width automatically grows to fit those new columns. In Firefox, the items do wrap into new columns, but the parent container’s width stays stuck at the size of the longest item (as if it hadn't wrapped), instead of expanding to hold all columns....

To-do list

Hi there! I'm trying to create a todolist using js. • I have added the data to local storage • Get the data from local storage and show it on the ui • Now in trying to create a function to delete the data from the ui and from the local storage but it deletes the whole data from local storage ```...

Can you help me with this error

I used the Chart.js library to display user typing speed stats, but the chart doesn't render when hosting the app on Vercel. It only displays correctly when running the app locally on a Vite development server (localhost). github issue link : https://github.com/ZAKARIA-MOSBAHI/Typing-Game/issues/1 Any help or guidance would be appreciated!...

Detect mobile/touch

What are the best modern ways to detect mobile and touch? I know: 1. const isTouchDevice = 'ontouchstart' in window; for JS 2. @media (hover: none) and (pointer: coarse) for CSS...

post CSS

I did search for post css ..heh :thumbup: now my main question is i just asked some ai tools about this and i got to know about post css from them , not any youtuber or website but as much as i have discovere its pretty useful but literally no one is talking about post CSS idk why? is it not necessary or outraged? I put learning post CSS on hold i'll do that after i get a review for should i learn it or not. I have done sass though but post is lterally different from sass. It have those variables like webkit and stuff and most of the modern tools uses so much like react and tailwind combo. so basically i am confused. now my main question is ...

Centering the image and text in the bottom of the box

I am trying to create this section but very much confused help must be appreciated Link to codepen https://codepen.io/rogeraman/pen/yyLEYRB...
No description

Facebook API

Is there someone who's familiar with Facebook API? Trying to add search by name the user in Facebook in my form

Tailwind CSS

How many of you are using tailwind CSS? How's your experience?
Next