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

RegEx with match() and replace()

I have a regular expression that grabs the double quotes and value for an html tag attribute: str.match(RegEx). And then I use str.replace(RegEx, replacementStr) where the replacementStr is a span tag with a class for changing the color in a pre block. It works like a charm when I only have 1 attribute in my html tag. But when I have 2 attributes (e.g. id and class), I get both matches in each attribute. I can't figure out why it doubling since the id and class values are different. Any insight would be great: ```js...

Occasional JS error from fast clicking?

This error is popping out occasionally in console, from I'm guessing, clicking too fast? When I'm slowly handling the app it is doing well, but it shows up when I start going ham(I think). "Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." If I'm remembering there is a line of code that prevents spam clicking or something? If that is even what is causing it in the first place....

Why is this giving me an error?

```js for(let i=0;jobCard.length;i++){ if(jobCard[i].classList.contains('hidden')) { jobCard[i].classList.remove('hidden'); }...

Using CSS custom property in inline SVG

I'm trying to replace a single character on a website with an inline SVG. I'm basing what I'm doing on Kevin's video "Basic, Intermediate & Pro animated hamburger icons". The main difference at this point is I'm doing it in a pseudo element: ``` .modal .close-button:after { content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>'); fill: var(--clr-neutral-100);...

anyone can help me find the mdn resource for return types? example is

function add(x: number, y: number): number { return x + y; } let myAdd = function (x: number, y: number): number {...

3D Genplan of Houses project

Hello to everyone guys! Hope you're doing well today! I'm working on react project for company-builder and they want to see something similar to what you can see on images. I want to ask you, are there any libraries of tools to make something like that? I want it to be responsive and easy to use feature. PS: project on images using jQuery and hardcoded sizes, so it absolutely not adaptive. even on mobile it has 2000+px width and height. It would be nice to find something convenient to use. ...

Any idea how I can achieve a preload effect like this one here?

I try to create such lazy low pixel resolution like they do on this page https://www.searchsystem.co/...

Need help with my JavaScript RegEx

I working on a JavaScript program to output formatted span tags to be pasted into a pre tag for code blocks in my blog posts. 1. I got a RegEx to capture the double-quotes and content in between them for some HTML attributes. 2. I have an HTML entities conversion function for < > ' " and & and I use the result to add a span tag with a class for a paragraph class and image src but not tor a title tag without any attributes. 3. Then I output the html entity conversions with the span tags around them, plus a different span and class around each line. ...

Video not showing when page loads up but fixes when you press on it.

Hello all, the video when the page loads it shows the beginning of the video and it works fine in PC. However, when I load it in my android phone, the video have this background in the image. Is there a way to fix this or... is it because phones have different rules with the videos? ``` <article class="cards"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsum odio ratione obcaecati amet, ea ipsa ab fugiat esse alias, iusto sint exercitationem itaque accusantium quisquam perspiciatis aut asperiores in....

Card 2 system is flip from other cards

https://codepen.io/T031C/pen/eYjWpjK this was a card system i was making and the second card's function is inverted from the other cards It was working before with me calling each element but that was repeating everything and i tried making it into querySelectorAll and now this happens...

Is chrome dev tools responsive view working correctly?

Hi there, since 14 days ago I think, when I use the chrome dev tools to see if my website is responsive and move around the responsive bar to increase/decrease the width of the viewport, I can see that my website goes out of the viewport and I can scroll horizontally. Now, if I close the responsive view and then close the dev tools, and then open it up again, it looks ok. Am I the only one?

help

I need help how do i make the 0 to turn -0; thanks

Help with simple IF statement!

```js for(let i=0;i<filtersDiv.length;i++) { let selectedFilter; let filterOut = ""; let clickCounter = 0;...

How do I keep the width of the video the same while changing the height in smaller screens?

I tried the following code and at first it was ok when the text is in the center of the video which is what I want. However as the screen gets smaller the text isn't going to the center no more. ```header { position: relative; height: 1000px; ...

how can i display these 2 divs one left side one right side(responsive)

if someone could do it for me thank you so much just to display these 2.it would really help me

Scroll horizontally through a slider

Hello 👋 So I have this Slider Container and I want it to be scrollable when the keyboard user tab into it? I'm not sure what i can do to achieve this without over-enginer it. Now if you want to scroll through it you have to click on the container first and then you can use your arrow keys to scroll, as you can see in the CodePen below...

Filter

Why won't this work? Only the opacity has been changed. Do I need to create separate lines for each aspect of the filter I want to change? Can I not change more than one aspect of the filter on an element? document.querySelector(".main-container").style.filter = "opacity(0.3)", "saturate(100%)", "hue-rotate(0deg)", "brightness(100%)", "contrast(100%)", "blur(5px)";

Error concatenating strings in a for loop

Hello, I'm trying to generate a random string of length 12 ``` let id = ''; ...

Understanding how development works ...

Hi! This post is for me to understand the process of coding. I was in charge of administrating a web site, and to make sure the developers from the firm we used did what we wanted and needed fixed to be done. In the link you'll see the front page and as a hero you see a gliding carousel of different upcoming performances. My questions are:...

Getting the layouts correct with flex for each section.

Having trouble seeing why my sections aren't lining up properly with flex. It seems I can get them to line up close but they dont seem to meet the image below. Am I doing something wrong with my html setup or is it an issue with my flexbox setups? I'm not sure what width to consider for them. https://codepen.io/MD-2016/pen/oNMZRWp...