KPC
Kevin Powell - Community
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
Join ServerKPC
Kevin Powell - Community
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
Join ServerCommunity questions
Channels
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...
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...
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 i...
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 i...
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
Website:
http://minesa.live
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.
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
Working with Sample API
let api = "https://randomuser.me/api/";
function fetchData() {
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);
})
}
fetchData();I'm workig with a sample RandomUser API. When running this code, it returns this object (see img #1). I'm attempting to retreive the data within 'results'. Creating a variable like
let result = data.result returns (see img #2). But, when I try to log the gender, but calling `console.log(result.gender...JS Concatenation
I'm working with a sample API in JavaScript. My code is the following:
```
let index = 4;
let api = "https://dummyjson.com/products/${index}";
function fetchData() {
let img = document.getElementById("product-img")
let title = document.getElementById("product-title")
let price = document.getElementById("product-price")
let desc = document.getElementById("product-desc")
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);...
```
let index = 4;
let api = "https://dummyjson.com/products/${index}";
function fetchData() {
let img = document.getElementById("product-img")
let title = document.getElementById("product-title")
let price = document.getElementById("product-price")
let desc = document.getElementById("product-desc")
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);...
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:
And then in CSS we have the following:
At this point the font-size doesn't look like 10px, more like 30px.
And then when I add
it overwrites the class and the font looks like 10px. And it doesn't matter which of t...
So, in HTML it looks like this:
<div class="content-quote">
<h1>Good Software, like wine, takes time.</h1>
</div>And then in CSS we have the following:
.content-quote {
font-size 10px;
}At this point the font-size doesn't look like 10px, more like 30px.
And then when I add
h1 {
font-size: 10px;
}it overwrites the class and the font looks like 10px. And it doesn't matter which of t...
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...
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...
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:
“Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index...
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:
“Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index...
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?
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?
The specification is implemented by browser internally in low-level language?
Browser gives us host objects, constructed prototypal chain where EventTarget is root class from which descendant classes like Element, Node, HTMLElement inherits?
How it is possible that document.querySelector('div') returns element and that element has [[Prototy...
I am confused about the DOM and have several questions.
DOM is just specification for browsers developers that specifies necessary interfaces?
The specification is implemented by browser internally in low-level language?
Browser gives us host objects, constructed prototypal chain where EventTarget is root class from which descendant classes like Element, Node, HTMLElement inherits?
How it is possible that document.querySelector('div') returns element and that element has [[Prototy...
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 = () => {
const email = document.getElementById("email");
const err = document.getElementById("err");
email.addEventListener("input", (e) => {
cons...
This is what my input validation looks like
```
const valid = () => {
const email = document.getElementById("email");
const err = document.getElementById("err");
email.addEventListener("input", (e) => {
cons...
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
Check the code: https://codepen.io/hamzacodepen951/pen/poqdyXN
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)
Not override spreaded value
I'm exporting some objects:
```js
const PA28_161 = {
...aircraft,
name: 'Piper Warrior PA28-161',
weightMaxTakeoffPounds: 2325,
weightMaxLandingPounds: 2325,
additionalCategories: [
{
name: 'utility',
weightMaxTakeoffPounds: 1950
}
],
masses: [
{
...mass,
name: 'Front Seats',
armInches: 80.5
},
{
...mass,
name: 'Fuel',
armInches: 95,...
```js
const PA28_161 = {
...aircraft,
name: 'Piper Warrior PA28-161',
weightMaxTakeoffPounds: 2325,
weightMaxLandingPounds: 2325,
additionalCategories: [
{
name: 'utility',
weightMaxTakeoffPounds: 1950
}
],
masses: [
{
...mass,
name: 'Front Seats',
armInches: 80.5
},
{
...mass,
name: 'Fuel',
armInches: 95,...