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

basic math with javascript

I'm new to JavaScript and i made this website that calculates the slope of a straight line, the formula is y2-y1/x2-x1, i was wondering how i can make it work with negative numbers without making it 4 inputs.
No description

how to make it so the typewriter effect only occurs on the index.html page and not other subpages

code: https://codepen.io/gsadopkgj/pen/oNmXegO I want this effect solely on the index.html subpage the effect is coded in the css tho so i need to add something to the css which specifies to only do it on the index.html subpage? reason being i have the same header on all the other html subpages...

Scrolling of 2 lists with one "somehow" fixed

Sorry I can't name this better. So I've got two lists. There's a very long one on the left and a short (initial smaller than screen height) on the right. And I want to achieve the behaviour that the right list moves with the global scrolling but stops when it's bottom basically reaches the page bottom AND if you scroll to the other direction it's top hits the page top (so the basic position: sticky; top: 0; in this case) while the left list always keeps scrolling ...
No description

grid and @container

I know if you put a width on a grid item it's then relative to how it fills its cell; If you use a container query to change a grid items behaviour, would the container be the main grid or the cell that houses the item?...

cut off text after a specific point

i have a border, and it has a margin of 20px. How do i keep the text from overflowing from the top
No description

JS label statement

https://codepen.io/Onii-Sann/pen/mdvJVEe I'm trying to use label then call the label using continue and break statement without using loop statement, then it doesn't work and throw the runtime error, does the label statement only can be used over loop statement?...

Reviewing small widget

Hi! I'm making this small widget that gives some info on recipes, and I was wondering if I'm following standard HTML/CSS procedures well or not. Any advice on how to make it more semantic/more industry standard would be great. Thanks so much! https://jsfiddle.net/k0a7L6j3/...
No description

special border

I am making a border around the edge of my screen. The 4 corners are perfectly spaced. Using flex space between. However, I want the borders to match inline with the corners with no overflow. It must be responsive. You can see my problem im having in the codepen https://codepen.io/GrayHay/pen/VwgLepw...

VS CODE ISSUES WITH FORMAT ON SAVE

I keep getting this error when I am trying to save files. How can I fix it?
No description

How can I single out this array element and style it?

I have put the code up in https://stackblitz.com/edit/stackblitz-starters-bp8otn?file=constant%2Findex.ts I have included only the two files relevant, components/footerNav/FooterNav.tsx and constant/index.ts The screenshot is of a nav bar at the footer of the main page of an application all enclosed in a div , I am trying to place the first element on the left on top of the row of elements, toward the center, and style it to be a bit bigger....
No description

Does Kevin have a video on adding a "swoosh" under an element?

I don't know what you call it but instead of an underline for a heading, I've seen a line under the heading but it looks like it was done freehand. Usually it's lowest on the left side and rises to the right, and I think also have variable thickness. Is it partly transform: skew and maybe using ::after? Any help on t his would be greatly appreciated!...

What's the best way to use grid or flexbox?

Hi, everyone I am doing a project right now and I use flexbox on this one already but I wanna know if grid is much better based on this wireframe. Wanna know your opinion on this one since I dont usually use grid and want to explore it after hearing your opinions....
No description

How can I replicate this banner border with css

Hi, I want to replicate the border shown on the image, only with css while being responsive. you can do it slightly with clip-path but you won't have the rounded edges. The border on the image is a png with a white background, scaling with the width of the screen. Though I can't copy that cause the website I'm working on has to be both dark&white mode....
No description

Div sizing with images

Hi guys the first picture is on how i want it and the second page is on how it is. How can i change this. So its getting the right sizes. https://codepen.io/Boeroe/pen/VwgYXxN...
No description

Pseudo element not going behind parent element using z-index

https://codepen.io/stressunfit/pen/BaMyJEr?editors=1100 Hi in this codepen i am trying to create number 1. i want the pseudo element to go behind the .number div but i am not able to achieve that. can anyone explain how stacking context is working here....

Automatically resizing input

I'd like to achieve this effect where a user can type in text into specific areas of a paragraph. I found a way to get the desired effect, but it uses a contenteditable <span/> element. I would like to use a <input/> element, but I can't find a way to make it have the same automatically resizing effect. Anyone know how I could solve this?...

Rock, Paper, Scissors (Partial Solution)

Hello, I'm attempting to create the game "Rock, Paper, Scissors" using the files provided by FrontendMentor. My current solution logic somewhat works - https://codepen.io/Matt-CopOffMatt/pen/WNPbjqb Although this is probably not the optimal solution, I was wondering if anyone out there could check out my JS and give me some suggestions. Also, the only portion not working is: ...

Display HTML using .this

Hello, I'm attempting to output HTML element onto DOM depending on user input (click). Here is sample code: ```...

Advice Slip JSON API not working properly?

I'm doing the Frontend Mentor Challenge: Advice Generator which they say uses the API from the title. It says on their site that a new piece of advice can be fetched every 2 seconds. But when I click on my button to fetch my new advice it only gives me the same piece of advice for like several minutes and only then changing it up. I don't have any Network Errors only 200 Status returns after every button click....