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

JS Ignoring my if condition

I'm trying to add the value of a selected radio button to a span after clicking a submit button. Here's what my HTML looks like ```...

Nested comments

hello guys im stuck with a problem . Im building a nested comments system (with replies and comments) but i can only delete comments and not replies . I dont know how to delete both replies and comments in one function btw im using react and redux toolkit...

My icon doesn't appear

i've been adding font-awesome cdn-s but still doesn't work idk why

offsetTop not always correct when offsetParent is body

So according to the specs, offsetTop is "the distance between the outer border of the current element relative to the inner border of the top of the offsetParent." And the offsetParent is "the element which is the closest (nearest in the containment hierarchy) positioned ancestor element," but "if there is no positioned ancestor element, the body is returned." However, I've noticed that in the 3 major browsers / rendering engines, if an element's offsetParent is body, and body is static, then the following properties are ignored: body margin and border, and <html> margin, border, or padding. That means that the element's offset top and left are actually relative to the viewport, not the body....

React (Vite) importing your own fonts

I've been trying to get my fonts to work in my project for a few days now but I keep getting errors. Even though they work locally, I keep getting these errors: ``` downloadable font: download failed (font-family: "Inter" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:5173/fonts/Inter-VariableFont_slnt_wght.ttf...

Contrast Issue wont go away

The dev tools CSS Overview says I have a contrast issue and it never goes away no matter what I choose. Please check over this pen https://codepen.io/MD-2016/pen/WNKejLj...

How can i combine these arrays elements together gsap, scroll trigger, vanilla js

Hello I am working on combining these elements together. I am not are how I can just scroll them together based on texts element height that I have ? How do I combine those arrays of elements ```js...

is there a way to toggle multiple CSS classes in one statement?

i have a class called active that i would like to add to all my side-bar_menu-text classes on the click of a button, but it only adds this class to the first element. my code: const collapseMenuBtn = document.getElementById('collapse-menu');...

[Blackjack game] [code review] [feedback] Game doesnt end even after player or dealer goes past 21.

Hey all, i think i went wrong somewhere and the blackjack game keeps on going even after player /dealer reached 21 or above. i couldnt find where the issue is. can someone help me with the code? thankyou. https://scrimba.com/scrim/cG82vWCR...

Not able to centre Paragraph inside a Div

Here is my code: https://codepen.io/anurag1989/pen/GRGVjXa The main problem is the 'btn' class. I am not able to centre it inside the btn class. Tried making the display property of 'p element' as inline-block but still not working. On opening the inspection tool, I see that the text area of btn class is increasing (leaving white space) which is making the text inside it to look off the centre. Is there any way out for this?...

Using grid for responsiveness on small card

... last question for today When you resie this codepen, you'll see that in the middle point, when the card goes into landscape mode, the image doesn't fill in it's entire space before enlarging the screen quite a bit. I've put the .content on a grid, and itself is a grid with two items, .image and .info. The .contentgrid is repeating, and auto-fitting, but I'm not really sure what value to use afterwards. For now it's minmax, but that doesn't seem to work. I tried to use clamp(), but the middle value is a bit of a headache for me. https://codepen.io/amarlong/pen/mdKZGzZ...

Images not loading in picture element

This is hard to show since my images are stored locally, and so I can't get them up to codepen. But this is what I've coded, and no images are showing ... ```html <picture class="image"> <source srcset="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-desktop.jpg" media="(orientation: portrait)">...

CSS Color filter calculator

Hi there, does someone know of a CSS color filter calculator that lets you select the starting color and the objective color? I've found 4 of these calculators but the issue is that you can't set the starting color, only the final color

Next.js can't create static pages

I got this error message I've been working on for several hours. And I can't get wise on it. In my code, I take the params and get the store that matches those params. I feel like it can't fetch the related store. which I find rather strange since well it works so well in dev. I wish I could give more about it, but I'm not sure how to explain it, hoping that someone takes the time to look at the error message. it seems to me, that there is some place it expects and interger and therefore it fails, but it should be wise versa. since I do not call any functions that needs and integer before I got my store....

Border radius not appearing

Hi! I've put a border radius on the .content element, but with the image added the top of the image is not applying the border radius. Adding border-radius to the image itself adds a radius to the bottom of the image, which I don't want. The .content element holds all the content (dah!), so it makes sense to me that border radius would work. ...

Grid col span to the end if a single item exists in a row

Hey guys! I'm looking for a way to span the column of my cell to the end if that's the only item in a row. This is assuming that I have set a fixed number of columns. I have attached a simple illustration in this post. If I have 5 boxes (odd), I want the first 4 boxes (the green one) to occupy one col each and I want the last box (the red one) to occupy 2 cols. However, if I have 6 boxes (even), I want all of them to occupy 1 col each. How can I do this in grid? Or maybe there is another work around using something else?...

Shorthand for JavaScript Background styling?

I really suck at googling keywords. Anyone knows what's syntax of this part ...

Media Screen

What is the difference between:
@media only screen
@media only screen
vs...

RTL not working in bootstrap5

I installed bootstrap with npm install bootstrap and I am trying to customize it so I am importing the bootstrap file from @import '../node_modules/bootstrap/scss/bootstrap'; but when I tried using ms-3 or me-3 and apply the rtl dir in html tag it doesn't swap the rules. Should I do something to enable it? Because I saw using bootstrap via cdn they provide a bootstrap-rtl.min.css but I dont find a rtl file when installing it via npm...

Customizing bootstrap 5

I added some custom colors in the theme-colors map using the merge function but if I try to use them with .bg- class it doesn't work, how can I make them available?