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

issues with buttons, Buttons are not included inside the form

this is my code , i grouped two btn inside a div and when i look at inspect they are not inside the div. i wanted to do something like add remove button on the form. i have attached ss for further reference ```<button class="member-icon flex"> <svg> <use href="icons.svg#OouiUserGroupLtr"></use>...

Help Regarding Astro

New to astro and development overall. Wanted to try my hands on astro for small project. Problem: I imported css into astro component, used it in the layout than used that layout on the index.astro file. Ran npm run build command.
In dist folder, my css is present and it's getting linked to the html file. But the problem is it's not getting applied....

stay on same tab after form submit (bootstrap 4.6)

Has anyone had the issue regarding html tabs and a form tag, where when you submit a request from a different tab other than the default first one, as the web page refreshes, you’re sent to the default first tab instead of staying on the tab that sent the form? I’m using bootstrap 4.6

Pico Css Drop Down Start Value

How do you set the value of the pico css dropdown to start off with a default entry? ```js // Creates the drop down of months for the month selection of the calendar let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] ...

Charts with JavaScript

Hello, I'm looking for a JavaScript library for interactive, responsive and accessible charts/plots. Preferably with a good React integration (e.g. components). Any recommendations? 🔥 Some background: I'm planning to build a react application that plots polarity profiles (see attached image). A polarity profile is a common tool for measuring the image of products or brands. It consists of a standardized pairs of properties (two opposite verbal poles), representing the endpoints of a scale (e.g. active/passive, old/young, soft/hard). In between there are usually five or seven categories/options. The respondent must choose one of them. Once the survey is finished, you typically use a bipolar chart to analyze/display the results (average of the opposite values chosen by the respondents). ...

TypeScript - passing generics to generics

Functions can do this; ```ts const myFunction = (arg) => /.../ ...

Image not taking 100% width

I am trying to learn how to size images better. They have always been a pain to me. So i started learning object-fit. Code: ```html...

can someone explain JAVASCRIPT classes and syntax for me?

i just need an in-depth explanation on what they are and do, and syntax too

React state question

Hi, I've been stuck on this for a few hours now but I can't figure it out. https://codesandbox.io/s/practical-beaver-vgcmcv?file=/src/App.js...

Calendar app from scratch

How would build a calendar layout and populate it from scratch?

Keep whitespace inline tags.

I want to highlight some text, but the whitespace and I get lost. Is there something I'm missing?

styling pseudo element

what's wrong with this code..why does it show error? html ``` <div class="div"></div>...

Looking for a better way

hey guys!! in the following codepen, https://codepen.io/-bloop-/pen/RweNZaN i made a simple hamburger icon animation, it's not anything much fancy, but i feel like how I did it is too complicated or excessive all tho it works perfectly fine, and that's why I'm here, can anyone show me how this same result can be achieved in a better way ? tnx ❤️...

Any BackEnd Teaching Platform like scrimba?

I really like the interactive-based learning especially small tasks for every concept that scrimba provides. Is there any other platfrom which teaches Node JS, Express JS or any backend like this?...

PurgeCSS not working

Does anyone know why I get that error? I installed purgecss but it gives me an error when I wanna build out the project...

I am trying to learn react, but the new react is now recommending to use next.js

Is watching and learning react that teaches the old way "create-react-app" now irrelevant? i mean the new docs now recommends to use next.js. Im currently watching a web developer course 2023 at udemy but the way it teaches the react is using the npx create-react-app. I am now worried that i might be unable to use what im going to learn, or am i just worrying too much?

Centered navbar with cta button

Hey guys, I'm trying to make a navbar where the logo is dead center of the screen. I've already figured out how to do that; however, I have an extra item, the cta button, I need to add in. So instead of it being 5 li items, it's 6, which means the logo will not be dead center of the screen. Right now, I'm using position: absolute but it's not super responsive and feels super hacky. I could use vw units I suppose (I can't even get it to be responsive with vw) but I feel like there might be a better way with grid somehow. Curious what your thoughts are on how to tackle this problem. https://codepen.io/vince1444/pen/yLRyOQy...

need help in decompose of this reall well made CSS Transforms Animation

Hey, I came across this linktr.ee (https://linktr.ee) page, and if you look at their landing page, the animations are really playing well with CSS Transforms. If you scroll down a bit, you can see how well these things are coming and fading, and the one in the header is rotating. I want really good help in understanding not only their HTML structure but also how they are working on CSS Transforms and everything that can help me achieve this. One of my friends messaged me this, but I'm not able to understand what it means. 'There is surprisingly little magic involved in creating them. Mostly, it’s relying heavily on CSS 3D transforms. It just flips a root div. All the mockups are inside, each rotated by an incremental 180 degrees. Backface-visibility: hidden makes sure they’re not visible from the back. It opted for a procedural lerp instead of tween animations—incrementing the rotation by 180° on every click....

Hide Menu When Clicked Outside

I've written a code that hides my menu when clicked outside of the menu or the button. Do you think my code is good or it can be improved. New to Javascript. https://codepen.io/Arslan-Akbar/pen/poOMadb...