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

i want list of dates that i select but smth is not working

```jsx import React, { useEffect, useState } from "react"; import Css from '../Css/Weak.module.css' function Weak(props) {...

Getting Data from Multiple Buttons on Click

Hello, I'm trying to add an event listener to all buttons within a div, using code such as: ```...

Mouse Interactions and Frontend help

I need help with three aspects of my web portfolio's about section, I am currently just going focus on a specific part which i will provide a Codepen link that is similar to what I have (I'm currently using nextjs and styled component in my personal project): Link: https://codepen.io/jorgeo/pen/jOXebZZ 1. Eye Animation and Mouse Interaction:...
No description

Make div "behave" like body element

Considering this simple HTML: ```<html> <head> <title>My website</title>...

Code at the top of the Javascript file works, but the ones beneath don't.

Hello guys, i have a terrible problem. i had finished my Javascript code for a Sign-up page (which is attached to a main page) and everything seemed to be working fine but after a while, it stopped. After much debugging i realised that the code at the top of the page which contained a hamburger for the main page was working, while the ones beneath it which allowed you to switch between two forms in the Sign Up page, werent. I interchanged the top & bottom codes and noticed that whichever code was on top was working and the one beneath wasnt....

Need help with styling specific tags/elements

So, i did achieve this design but now i was implementing it in a better way using grids and relative units to avoid breaking and too much wrapper divs. The screenshot i shared is the design i created using flexbox and not best practices. But it is the actual design. Here is the codepen of what i am trying to do now : https://codepen.io/Zeshan-Merchant/pen/NWeQpZW...
No description

Icons are not centered in half screen

I have tried everything I know, but I'm a little rusty codepen: https://codepen.io/Zrizzy/pen/NWeQgGv <!DOCTYPE html> <html lang="en">...
No description

Conform container size to centered grid content

Hello! In this Codepen I have a grid of items that uses auto-fit to keep them centered within a container (using margin-inline: auto). I also have a navbar using that same container class. Is there a way that I can keep the width of the navbar consistent with the main content as the page resizes? I've attached a mock-up image of the desired effect - note how the edge of each container matches.
No description

can’t get my buttons to overlay the images

Hello, I have it setup so far where I click the first "Medieval" button, then two more images pop up.. they're supposed to be side by side with the buttons overlaying the images. But I can't seem to get it to work, any advice? First 3 buttons look good, but the second pair is where I’m struggling.. here's the github repo for it : https://github.com/spencerrcr/Interactive-Story

Header has a space, how to remove it.

Hi guys, my header has a space its not filling in at the top. I dont have any margin-top or anything. How can i resolve this easily and make the header responsive. If i give the header a flex the whole nav is going wrong. https://codepen.io/Boeroe/pen/QWzeEez...

Button Text Issue during animation

When I hover over to the button, the animation is good but the button text is not visible, how to solve? https://codepen.io/hamzacodepen951/pen/MWZNwdV...

Flexbox and borders

Hello there I have a block of text and and an empty div with background color and want to layout them horizontally using flexbox. All works great until I add border to the empty div. For some reason the borders are not accounted for the width and instead added on top of the resulted width of the div. As a result the div is wider than the text block. the box-sizing property for everything is set to border-box if that's relevant. Is this the expected outcome?...
No description

Framework vs Vanilla JS

Apologize for a noob question. I was wondering what’s the best way to tackle authentication, routing, search, and state management in multi page web apps? Should I use a framework or is vanilla JS sufficient? I have gotten conflicting opinions. I am working on a project from Frontend mentor. https://www.frontendmentor.io/challenges/entertainment-web-app-J-UhgAW1X

nav ul not taking whole height space

yeah basically, i've been staring at the code for half an hour and couldn't find anything to fix, i ideally want it to take the full height space here's the codepen: https://codepen.io/staticoly/pen/BavXBPz...

transform chain positions - how is it organizing these?

https://codepen.io/Laing91/pen/OJreYLK As you can see in the codepen, without transform they both start at the same point, but with it, they end up at different points, and the only thing different is translate/rotate are swapped (Same values). Is anyone able to explain why it's ended with them at different locations? the course isn't too clear on it, and I'd like to know πŸ˜„...

Creating a responsive figure with caption, without using layout models (i.e grid, flexbox)

Say you have a parent container of a fixed height but variable width. The parent contains an image and caption. The caption height is set to min-content and will wrap as the parent width's decreases. Can you set the image to fill all the available height, using 'classical' css properties and without overflow? ```html <figure> <img />...

Image Caption width of Image

Well hello everyone, I have a given size (fullscreen modal) in which I want to show an Image as large as possible. That would be easy with object-fit: contain but unfortunately the image also needs a caption below it, that should have the width of the image itself. If the image was always landscape that would be easy, but it might have any aspect ratio. I added an image how its supposed to look like and I have a codepen, where I tried around with grid and flex, but couldn't find a solution. Thank you for your ideas πŸ‘οΈ https://codepen.io/tobiaswust/pen/rNoEYXV...
No description

Carousel not working even though Javascript is Correct:

I am creating a portfolio and one of the features I've provided is a carousel where you can scroll through my monthly music rotation. I have defined the function for the forward and prev buttons the result is I'm not getting a response but the console is reading it. Here's my code below: ```
<div className='w-full h-auto flex gap-72 justify-center'>...

Why the container does not work?

Hi everyone, I need clarification about why the container does not limit the image size. I've read some articles that say the width of image should be 300px at this example. https://codepen.io/CodingTrain_1/pen/PoXrEOV...