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

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

any website?

guys..m on mobile do it's not possible for me to make a svg desing but is there any website where I can make the svg for the wave I've seen a few but, they seem to generate the waves as random..they r not as consistent as it's shown in the image...

Can someone explain how this is done?

my initial though was onclick modal dialogue box should be visible then the question arise, how to position it next to the input field instead of having a centered one. Is my thinking correct or this can be done much easier? think

need some help in loops in js, can someone hop on voicechat?

need some help in loops in js, can someone hop on voicechat?

I am losing my mind on this nav problem

I have a simple navbar. It is not centering in the middle of the screen, no matter what I do. I cannot recreate the issue in codepen. I've stripped out all of my html and css besides my nav. Here is my html: ```html <body> <main>...

Responsive carousel

I've created this carousel, with the help of js, html and css. Functionality seems to work. But when I try to adjust the code so that when there is no more cards on left or right respective arrow should disappear. Right now it just loops. Another q: Is it possible to update this to a responsive carousel? Normal page load is 3 * 3 tile. But the screen size is small then maybe 2 * 2 or something like that to adapt the changes. Codepen: https://codepen.io/Abhi1234567890/pen/yLxLGXV...

AI autocomplete

I need to implement ai autocomplete, but don't know where to start! Any idea/resource where I can check?

Fonts not appearing in my network tab but getting no errors in my code

I'm using vite as a build tool What could be wrong in my code or set up, I have attached the image...

The observer pattern and nested objects

I'm just struggling a little with the observer pattern and preventing observers from registering multiple times. I've got a model that implements an Observable interface, so registerObserver/removeObserver and updateObserver functions, and a View with a constructor that calls this.model.registerObserver(this). The problem is each view can have nested views, and those views are created with the new keyword. That means (I think) that I'm unable to run a check in the registerObserver function to make sure that the view isn't already registered :/ Am a bit stuck!...

Display flex vertical alignment and responsiveness or position absolute?

I'm trying out various ways to do this and so far only position absolute made sense to me to get accurate spacing. With display flex there was a lot of spacing issues which were solved with margins but way too much tweaking was involved. Any advice on which other approach you suggest and please explain why over display flex or etc. Thank you. https://codepen.io/3dharp/pen/KKGKZNo...