KPC

Kevin Powell - Community

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

Join

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

Mozi47

5/3/2023

Need help in designing the table

I created the table having 5 column, so on last column I have button, when I click on button the div should display and cover the whole row. The problem I am facing is, the div is only showed in the current 5 column, I want the div cover the whole row (tr) Design I want to achieve in pic;...

redtypoOooOo

5/3/2023

what is and why use block-scope const in js?

Hi, there. Below is the code example I encountered. It is my first time seeing const declared after a const. What are block-scoped const in js and why use them there? What would be the difference if the const declare globally? Thank you for your attention and help! ```/=============== SHOW MENU ===============/...

vince

5/3/2023

How would you structure this component?

Making a discord clone in html and css for fun, curious what tags you guys would use for this. Discord uses a div for the "Chat"/"Community" button, and then a nav for the individual channels. I think a nav is definitely the right approach, but I feel like there could be a more semantic way to approach the "Chat" button... now that I'm typing this, I just realized I could use aria for this probably... and now that I'm looking it up I can probably use a combination of aria-role and `ari...

TrickShottasUnited

5/3/2023

Internal Hyper Link Design

do you guys know how to layout good internal links to jump to different parts of the same webpage if you have a lot of content and don't want the user to have to scroll? i know how to create them but are there any good layout designs? i am making a course page for my final project and i want the course 2 have 3 topics. i want the user to be able to choose which topic and instantly jump there but i need an idea of how to make it look good. i cant find any examples to look at for inspiration with people using them, wikipedia uses them but wikipedia doesn't look appealing...

Mathies

5/3/2023

How to make sure grid-template-columns with repeat minmax function doesn't create a row with 1 item?

Hi! I'm trying to create a responsive grid with 4 items in it. This results in a layout that works very fluidly on every screen size. However there are screen sizes in which one of the 4 items gets pushed to the next row [image 2]. I'm fine with pushing to the next row, but Ideally I would like this to happen in a 2x2 [image 3] layout. Is it possible to create this using just the repeat function? I would like to avoid as many media queries as possible....

Naks

5/2/2023

How to create a 'recycled paper' background effect?

WIld one this - looking for help to figure out how to add scattered debris onto the background of a section. Basically the effect should appear like the random squiggles appear on a recycled paper. I have no idea if there is a word for it 😄 Refer to images on these pages to understand what I'm talking about: https://www.eekwi.org/activities/arts-crafts/make-your-own-paper https://www.onlygfx.com/old-recycled-paper-texture-jpg/ ...

CDL

5/2/2023

Each blocks in Svelte, can't seem to wrap my head around this block of code

```js <script> const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; let selected = colors[0]; </script>...

I goon to clippy

5/2/2023

Tailwindcss vs CSS

I personally don't like tailwindcss but ive noticed that now a days alot of examples or videos seem to gravitate using tailwindcss, is tailwindcss just an overall better way to do styles ? why is everyone using it now?

Pat66

5/2/2023

Animate a pseudo element

Hi everyone
I want realise a website like this https://contrabureau.com/...

Pat66

5/2/2023

title on two lines

Hi everyone Please somebody can explain me why when ```html...

Ido

5/2/2023

Cant get 100svh / 100dvh to work properly

Hello everyone, I tried following Kevin's video: https://www.youtube.com/watch?v=veEqYQlfNx8&t=330s ... I have a small React app with not a lot of content, so I want to stretch the page so that the page will always be full with at least a background color. the problem is that I am either getting a scroll, even though there is no content to scroll to, or the '100svh' does not work (probably because I set it on the wrong tag)....

Avinash

5/2/2023

Issues with Splice

im trying to remove certain object from an array of object, when first object is clicked to remove its removes that object but when i click on second it removes the entire objects from an array. ```JS let database = { membersList: [...

thehumanist

5/2/2023

Help with the top of this page I have put together

Codepen: https://codepen.io/TheHumanistX/full/MWPEGJa So I have this page I put together just for practice. It does what I want over all, but I have that top area between the bottom of the header and the top of the hero/home section. You can use the navbar to hop around the page and if you click "Home", you see how I want it to look.
I had it using flex column at first for the overall layout of each section (header, home/hero, about, portfolio, contact, footer) and it looked how I wanted... Just like it does not but without that weird space between the header and home/hero section. I changed it to grid and got it looking back how I wanted EXCEPT that it now has that odd gap that I cannot figure out. The footer grid row fit right to the footer like I wanted but the header row seems to be expanded, which I guess is causing this? ...

Avinash

5/2/2023

issues with Data-attribues.

so im trying to get value of a data attribute. After clicking on a button a function runs where the console.log(value) gives ```CSS <div class="remove-btn data-value = 1"> <svg> <use href="icons.svg#IcOutlineAdd"></use>...

lemon.cs

5/2/2023

colour shade with alpha value?

If i want to create neutral colour shades (or any other colour shades) .. which is better method .. using separate colour code for each shade or use base colour code and add alpha value?

Eighth

5/2/2023

How to translate from jquery to pure js?

Good day. Faced such a problem. How to quickly translate code from jquery to pure js? I have a large piece of code in jquery and manually rewrite it in js for a very long time, but I didn’t want to include the library so as not to load the project and it worked faster. Are there services or programs for translation?

5/2/2023

IntersectionObserver API

I want a page in which when I scroll the element comes in view. I have tried this out with matching the element's offset with the scrolled height of the page, but it did not work. Is there any other way without this api?

Aditya Kirad

5/1/2023

icon size not scaling down and up automatically mui

hey folks as we know that em units are relative to thier parent font-size so in this case the size of calendarMonth icon should scale up and down according to the parent font size which in case is the typography element but the size of the icon always remains the same

<Typography display={'inline-flex'} fontSize={isMobile ? '0.75rem' : 'initial'}><CalendarMonth /> {formatDate({date: todo.date, formatString:'yyyy, MMM dd'})}</Typography>

<Typography display={'inline-flex'} fontSize={isMobile ? '0.75rem' : 'initial'}><CalendarMonth /> {formatDate({date: todo.date, formatString:'yyyy, MMM dd'})}</Typography>

I'm using mui by default in mui icon size are 1em which is 24px as parent initial font-size is 1rem but if I set my parent font-size to .75rem shoudn't the icon size scale down...

nehatkhan

4/30/2023

How to animate SVG image

hey guys I need help to animate an SVG human body. I am creating a app which have a Human body as SVG image. the body image is white in color, now I want to show progress like animation, lets user daily target of drinking water 5 litre and user drunk 2 litre. Than I want to show 20 percent progress as body fill color

Avinash

4/30/2023

Issue with flexbox

parent div has two child div, one of the div has hard coded value of 17rem, for some reason flex basis(?) is being applied screenshot shows the div isbeing reduced. what could be issue? https://codepen.io/avinash-tallapaneni/pen/rNqVMKZ...

Previous Next

Gaming

Programming

Kevin Powell - Community

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

Kevin Powell - Community

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