Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time ๐Ÿ™‚.

Join

front-end

resources

back-end

ui-ux

os-and-tools

help

formData in web-components

Hello, I made a web component: ``js class Toggle extends HTMLElement { #toggle = /*html*/ <input type="checkbox" ${this.checked ? 'checked' : ''} />...

Is it wrong to use the mask-image property? Is it obsolete?

I've been learning how to use the mask-image property but without the -webkit- prefix it doesn't work in Chrome.
No description

Align list-style-image

I'm having trouble maintaining alignment with list-style-image: url(imgs/icon-list.svg); Currently, the Icon exceeds the line-height (see attachment), causing the list items to be misaligned. I've tried to set height/width on the marker, but cannot get this resolved. Any ideas?...
No description

Ul Padding issue

Hello, I'm trying to keep consistent padding so everything is aligned on the left. The UL has default padding, and once removed, beaks the flow as the list-style-image is ignored and only the contents follow. How can I align so that list-style-image maintains the same padding?...
No description

Broken Layout (CodePen link shared) Plz help!

I was trying to display some data, but i dont understand why my cards are overflowing from the above inside the project list div. I tried to cut of the code as much as I could and use a dummy layout with same styles and classes. The issue is still there. I used forEach loop on the array which will create cards equal to the number of elements inside the project-list div. The cards are displayed with the required styles but the overflow from the top and some number of cards are always hidden from the top whereas for the design to work, i added overflow - y to scroll becoz I needed a scrollbar. I really cant understand whats going on even after cutting of so much of code and trying it out with a dummy layout. The broken layout is inside the right div which has a black background and cards in it ....
No description

Hiding other divs when hovering one of them

Hey all! As the title mentions, how do I go about this? Thank you in advance!...

Recommended articles section

This might be a stupid question because I don't know any better, but on blogs/brochure websites where at the bottom of an article - where they have 3 or 4 recommended articles... how does that get coded? Obviously it would depend on the implementation, but would it be unprofessional to just hardcode it in? Since I'm working with Astro, there's probably an easier way to do this as well (collections, just pull 3 random articles from a collection of articles, but that would change on every pageload so I don't think that would work all too well...)...

I would like some constructive feedback

I am currently doing the Frontend Mentor Challenge "Age Calculator" (https://www.frontendmentor.io/challenges/age-calculator-app-dF9DFFpj-Q) and I'd appreciate some constructive feedback about my CSS and JavaScript: https://codepen.io/lena-s98/pen/GRPGXOe But please avoid opinionated feedback like "Don't use comments", etc ... I'm struggling to get the age calculation to work correctly. Maybe someone can nudge me into the right direction ๐Ÿ™‚...

web page lines in nextJS

can anyone explain me what causes theses lines to appear? even if i only have a p tag and button tag
No description

RegExp with g flag with weird behaviour. why?

i was debugging a bug and found this incredibly weird behaviour with a regex. the following code was returning false on things that obviously match: ```js var regex = new RegExp('a', 'g');...

How to achieve this

So this bed room background is my hero image. I want to transition between different wall images (wall behind bed) keeping bed room same, i just want to transition between different walls. Offcourse one way to make this would be make wall transparent and transition different wall background even so, how to make that wall wallpaper match that angle of the wall.
No description

setup redux in react app

can someone help me setup redux in react app i am having trouble doing it

Overflow on my page

HI everyone I realize this page I have an overflow I don t understand what is going wrong https://codepen.io/alpha_66/pen/abPaKpq THANKS by advance....

Changing text depending on url data

Hi is it possible to change text in specific <p> elements depending on the url data? Example: ?period=quarter&periodnr=2&year=2023...

problem with images not containing in the divs

https://vellankiindeevar.blogspot.com/ if you see this site in responsive and mobile-m the images which are more width come out of the div

Anyone help me to breakdown these cool effect

Website --> https://lmpixels.com/wp/kerge-wp/#about-me Yesterday I visited above website in that has a nice transition effects when the page is change . ie: when I click contact in the side nav there is a cube like transition effects . How to achieve these cool effect
...

svelte multiple api calls with subsequent click on a button?

It seems that when using electron api each individual press of a button calls the api function x+1 times where x is the times you've pressed the button prior.

picture tag

Hello, there's any tutorial on how to make a horizontal full page website?

Multiple-level dropdown navbar

Hey guys, I've done this before but it was really convoluted. I was wondering if there was a simple, professional, & accessible way to make a multiple-level dropdown. I'm looking for codepends/articles/youtube videos that can help me with this....
No description