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

CSS Does auto margin have a predefined minimum value (that prevents it to shrink to zero)?

Hi, New here, read rules, hope I am posting the question the right way 🙂 I have set the max-width for a div at 400px, and margin: auto; and the div is centered....

future issue !

hey guys, I come to ask a counsel to you, basically I am a university student of web development and shortly tou to finish the course, I sincerely do not feel that I have learned a lot in the area of the front-end, I feel that the knowledge I have is with the videos that I see etc..., in the bottom my goal was always to be able to work on my own to sell websites etc, I recently contacted some local business explaining the situation offering my services at a very low price than is normal, and I feel some did not have interest for lack of confidence in me and liked to know what will be the best way to change this, I liked pretty much to create a website portfolio but I do not have much content to put from there the question whether I should create imaginary websites and put there, if I should talk to local business and create a site for free and put the site in my portfolio etc.. I like to give the opinion of who has already been through this. Thank you!...

$ is not defined error

I've been trying to add a script that adds a class (.img_ _item--hover) to an element (.img__item) when the wrapper (.box) of said element is hovered. However, this error popped up in the browser, telling me that $ is undefined. I haven't been able to find a solution....

Section Table Columns

I made this table (attached image) but it made out of divs. Is there a way to make two sections for my table and have space between them like a flexbox?
No description

Create an Array given one number

I code a js script with for but now I need to move it to react and I need to create an array with the position of the number of state. Example: NumberState = 3 | I need to create an array like this [1, 2,3] or NumberState = 7 | I need [1,2,3,4,5,6,7] I need to do a map and render a component with the value...

web animation API

<!DOCTYPE html> <html> <body style="background-color: white;" id="body">
<div id="div1"></div> </body>...

Rock, Paper, Scissors (JS, frontend-mentor)

Hello, I'm attempting to build the Rock, Paper, Scissors challenge on FrontendMentor (https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH/hub) I understand most of the logic, however, I'm confused on how to change visual states of the game. My current solution (https://codepen.io/Matt-CopOffMatt/pen/rNPNwBG) has the game logic for choosing winner vs computer. However, I need to change the layout based on the results (see attached pictures) ...
No description

custom events

What options can I change in the custom event, In the mdn documentation it only mentions 4, namely bubbles, composed, cancleable and detail to pass an object or some data to the call back function parameter, but are there any other options that can be changed ?

clientHeight in React

How to recreate same code in React? To be able to have scrollbar when more data is added to the table? JS code: ``` const containerElement = document.querySelector("div");...

Infinite loop Scrolling Image Slider with buttons for navigation

How to create an infinite card/image slider that has a a smooth and uninterrupted slide that loops. Once a user interacts with slider, it should stop sliding and from then on only able to navigate by using prev/next buttons or drag-able on mobile. Should work like this https://codesandbox.io/s/embla-carousel-github-issue-105-i2gji?file=/src/js/EmblaCarousel.js or the gif bellow (with buttons for navigation) https://user-images.githubusercontent.com/273716/93586286-5e4abe00-f9a8-11ea-936b-6b09393e631a.gif...

update paragraph function inside eventlistener (javascript)

My updatepara() function in my js isn't working. I want it to update in correlation with my column header changing - could u help? https://codepen.io/gsadopkgj/pen/oNJKxQR...

KEEPING JS FUNCTIONALITY BUT WRITING BTNS IN HTML INSTEAD

https://codepen.io/gsadopkgj/pen/oNJKxQR rn i have it so that the js creates these btns, but i want it so that the html creates the btns... (this way i can style the btns properly) but i want the js bit of the code to still work? like the SPA shit

Navbar

My navbar is going to the div when i make the screen smaller. What am i doing wrong. https://codepen.io/Boeroe/pen/mdaNNwX...

custom event

I am trying to customize the default javascript event, namely click, code is in below : <!DOCTYPE html> <html> <body style="background-color: white;">...

How would I replicate this?

I recently came across this figma file and found that I like this. I went to code it but am struggling at the responsiveness to it, would would be the layout (flex, grid, ...) for this?...
No description

Location Autocomplete in MERN

I wanted to make a search bar which autocompletes location just like it happens when you search on uber. What do I have to use to learn about?
No description

Background-image: Url is not working

Everything is linked correctly but still its not working idk why.
No description

Fontawesome Icon Not showing

I tried using a different icon while having the latest version of fontawesome but nothing works
No description

image-cover

Hello everyone, can you help me in this background image because I cant fit this in my screen until the bottom, the image is cut when it comes to full heres the image and the Design the first image and the this is my code and the 3rd picture is my website, I just want to make like in the reference design. Thank you
No description

Image for heading

I'm curious on this. Typically, I always thought that having an image for a heading is bad practice, but what if you add it into a heading tag with descriptive alt text? Something like: ```html <h2> <img src="" alt="Heading text (something like About Us)" />...