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

Multiple-level dropdown navbar

Hey guys, I've done this before but it was really convoluted. I was wondering if there was a simple, professional, & accessible way to make a multiple-level dropdown. I'm looking for codepends/articles/youtube videos that can help me with this....
No description

Form submitting

How to succesfully preventdefault ? I've tried a variety of things but it keeps refreshing the page afterwards
No description

Why is my TRY ... CATCH not working?

My CATCH is not catching the error, what am I doing wrong please? HTML ``` <!DOCTYPE html>...

Object method not working

Hi, so if you see my image, for some my method is not working, I have already looked online (Checked few websites, w3schools had an example, this is exactly that, but instead of const object{...} I did Function Object(args){methods and properties}) If I just look for the property using console.log(admin.getAccesKey) it claims it is undefined.... Could someone please point out to me what I did wrong? I feel like it'd probably be something stupidly small but I just can't seem to figure it out This is all there is to the code btw, I am simply testing it out first before going on to the next step...But on step 1 its already going wrong xd...
No description

React Too Many Errors

I tried doing npx create-react-app my-react-app and i got many errors then i tried npm audit fix --force and i got even more, what could it be?
No description

Sidebar layout with intrinsic collapsing grid, CSS-only

I'm trying to make an intrinsic and responsive sidebar design. All the no-media query responsive tutorials that I could find (eg. https://css-tricks.com/responsive-layouts-fewer-media-queries/) have the grid columns the same width, but I'd like the first column to be narrower. Of course this can be done with flexbox (https://every-layout.dev/layouts/sidebar/), but only with 2 layout items??? In the collapsed form I'd like:
1. logo/title bar 2. main content 3. navigation 4. footer...

How would you animate this sidebar toggle?

As you can see I try to use display: none, and it's working fine, because mainMenu expands to full width, but when i use display: none, it doesn't animate smoothly, I have transition: translate 200ms ease-in-out; in my sideMenu element
No description

Animation: Rotate In on Open and Rotate Out Reverse on Close: asking for Feedback

I made this animation, and everything works I as want, but turns it's move complicated then I assumed and it took way more code than I expected. Therefore I just wonder is there a better way to do the same, more efficiently? Please, let me know if you know! Codepen: https://codepen.io/JunSu-Ho/pen/JjwBLwK...

how to change the color to red in Material UI ?

Anybody knows how I can change the color like in the picture ?
No description

Regex pattern returns true, while inside function returns false

Hello everyone, I am working on a little project to dive deeper into HTML,CSS and Javascript and I came across rpoblem in one of my functions, where I use a fully working regex pattern. I tested it in console.log, it always returns true for the strings i am checking. Here is the pattern: ```js...

centering div issue

So could someone tell me where I went wrong in trying to center it ? I put a display flex on the body but it didn’t center it like it usually do with a previous project . And also when shown on my laptop it’s full width but on my phone it’s shrinked down HELP please LOL

Horizontal layout webpage

I am building horizontally separated site. It has 2 columns, left one and right one. The left section is suppose to be 40vw and 100vh. The right section is 60vw and 100vh....
No description

CSS

Don’t know how to create this layer inside this background help?? Css still a learner πŸ™πŸ™
No description

Creating an Infinite Vertical Carousel with Framer Motion

I'm working on building a vertical carousel using Framer Motion in my React application. The carousel moves downwards, but I'm facing an issue where it stops at the end and doesn't loop continuously. What I want to achieve is an infinite loop where the bottom-most picture smoothly transitions back to the top. Is there a way to achieve this, possibly with CSS or through a different approach in Framer Motion? https://github.com/roycejwilliams/royce-portfolio-react/blob/main/royce-portfolio/src/components/Carousel.jsx...

Astro - how to pass data from the server- to the client-side JavaScript

I'm sorry for not providing any code but I have doubts on whether my code would be even relevant in light of my question. Also, I have no idea which part of the code could be helpful, so, when asked for, I'll provide the requested part of the code, probably using some playground. I'm coding a relatively simple website, using Astro, and I seem to have an issue with passing data between the server- and client-side JavaScript. The thing is, I'm fetching some data inside the server-side JavaScript (Front Matter) and need those inside my client-side JavaScript, to simply filter them....
No description

Curve in the end for the last navigation link

SUMMARY: I have an idea to add a small curve to each link at the bottom, but I'm facing an issue with the last one. I added a background image to the body tag, and this is where the problem arises. PROBLEM: Green section that should be transparent. However, when I add transparency, the curved effect disappears (due to the negative margin-left). TRIED: I attempted to use a border-left, but it didn't work....
No description

What is the most "Semantic" way of adding svg's inside button elements?

Like this ```html <button class="btn__nav hamburger" value="<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-menu'><line x1='3' y1='12' x2='21' y2='12'></line><line x1='3' y1='6' x2='21' y2='6'></line><line x1='3' y1='18' x2='21' y2='18'></line></svg>"> Menu...

Weather App

I'm building a simple weather app project. Current, I'm using open-meteo.com's API for weather data. One of the parameters I'm using is weather interpretation codes. The variable documentation is attached (see picture) My question is, what's the best method at converting code into description? I know there's multiple ways, such as if/else if, case, sets, etc. (I'm assuming using Key / Value) What would you recommend? Thanks....
No description

Continuous text change depicting encryption/security using code

I want to achieve an effect like this using code. Will start from random and finish at a specific sentence like "Security @ Apple" (without the background effect)
No description