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

ARIA label for multiple currencies

Hello. I have a button with an item title + price as the aria label ex: Blue shorts $39.99 read as (Blue shorts thirty nine dollars and ninety nine cents) And the item can be sold in canada where it would be ...

One Navlink not showing

https://github.com/Aman2980/S2-23_Website Here is a link to the project. In the header on each page I have this nav-item
<li class="nav-item">
<a href="Stats.html" class="nav-link stats">Statistics</a>
</li>
<li class="nav-item">
<a href="Stats.html" class="nav-link stats">Statistics</a>
</li>
In the common.css file I set ```.nav-link.stats{ visibility: hidden;...

How to set fixed background-image

I'm having an issue with this particular front-end mentor project https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ I want background patterns to have fixed positions, but It seems like I can't maintain responsiveness, The image disappears when I try on the small screen,...

WRAPPER PROBLEM

Hello everyone newbie question GM/GE, I have a wrapper and wrapper is set to max-width, so the content inside is affected, the problem is that the backgrounds I used in my nav-bar are also affected by the max-width, what should I do? Thank you

What is the best way of doing spinning planet animation?

Hello to everybody guys! On my work i'm faced with the task of doing spinning planet animation on scroll, so the user will scroll the page and planet must spin. And i'm curious now, what is the best way to do so? I have 200+ images of planet with different angle. I was thinking to replace images on scroll via state or something like that, or use threejs, but i don't know if i can put my image there or found something similar. If you already did this in the past, please tell me how to do that in the right way. Any suggestions are welcome!...

I have this margin issue

Let first show you code <body> <div style="background-color: green; height: 200px;"></div> <div class="container--wrapper" style="background-color: red;">...

link who don't work in carrousel

I realise a carousel who look like this:

Heading not updating after logging in.

I have 2 variants of the handleSuccessfulLogin function but none of them work. I want to the update the heading in stats.html when the the user is logged in. It does direct to the page after logging in but doesnt add the "Welcome {username} on that page.

How to center content in a container?

Hi, I have h1 and P that I want to place in the middle of a container by using Bootstrap but I wasn't able to do so. I gave the col "margin: 0 auto" and that centered it to the top but I need the content in the middle. How can I do it? ```<div class="container-fluid union"> <div class="row align-items-center">...

How flex-item size are calculated when its width is given?

I have read a lot about flex box and have understood most of the part. However, there is one thing that I am not able to figure is that in case we have more than 1 flex-item inside a flex container, how their final width is calculated when one of them is declared its width that is greater/less than its parent container size. Here is the link to the pen I have written to experiment with flex: https://codepen.io/anurag1989/pen/yLRqPwO...

Web app pushes entire content up when virtual keyboard is up

Hi! I have a really easy layout. Header Body Footer...

Need some help with My HTML code

Evening everyone 👋 I was wondering if someone might be able to help Me out with My rather messy HTML Code, lol. I should note that I'm still relatively new to HTML/CSS/JS/etc.. so go easy on Me pls 😅 Anyway, I'm trying to create/replicate a sort of.. "introduction-animation" (Sure let's call it that for now, I guess 😂) for My website which is similar to the one on this website that I recently discovered: https://resn.co.nz/ ...

How can I Create a horizontal Infinite scroll with Images when I get the data from Graph Ql API's

Hi every one i wanted to create an horizontal Infinite scroll with Images when I get the data from GraphQl API's in order to do that what are the possible ways to achieve the infinite scroll for reference i have attached an video and you can find reference of it here https://www.framer.com/ can any one help me out in this ? Thank you in advance....

How to remove redundant class name when current classname is selected for color previewer ?

Probably butched on title. i have 9 color div, when one is clicked necessary js code is applied to get the class name of that div and it is then set as the primary color for the previewer. the issue is the class name keeps on adding to the previewer, is ther ea way to apply only one class? https://codepen.io/avinash-tallapaneni/pen/rNqVMKZ...

Blog thumbnail looks bad - object-position?

Hey guys, beginner here, I am trying to fix my blog thumbnails on https://expertphotoshop.ro/ and I tried object-fit, object-position but I really can't manage. I'm trying to make the image fit nicer inside the square. I guess "cover" is what I'm looking for, but I tried a lot of things in inspector and I can't manage. Help?

JavaScript Desktop/Push Notification

Hello, i have a javascript that sends a desktop notification whenever i upload a picture on my website. But if someone else uploads a picture while i'm not on the website, i dont get a notification. ChatGPT told me i need a service worker that runs in the background. But i just have no idea at all how to do that. So i would really appreciate it if someone could help me out.

pointer-events and the thumb on sliders

ChatGPT seems convinced that the 'thumbs' on sliders aren't treated as part of the input range type, ie if you set point-events:none the thumbs would still be clickable. And that looks right, here: https://codepen.io/nwoodward/pen/wvYjeev Both thumbs move....

Form validation, colour not changing

https://codepen.io/Aman-sghh/pen/xxyzNqx Im trying to change the colour of input fields to red and green based on the user's password and but idk what Im doing wrong. Can you please help me?...

Grid on the viewport

Hi everyone I built a grid I which all the grid should appear on the viewport but I have a vertical scrollbar my code:...