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

Flickering responsive nav menu on screen resize

So I'm working on a responsive nav menu, and it flickers on the resizing of the screen. See added video. It also does it when there is no JS. Codepen of a very simplified version of the nav (the same still happens): https://codepen.io/-evecodes/pen/GRYpKmW I tried following one of Kevin's nav tutorials for it. His navigation does work without the flickering, but when I try to make it, it fails. The tutorial was this one: ...

Need help with json in typescript

I have a json file ```json { "1a": { "mainHint": "hello",...

recreate overlapping multiple images

Anyone knows how to recreate this? i thought of making each image position: absolute but the problem is the images are dynamic and if it fills the container its going to wrap. So how to proceed? 🤔

Margin top from somewhere

Im following one of Kevins tutorials: https://www.youtube.com/watch?v=8QKOaTYvYUA&t=1446s I've tried to set it up exactly as Kevin, but I still have a gap between the navbar and top. https://i.imgur.com/41lBfPS.png...

multiple animations with transition on one of them

Hey everyone, I've got this code ```css .contactLinksAnimation { outline-color: theme(colors.primaryColor); animation-name: contactLinksBlink; animation-duration: 0.2s;...

Manipulate OBJECTS

In this object of users, I want to find to the person who has manu skills in the user object to the person who has less skills. Could you explain in detail how could I make this?? ```js const users = { Alex: {...

Detect Selected Label without radio button

I'm trying to recreate this calculator : https://www.thewebflowagency.com/book-a-call What I understand is, they have hidden the radio button and used text label to select the option. recreated this. Then, I'm not able to see which field is selected.(like the focus state) ...

CSS only menu toggle - is this a good way to approach it?

For years I've used jQuery slideUp/Down/Toggle() for showing menus on mobile devices. However, recently I've started using :has selectors more and that's opening up the possibility to do CSS-only versions: - My menu toggle button becomes a label containing a checkbox (hidden). When you click the label, it checks the checkbox - The menu css has:...

Component transfer from one html file to another using Javascript.

Is it possible that using querySelector i get one component say a card from one html and insert it into another html page.(no click function the second page auto fetches it from the other page) I think I can use querySelectorAll to get the component. But dont know how to insert it or if it's possible. If there is any video or you can show just a single code....

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...