KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

Pat66

4/3/2023

Reproduce an effect

Hi everyone I want reproduce this effect

glutonium

4/3/2023

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 ...

Malik

4/3/2023

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);...

Monimolimnion

4/3/2023

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?...

★𝒄𝒍𝒂𝒊𝒓𝒆★

4/2/2023

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...

b_sups

4/2/2023

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/...

samidev

4/2/2023

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...

Punitor

4/2/2023

I have been trying to deploy a html/sass project onto Vercel, but css/sass is not loading

Whenever I make a deployment with the project, the css is not loading. I have made sure multiple times that the pathing is correct, but whenever I load the site and inspect or view the page source, it shows the link for the stylesheet, but clicking on the href leads to nothing. The stylesheet link is set to '../sass/style.css' and not '../sass/style.sass', but its still not loading anything. Is this a problem with Vercel, or is something wrong with my directory?

Tenkes

4/2/2023

What's the best way to add smooth transition to theme change?

I want to add smooth transition when switching between dark and light theme, and I'm curious what would be the best way to add transition to elements that will change colors? I guess adding transition on all elements (* selector) would maybe slow down website? I was thinking of adding a separate class like .theme-transition that will have only transition on color and background-color and then adding that class to elements that are "affected" by theme change. Do you know any better, more efficient way?...

Soum

4/2/2023

After animation?

So I have a card where if you hover then it scales up. If you remove hover it scales back to normal instantly. How do I make the scaling out as an animation as well?

.card:hover {
    transition: ease 1s;
}

.card:hover {
    transition: ease 1s;
}

...

roryjmurphy

4/1/2023

Help With 100% Width and responsive CSS issue in Adobe Muse

Hello there, I am trying to create a rectangle shape in adobe Muse which I would like to span the width of the browser (which i have done) and be responsive (which I have done). The issue I am having is that the responsive scaling breaks for some reason. Is there a reason why? It work perfectly... then breaks and I can figure out why. I have implemented a 100% height code CSS which worked perfectly and converting height to width doesnt appear to function properly.The CSS I have used (or variation of this - 100% etc) is merely: <style>...

samidev

4/1/2023

i'm coding for fun but i got curious abot these webkits

can somebody explain for what is this used for, why he need to use webkit transform instead only transform ? and why webki-keyframes ? somebody explains please...

Mirza

4/1/2023

Can anyone able to use `vscode-styled-components` extension today?

I noticed that after vscode update, vscode-styled-components extension is not working. What's about on your side?

glutonium

3/31/2023

math.random()

k so i have the code which u can check in the codepen https://codepen.io/-bloop-/pen/bGxRpmw in the code.. it is supposed to generate number between given min and max value ...

husnain214

3/31/2023

How can I make this layout?

I have tried to make it with flex and grid but the problem is the row height is defined by the largest item. This leaves whitespace below shorter items. I have also tried using flex columns with wrap and a fixed container height but the number of images is dynamic causing them to overflow. Does anybody know how to make this?...

Dovah

3/31/2023

How do I save whole HTML page with changes in localStorage, and load it up upon browser refresh?

WITH WORKING JS* It does not need to be HTML, it can be <body> or even <container> (in my case, container is named "refresh-div"). Project link: https://astonishing-cupcake-035f30.netlify.app/ ```js const htmlContent = document.querySelector(".refresh-div").innerHTML;...

rig26.

3/31/2023

Failed to Load module Script

Any Idea what's the problem with the code that I am trying to run? This is the problem that occurs, it didn't load the javascript. Thanks Guys...

denertog

3/31/2023

padEnd not padding equally among multiple lines

Why would this code generate the screenshotted output (not printing directly below HeroicFeats but one indent (tab) less?

``javascript
return

${"Sanctuary".padEnd(15, ' ')}\t\tHeroicFeats ---------------- ${this.sanctuary.pools[0].toString().padEnd(15, ' ')}\t\t${this.heroicFeats.platforms[0]}...

JunSu-Ho

3/31/2023

invalid input in CSS state/selector

https://codepen.io/JunSu-Ho/pen/KKxLROg so the effect works when input is valid or empty, but not when the user put invalid input, is this can be solved without JS? 🤔 the label should be on top if the input is invalid as well, but not when it's empty ...

Dovah

3/30/2023

How to find index of an Object inside of querySelectorAll?

I need index of element inside of NodeList... ```js const testlul = document.querySelectorAll(".comment-box") document.addEventListener('click', (e) => {...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.