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

position: relative;

Hey everyone, I have div which has a padding on it, within that div I have an image. These are the styles ```css div { padding: 1rem; }...

Needed guidance on a loading page layout

Feels like im playing tag of war of the margin top and bottom values. attached the design to this post. Here is the codepen:...

Undefined variable in component

I'm getting a lot of my variables undefined and ran at times when they shouldn't run. My best guess is that it is related to the way I make the Api call. When I run the program, the console statements doesn't get printed on chrome but on edge?? When I start the problem I get the error ERROR TypeError: Cannot read properties of undefined (reading 'trim') in app.component.ts ngOnInit() when I try to read csv. The csv are not empty and this method works as expected to load the csv into the arrays...

How to name font color variables in scss/css

I have 3 font colors, how to name the variables? color-light color-mid-dark color-dark? color-primary color-secondary color-trinary?

HTML5 input type="date" tag ignoring assigned value in script-triggered picker in Firefox

Can someone offer a workaround for this problem? Objective: allow date picker to appear when wrapper element is clicked for a date element which does not allow direct access. ```html...

Parent and child constructors

if I have a UserForm class:
class UserForm extends View {
// no constructor
}
class UserForm extends View {
// no constructor
}
...

Need Help with Grid

Code Pen: https://codepen.io/Arslan-Akbar/pen/poOMadb Images included also with grids So I'm trying to learn grid by making a small project....

Keeping getting the push ERROR

I keep getting this ERROR in the console everytime I call this function as you can see in the image. Why is this happening and how can I solve it? my intention with code was to create a new list of array everytime I change the const data and not to substitute the before alteration with a new one like the code is doing

Get the content inside div

say i have the following div
<div class = "button">420</div>
<div class = "button">420</div>
...

Facing problem while using border-image-slice

I am using this code in order to learn about border-image-slice and other related property. The problem is the unit of value defined for border-image-slice. Eg i get different output if i supply value 35, 35px and 35%. I understand the reason for the %age value, but shouldn't the output for other two be the same? I have also attached the image i am using in this example....

How to ADD multiple tasks

I'm creating a to do list. I want to create a new task every time I click in the button ("ADICIONAR TAREFAS" - this mean add task in english). But when I click in the button at this moment, it doesn't create a new task, just edit the one that already exist. Here is the full code: https://codepen.io/ssstephanyyy/pen/yLRBOQV...

Adding responsive background behind elements

I would like to add a decorative background behind a particular section on my website. Please refer to the visual attached. We have an image on the left and some text on the right. Somehow I need to add a decorative div "behind" the text, as you can see it should stretch behind the 2 main elements, overlapping onto the left side where the image is. Ideally, this background would be responsive. Just looking for general/useful pointers on how to approach this challenge as I am struggling to figure it out. ...

How can I make my primary nav dropdown slide down with an animation?

(JSFiddle for context: https://jsfiddle.net/25ghjzr0/4/) I have a dropdown menu in my primary nav, which appears when you hover a link. I achieved this using display none to flex. I can't figure out how to animate it so that it goes from height 0% to height auto. The dropdown itself works but the links inside don't. Does anyone how how I can achieve this? Thanks...

Reproduce an effect

Hi everyone I want reproduce this effect

Make background dark when nav appears

say I have the following codepen https://codepen.io/-bloop-/pen/yLxdJNj if u click the coral coloed square, the navbar will appear ...

Need help with the pseudo element in navbar

https://codepen.io/Arslan-Akbar/pen/poOMadb here the link to the codepen. I want the pseudo element which appears on hover to have transform scale X of 1 when it has active class on it. Is there any way i can use css selectors for this I tried using something like .nav-items::before.active{ transform:scaleX(1);...

Best way to approach an animation

I would like to make the following animation: a series of arrow icons rotating in a circle around a central point, all of them pointing 'clockwise', offset laterally from the radius (so some closer to the middle, some further away) and all slightly different in size, colour, and opacity. I'm wondering what the best way to go about this is. I could create a single SVG in Illustrator and then just do a simple rotation, but that lacks flexibility. Could it be done purely with CSS? Would JS need to get involved somewhere?...

How to achieve this design?

Trying to build my website with Nuxt3 but im running into a hiccup where I cant get my CSS right to achieve what i want to do. In my figma design i drew up where I would have my logo in the center of the page (https://imgur.com/a/QqMWA9p). But what iv come across is when i set my html, body, and nuxts div with the id of __nuxt to a height of 100% it causes my footer to be off the page and my hero logo to be off centered vertically (https://imgur.com/a/AyCkBaQ). What should I try to do t...

Issue with trying to make code reusable by making it a function

I made just be fried from working on it all day. But building a calculator, trying to turn some code into reusable code so I can use it for when user clicks on buttons, and when user types the input in the input field. I am getting e is not defined. The function is created in the global scope and being used inside an event listener. https://github.com/bsupinski/calculator https://bsupinski.github.io/calculator/...

I want to upload a wordpress website

I've created in in localhost i export it with wp migration, but the poin it i downloaded wordpress but now i can't go to admin login.. Can somebody help me...