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

How to add a bootstrap toast message when internet is not connected

I have a code which shows an alert when Internet is not there. I want to add a bootstrap toast instead of the alert. Does anybody know how to achieve that. Here is my internet status code. ``` constructor(private connectionService: ConnectionService) { this.connectionService.monitor().subscribe((isConnected) => { this.isConnected = isConnected.hasInternetAccess;...

Pop up Modal Problem with other element behind it.

Short brief about the issue is, since I made a pop up modal and centered it to the screen with position fixed. I cant click or interact the landing page anymore on mobile view because of the modal is in the center. The css property I used to make the modal pop up is
visibility hidden
visibility hidden
then target it on Js to make it
visible
visible
...

CSS

plz guys how con i do this with html and css

Typescript Generics

I want to create a class who's signature is modified by function calls. For example; ```ts const thing = new Thing(); // Thing<"">...

Anyone used the spotify api? Do removed tracks still appear?

Initially feels like a stupid question, but do "removed" tracks still appear in api queries? Thought perhaps they had a more extensive list of songs, with a smaller number marked as active For example you still tend to be able to google and browse the tracks that are no longer playable, they just don't appear in your app searches...

Modal Issue

Hey I've been searching for some easy tutorial about pop up modal and I made this simple Pop up modal. Basically I follow it from the yt I've saw. and now running the problem that it is not working. IDK why. a help would be appreciated from u guys. https://codepen.io/pen?template=WNgeMZJ...

What is the best property to use when it comes to text responsiveness?

I'm pretty new on using media Q. I'm just wondering what is the best property to use to make a text responsive ? Im only using a vw on my font units and sometimes clamp().

how to make flip cards self sized

Hi guys! How to make both height and width of the flip cards self sized? Right now the width is self sized. I want it to have no excessive white part like the one in the middle. https://codepen.io/codedkk/pen/wvxVVrz Original code is from the article in the js pen. ...

Problem with For Loop

Can someone help me figure out the difference between the function afficher() using for...in vs the for loop? Using for..in the output is correct but with for it's not. am I missing something? ```function afficher(tab, n = 10) { let output = ""; for (let i = 0; i < tab.length; i++) { if (tab[i] % n == 0) {...

How to remove a value when you click outside of a button?

When I click a button I select the ratings value but when i click outside of the buttons I want to remove that value from the variable. I tried if .hasFocus() and .activeElement is false (probably did it wrong too) then change the variable to undefined but it didn't work for now. https://stackblitz.com/edit/web-platform-gffhc4?file=script.js...

<system-colors>

Hey everyone, my site I'm working on has a light/dark mode theme and I just finished implementing (making minor tweaks) for users of Windows Low/High Contrast Theme accessibility feature

Codepen Issue

hey just wondering why I cant use the tab button to finish my code in codepen like the way I'm using it before. like I'm typing .container + tab it will make a div class of container for me but now its not working.

How to set dynamically 100vh on a section minus the nav above ?

Hey guys, so here is the codepen link https://codepen.io/noobcoder137/pen/VwBozdY; I have a <nav>, <main> and a <section> below other and I want to make my <main> 100vh but minus the <nav> so that I immediately see the next section when I scroll a little bit down. I thought setting the height of <main> to 100dvh but it does not work. The only solution I came up with so far is putting the <nav> inside the <main>, but I donโ€™t want it to be nested....

flex-basis or width for item size in a flex container?

Can somebody tell me which one should I use and why ?

Full width mobile version

For this page: https://chrisbarin.com/membership-account/membership-checkout/?level=1 I'm trying to make "what's included" full width, the same as the box above. I'm editing a plugin with lots of inline CSS so it's far from optimal. I am not familiar with flex-basis, shrink, grow. I've tried various things but I'm not sure what I need here....

Not able to display data in local storage to form

I was creating a way to save form data even when navigating to another component. The data gets saved to local storage but I'm not able to pre-fill the form using the data stored in local storage. It was working yesterday but today it is'nt working. Can anyone show me what I'm doing wrong. Here is the code for it. ``` ngOnInit() { this.createRegForm(); ...

Spanning columns using CSS Grid

I don't think what I am attempting to do is possible. Based on the hours of reading I've done (CSSTricks, StackOverflow, etc), whenever we are spanning columns with CSS Grid, the grid-column-start MUST be specified. In my case, I would like a particular cell to span to the the last line, regardless which line/column it falls into. Here is some styling: ```CSS .Grid-Container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));...

preventDefault() not preventing page refresh on form submit in React

I am currently building a form and somehow the page refreshes when the form is submitted, even though I call preventDefault() in onSubmit. Here is a minified version of my React form component: ```tsx import { FormEvent } from 'react';...

how to make my site cool when zoom in and out like other websites

hey everyone i am having trouble when i zoom my site everything get random