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

What is the typographic scale ratio used in tailwind font sizes?

What is the typographic scale ratio used in tailwind font sizes?

How can i start getting clients as a Front End Developer?

How can i start getting clients as a Front End Developer? Like what app / website should i use?

Inheriting a clickable area

Hi all, I have an issueโ€ฆ I want to find a way in CSS to inherit a clickable area from a parent. I have a text link inside what should be a button although the only clickable area is the text. ...

need help in highlighting an div when it clicked

hey folks this is my jsx ```jsx <Box sx={{display: 'flex', border: '0px solid #313442', borderBottomWidth: '1px'}}> <Box className={styles.pluginButtons}>All Plugins</Box> <Box className={styles.pluginButtons}>Popular Plugins</Box>...

Accessing child properties when calling a function from its parent

So I've a Shape parent class and a Circle child class. The child class calls the parent's constructor with super, which then callsgenerateMarkup - a function all children have. Problem is this function uses an instance variable in the child class, and this appear not to have been set yet....

Can't get flexbox to do anything

My biggest issue when working with css is trying to get the selectors to actually target what they're suppose to. In this case, I can't get the flex display to do flex-end in the upper right hand corner and I need to make the svg white. Any thoughts on what im doing wrong? https://codepen.io/MD-2016/pen/KKBwaXy...

How to recreate this resize handle in CSS?

I got this design for a resize handle (in black), and I'm wondering how I can re-create it with CSS. Note that the outline is curved in all ends. Any help would be appreciated. ...

Image wont float to right

```.img{ margin-top: 5%; width: 360px; height: 400px; float: right;...

Complex HTML setup and layout question

Hello, I'm working on a more complex layout for a website (see added sketch image). It has topics, and those topics have different articles you can read. I've been mulling over what would be a good approach to tackle this, and would like some thoughts on this. So I was thinking about putting the topics in a list, and those topic articles in their own list. So a list in a list. The topics would be anchor tags. I don't know if this is a handy way to tackle this. The other thing I was thinking about, is how those anchor tags would work. Is it a good idea to make separate new HTML pages for each topic/article? Or better to have them stacked on top of each other in one HTML file, and then have a display none/JS button combo? Would iframes work too? Or is that more for bringing in websites outside of the one you're on? Would love to hear some thoughts on this, thanks in advance!...

Hamburger ICON issue

I have a hamburger icon svg, it should toggle the navigation on/off, and my problem is when anyone loads the page they have to click on it 2 times to see the navigation items. The first click on it doesn't toggle the navigation.

why does innerHTML return number as NaN?

here's my code: ```const bill = document.getElementById('bill'); const billAmount = parseFloat(bill.value); const numOfPeople = document.getElementById('numberOfPeople');...

problem fetching APi

Browser returns invalid API key. Anyone know how to fix this?

how do i loop over buttons that have the same class but are to do different things?

in a case like the image, how do i assign the different calculation algos to each button but with much lesser code, rather than writing out different codes for each button? ```const tipButtons = document.querySelectorAll('.select_btn'); tipButtons.forEach(elem => { console.log("button clicked"); ...

Loading css from js causes the content to jump?

I have customized bootstrap 5 and I need to support rtl I am using rtlcss to generate the .rtl.css file which is working but using the <link> to include both css files was causing problems, so I used javascript to detect the dir in html tag and then decided which css file to load using document.head.appendChild(linkElement) where linkElement conttains the path to the .css or .rtl.css file, but this is causing in the beginning the content to jump as if the styles are applying after the page has already loaded how to fix this?...

Need help in general with css

im having issues where i set display to flex in parent and used alignitems & justify content to center but in child property its suggesting display as block. i watched few tutorials in theory its looks easy but when i try to do something im facing issues like this https://cdn.discordapp.com/attachments/448294302053957632/1054276667780104272/image.png...

Using the dialog element for an off canvas menu

๐Ÿ‘‹ everyone! Do you think using the <dialog> element for creating an off canvas menu is a smart move? I wanted to take advantage of all the built-in functions that come with <dialog>, like esc key, focus, backdrop etc....

regExp Question

in the [-\w] what does the - mean is it considered as a code or it's just a letter...

async await in loops

I have this code, but I don't understand why this all gets printed right after each other, where I would expect that the rl.question call gives me a prompt in terminal which waits for input. useful information is that before this piece is run, there is another part that also uses the rl.question where it actually waits for that user input in the terminal (and then uses that as expected in the callback) ```typescript for (let round = 1; round <= this.GAME_ROUNDS; round++) { for (let player of this.players) {...

slide show

https://aarzookhurana.com/ how can I achieve this slide show with pause, resume, next, previous buttons in vanilla js...

Is storing large objects inside svelte store a bad idea?

I have a large object, would it make more sense to store it in svelte store or since its large in the app.svelte variable instead