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

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...

Avinash

4/30/2023

Done with HTML/CSS, how to approach this in JS.

So i created a json file as database which is then stored in localStorage. since my knowledge in js is limited, this is how i planned to code, create/delete a new object when user clicks on something and then it is pushed into an array of objects. With this json data, i will update the frontend. i read an article few days ago(cant remember the name) where they mentioned to used of class constructor to create a newobject, Now i wanna know how should i implement this? are they any simpler method??? Also i have shared json file in codepen which is likely how the database is structured....

Mert Efe

4/30/2023

For media query min-width or max-width is better to choose? And is consistency important?

Can I use like %30 times min-width and %70 times max-width in my stylesheet in media queries?

samidev

4/29/2023

Why i cant install gatsby-remark-reading-time?

i've been trying for so long and still cant install this plugin

Myndi

4/29/2023

SCSS error

Does anyone know why do I get this error? https://codepen.io/myntsu/pen/BaqdKOw...

beans

4/29/2023

async javascript

could someone help me understand anything and everything about asynchronous js

Aldrin

4/29/2023

Get innerHtml with forEach loop

I want to get the innerHTML of h1 element here, what am I doing wrong here

Mert Efe

4/29/2023

How to make this first grid item have flex-start and the second one flex-end with grid-template-col?

is it possible to decide the grid-item placement from here while doing grid-template-columns? display: grid; grid-template-columns: repeat(2, 1fr); I want to make it so first 1fr is flex-start and other 1 fr is flex-end (justify self: flex-end)...

Anubhab Roy Chowdhury

4/28/2023

Whiteout background on hover over buttons/menu components in Chakra UI

While using either buttons or menus(even with many other components) when I hover the mouse over the component a weird grayish color comes in the background and I can't find any props for that too.

Taro

4/28/2023

Overflow-x: hidden causes vertical scrolling

Hey! I'm working on a website, and I have two problems I'm trying to figure out:
1- I have a hero section where I position some decorative SVGs using position absolute, and I need them to overflow over the viewport, so I use overflow-x: hidden on the parent I end up with vertical scrolling on only the section, Why is this behavior happening? ...

! Bazinga

4/28/2023

Ionicons not working with "classname" in Reactjs.

I had className in my JSX on Ionicon element but it was never read properly by browser so I changed the directive's name to class and it worked . Why is this happening? Supposing that in React we always use className instead of class.

WetPoloShirt

4/28/2023

Can an HTML page have two <header>'s?

I have to recreate the page shown in the img for a school assignment. If i already used 1 <header> at the top of the page, can i use a second <header> in <main> for the iphone section?

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 🙂.