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

why h1 is overwriting a class

Hi! I came across with a weird behaviour and wanted to know if I'm missing something. So, in HTML it looks like this: `<div class="content-quote">...

JavaScript shenanigans with user input

Hello everyone, Im trying to create really simple page calculating users BMI and desired calorie intake for mass loss/gain. I'm just learning JavaScript so most of code in there is made with the help of YT examples, no way I could write that up myself. I would be really grateful for any/all suggestions how to refactor my code and how to finish up BMI, current level and desired level of calorie intake. I'm really having issues in finding a way to wrap this up. Here's my GH link: https://klukas18.github.io/fitness-website/...

Lazy Loading

Hello, I was watching this video by Kevin explaining a method on how to lazy load. (https://m.youtube.com/watch?v=mC93zsEsSrg&t=52s&pp=ygUPTGF6eSBsb2FkIGtldmlu) In this video, he uses data-src attribute to hide / reveal images based on the Intersection Observer API in JS. However, after reading more about data attributes:...

Gaps in a grid make an element of the grid overflow

As you can see, the grid which contains the image and the div with 2 text blocks has some gaps, and for this reason text overflows. Any idea how can I prevent it?
No description

DOM under the hood

Hello guys, I am confused about the DOM and have several questions. DOM is just specification for browsers developers that specifies necessary interfaces?...

Stop form from sending when validation fails.

I have an internal validation for the input field on my form and I don't wanţthe form to submit when the user has an invalid email address based on my requirements. I have tried e.preventDefault() and return false; but it is still not working😭😭. I need help it is super urgent. This is what my input validation looks like ``` const valid = () => {...

Grid template area issue

Hi, I am using Grid template area, I want the Accessories part to take the area below it, how to do it? Check the code: https://codepen.io/hamzacodepen951/pen/poqdyXN...
No description

Private videos undownloadable

Hello i got project i want to make private videos, ones that can't be downloaded or access outside the website can you guys mention best websites to do that? (youtube is out the question)

React

what is the best ever available React tutorial on the internet ?

Not override spreaded value

I'm exporting some objects: ```js const PA28_161 = { ...aircraft, name: 'Piper Warrior PA28-161',...

Javascript Object.create inside object?

This doesn't seem to work: ```js const myObject = { masses: [ Object.create(mass, {...

Comparing two arrays

Here is my code: https://codepen.io/lukakuwu/pen/zYyPYRm?editors=0010 I have an array with prices and a function to add the tax. I made a second array with the expected results and used jest to test. I know theres something wrong with how im calling the results arrays values but I dont know how to fix it. The tests should pass through the array dishes twice and compare all of the items in the array results with the price. Maybe theres a better way to reformat it but Ive tried everything I can think of...
No description

TypeScript behavior

I'm doing some simple JavaScript coding exercises in TS and have come across this odd behavior I haven't encountered before. I have only the following code: ```ts const inputs: Array<Array<any>> = [...

Background image

As you can see in the attached image i have a image which is moved towards right side and some of its part is showing .Can anyone tell me what is the best practice to do this as if i will use position absoulte than for every screen size i have to set it accordingly is there is a better way to position image like this
No description

google extension to extract words from every websites everytime I click in it

hi, I want to make a google extension to extract words from every websites everytime I click in a certain word inside the page. And I want it to popup it as a list of words. But I don't know what i wrong with my code so I don't achieve what I want. popup.js ```js document.addEventListener('DOMContentLoaded', () => {...

Sentry is not logging the errors

I integrated the sentry on my nextjs 13 app but the sentry is not even logging any errors even through there’s no errors on my code.

Transparent outlined text

I'm trying to make a transparent outlined text with css, but some characters look weird. Is this because of the font or am I doing something wrong? code: ``` .text-stroke-md {...
No description

How do I achieve the effect of the sub nav on this Apple Website

I'm trying to achieve the sticky behaviour on this site https://www.apple.com/apple-card/ Where the Sub Nav overlaps with the first's section's content, and sticks to the top of the screen on scroll. Here's a codepen with my attempt. https://codepen.io/HanielU/pen/zYyEVYW ...

How fix issue 'Blocked by CORS - No 'Access-Control-Allow-Origin' header'

Access to XMLHttpRequest at 'https://pro-api.coinmarketcap.com/v2/tools/price-conversion' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CartModal.tsx?t=1695060428915:119 Error - AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
axios.js?v=d21b1d92:1511 GET https://pro-api.coinmarketcap.com/v2/tools/price-conversion net::ERR_FAILED
Access to XMLHttpRequest at 'https://pro-api.coinmarketcap.com/v2/tools/price-conversion' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CartModal.tsx?t=1695060428915:119 Error - AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
axios.js?v=d21b1d92:1511 GET https://pro-api.coinmarketcap.com/v2/tools/price-conversion net::ERR_FAILED
...