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

Adding data-bs-slide-to

Hi everyone, was wondering on how I can add a data-bs-slide-to-(number increases by one everytime I click on a button) into a li tag. Here's the HTML code <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>...

How can I open any phone on my screen while coding ?

Can someone help me to open any phone while coding , like I wanna see a preview while coding and the phone on my screen at the same time. Can anyone help ?

Flexbox- flex-start 1 element, but space the rest?

How would this be done? just out of curiosity.. I'm messing around with a page and I basically want the top nav-bar to have 1 element in the top left corner, but then the other element to space out between the rest of the section, if that makes sense? "this is a random..." should appear in the middle(ish)...
No description

i want make scroll effect

I want to make this scroll effect using html, css, js, can anyone guide me?

How can i keep the value of a textbox after postback

I am not sure if i should ask this in front-end or back-end. But here it goes: I am developing a website using asp.net and c#. I have a section where i can see the feedbacks in a html table. And every row has three actions: auto-respond, respond and delete. Auto-respond and delete actions work and for respond, there is a problem. If i choose respond (Cevapla) (which is for custom respond) a section becomes visible. In that section there are three textboxes and two buttons. I set the value of TextBox1 by using a js function which takes the value of selected row's second column (email address). Other two are for subject and message. One button is html button for cancel. The other one is an asp button for send email. The problem is when i click send button the page loads again (AutoPostBack) and the value of TextBox1 (which i get from js function) becomes "". How can i keep the value of TextBox1 after postback? Frontend code is attached. Website's language is Turkish and i translate some content to english (such as buttons in question) but if there is a part needs translating please tell me. And for backend i have a Button_Click: ``` protected void Button1_Click(object sender, EventArgs e) {...

What to do so that page loads when API calls are finished?

https://snazzy-tiramisu-4033f2.netlify.app/ My JS lags behind since it is dealing with API, and first thing that loads is just the regular HTML I have, and then it process the API. What to do so that it loads the finished page? I also think the way I setup my functions are slowing the code down, but I'm not sure. It goes something like this --->...

scale animation overflowing

i am trying to do a scale animation but its overflowing on hover can someone help me out i want the card to come to center on hover https://codepen.io/sarosh-afzal/pen/vYPbEzo...

Strange bug on Chrome with backdrop-filter blur

Problem: unexpected behavior on Chrome with Windows zoom setting to 125% or more, all fine with 100%, it stop bluring in the bottom half of the screen, what could it be? https://codepen.io/Giusto-the-typescripter/full/rNRPavJ...

Text animation inside a slider bar component

Hello everyone. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Do you know what is wrong and how could I fix that? Thank you very much! 🙂
```.track_drag { border: 0.1px solid black; width: 350px; height: 60px;...

including all html files in npm build package

Hey guys, it's my first time using npm to build a project (did this mainly to use threejs). When I run the command
npm run build
npm run build
only index.html is bundled in the package. I do not have a .gitignore or a .npmignore file. Am I doing something wrong?
No description

How to change color of the select dropdown icon

Is there a way to change the color of the dropdown icon?, i am not using any library. just the <select> html tag
No description

CSS transitions

I have an unordered list that looks like ``html <ul class={nav-links row ${isExpanded ? '' : 'hidden'}`}> <li class="nav-link"><a href="/">Home</a></li> <li class="nav-link"><a href="/">About</a></li>...

How do I align both rows of this flex container?

The box on the second row is one pixel wider than the first. Why are they not perfectly aligned? https://codepen.io/mycenas/pen/BabvqrJ

How do I get rid of this annoying thing!

I've been trying to figure this issue out for about 2 days and I literally have no idea what's wrong. Regarding the header when I make it somewhat transparent behind it there's a weird coloring does anyone know why?

Push a file with Git

Hello everyone I ve just begin with Git.I realise my first commit on github.But now I want push a second file...
No description

Brainstorm me with real-world react projects for beginners!

I love to learn from courses and from youtube, but now I want to use my "beginner knowleage" to start creating some real world projects. Two projects I completed are todo-app and a advice-app but I want something more unik to do with useEffect so I can start learning that by doing. And in the same way to have something to show off for future job interviews. Projects like "Weather app" (something everyone does) its directly a "naah to boring". ...

Best way to fix this?

So If you look in the image I've used inspect element to check responsiveness of my website. Obviously it doesn't look great Kevin had responded to me not to long ago giving me options but I'm still confused what would be the way to go about fixing this issue? I was told it was an overflow issue and that seems correct.
No description

How do I stop my text from cutting off?

Problem - I'm not sure what caused the problem, but I've tried adding width: 100% to div ".container .contactInfo .box .text"
No description

Google Analytics / Google Tag Manager in the <head>

Howdy! I've just set up Google Analytics and followed the set-up steps to add this code to the beginning of my head section of each page: <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-G8PTM5VMZW"></script>...

in next.js

which is better method to optimize fonts ? 1-use in css file 2-by this...
No description