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 me please deploy my FullStack proejct on vercel

I deployed my project to vercel and got 404 NOT FOUND error I want deploy my React + Vite + TypeScript + express + Node.js porject with frontend on localhost:8000 and backend on localhost:3000 to vercel sucessfuly I have this folder structure and vercel.json (I know that I need to write functions for my backend endpoints)...
No description

Weather APP using weatherapi.com

The goal of this is to be able to show the current weather in a specific location (searchable). Now I have access to it, and I can see a Call (the url), and a response body (bunch of JSON). Now... I know I can use fetch to access or pull (I think pull is the word), the API url, so does that mean I can then access any of the JSON properties without having to add them to my codebase somewhere? ```js...

CSS slide-in with translateX property not staying in place

Hello, everyone 👋. My problem with this is that the form is supposed to slide in from the left and stay in place so the user can add a new note. I am using the transform translateX property initially set to 100% to move the form to the right. Then when a button is clicked, the translateX property will be set to 0 which moves the form into view from the right to the left with a smooth animation. ...

Intersection Observer API: How to have each circular progress bar fill when they are in viewport?

Sorry if the formatting is horrible. My first time asking a question! I am creating a stat module for the user to input a value and that value will get taken into a circular progress bar that fills up when the progress bar is in the viewport. I have it working partially BUT I am now stuck. When I have 3 x 2 lay out. All the stats will fill up twice. Once when the first row is in the viewport and another time when second row is in the viewport. Another issue I am running into is when the stats ar...

Is it possible to resize the pixels of a default png to the dimensions you want?

I know CSS resize images on an html page but the png that is stored on your computer is unchanged right? Is it possible to resize that png to the dimensions I want? For example I want my png to a size of 320 x 320 by default.

Are shadows only added to buttons and images?

Help me decide between the two and educate me a little bit more about shadows.
No description

TypeScript review

I have the following TS code: ```ts const input: Array<string | number> = [3, "a", "a", "a", 2, 3, "a", 3, "a", 2, 4, 9, 3]; ...

Design advice

as you can see in my image i have a accoridan can any one tell me best framework to make this tyoe of accordian which will be easy to modify in react js or i should build it custom. Thanks...
No description

Alarm timer

Hi all! Tell me what is the error? The number n is given. n minutes have passed since the beginning of the night. Determine how many hours and minutes the digital clock will show at the moment. The program should output two numbers: the number of hours (from 0 to 23) and the number of minutes (from 0 to 59). Please note that n can be greater than the number of minutes in a day. ```let n = 1441; let h = Math.floor(n/60); let m = (n % 60); if (h >= 24){...

how to make a S with borders

i want the borders look something like S
No description

Customizing Forms - What are some tips and tricks?

I'm building a food ordering site, very simple one for now, and I'm trying to customize the form layout without much success. https://codepen.io/Laing91/pen/bGOaEwr There will only be a few sections until I get it up and running and look to add more, potentially, so I'm not sure how you would separate each selection?...

Repeated SVGs and patterns on website background help

Hello Friends. I'm currently working on a coding challenge and I'm faced with a problem I can't seem to wrap my head around yet. Here's the deal. I want to implement an almost pixel-perfect replica of the UI design below. The doozy for me is how I'm going to implement all the little stars scattered around the whole website. And the little gradients that looks like a glow of light is also scattered around the whole page. I've been thinking about this for a while now and I very much need help at this point....
No description

Integrating 3rd Party Library Challenge: Carousel Styling in NextJS Migration

As a junior developer, I am currently grappling with a challenge related to the integration of a third-party library into our company's website. Our previous website was constructed using AngularJS and JSP, technologies with which I have limited proficiency. Adding complexity to the situation, the carousel styling on this website is being overridden by a mandatory 'toolkit.css' file that incorporates the header and footer from Kentico. My assigned task is to recreate the Product Details Page on...

Why is a TextNode in the dom 20 px high when its set to 1rem/16px?

Hello people! I recognized that pure TextNodes in the dom have a box size of 20px height. See the first screenshot. The box of the text grows larger than its content. This causes my button to look not appealing, as even though I have set it to flex and centered it vertically, it still looks like the text is a few pixels too near to the bottom line. And then there is another thing: When zooming in, the actual center line changes. See the second screenshot. I know this is probably caused by how images are rendered by the browser and that such a rendering process is a very complex thing and nearly impossible to do it perfect. But is there anything I can do about that?...
No description

How to crop overflowing element?

Hello, I am facing with an issues with an overflowing element. I added overflow-x as hidden on my body element but it didn’t work. What else should I do? Or is it because of Safari? It requires -webkit? Website: http://minesa.live...
No description

Getting Astro to work with prettier-plugin-tailwindcss

I can't for the life of me get the Tailwind plugin to work with Astro files in VS Code. I've tried several approaches I've found online, including the guide linked from the Astro website: https://straffesites.com/en/blog/integrate-prettier-astro-tailwindcss Has anyone had success getting this working? I've also got the Astro extension installed....

Why is this overflowing in x axis?

When I pass textarea's rows as "10" it creates and overflow in y and x axis, I don't get why height have anything to do with x axis? I also passed it "1" for comparison
No description

Working with Sample API

``` let api = "https://randomuser.me/api/"; function fetchData() { fetch(api)...
No description

JS Concatenation

I'm working with a sample API in JavaScript. My code is the following: ``` let index = 4;...