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

how to match both the filter value to lower case

here how can i get the classList to lowerCase ``` function filterResults() {...

grow image to size of sibling

See: https://svelte.dev/repl/a8f8ff1c7384448d96e36d4a9b30cfea?version=4.2.11 Is it possible to make the icon grow to the height of its sibling?...

How to Animate Slider Loop?

How to Animate Slider Loop without touching the swiper buttons?
No description

Road map

Hi everyone I'm interested in learning from and web development and I'm new in this development community can any one suggest me how to become web developer

How do I store details of users in frontend when they sign in?

I was wondering is it wise to store users details like name pictures and other general information in frontend after fetching the data once from the database when they sign in. And what will be the effective way of doing that?

Why does click work but hover doesn't?

Here's the code I'm having an issue with one.addEventListener('click', () => { if (one.hasAttribute('checked')) { one.style.backgroundColor = 'green' two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'...

What should I do next after CSS?

So,I have completed HTML and CSS by doing projects for better understanding. Now,I want to know what should I do next? Should I do any framework of CSS or JavaScript?...

How to code this form

So I recently got back into coding and I don't how to go about coding this form. Can someone help out. I'm using plain html and css. Thanks in advance...
No description

Possible to turn an image into a prop in svelte?

Messing around with Svelte and have setup a gallery using the same image but will css/svelte it differently for each image (is this possible). Wondered if it was possible to save that image as a prop, so instead of having to do img src="" .... I can do <div>{img}</div> etc... I wanted to mess around with each image differently, would that then be possible with the single prop, assuming what I'm messing with is the div containing that image, and not the propped image itself?...

Positioning Popover with Dynamic Card Heights

In my Vue.js app, we have movies section. which displays movieCards component depending on movies coming from an API. And where each movieCards component height varies based on its content, and movieCard's height dynamically adjusts based on its content, including movieName, duration, and categories. and there's a popover triggered by a button in the card's footer. Now, I need to move the popover to the top of each card, but since the card heights are dynamic, I'm not sure how to handle it. Although the popover offers an offset option to adjust its placement, determining the appropriate offset value for dynamic heights remains a hurdle. like how much do I exactly need to change offset values so that it reaches to top of card ? Any tips or resources would be helpful...

Sass/SCSS

Hey everyone, I'm just starting out and trying to wrap my head around Sass/SCSS. So far, I've gathered that it helps make CSS more structured and readable. But am I missing something? Is there more to it than just a syntax tweak for better readability?

Cors Error

const [dogData,setDogData] = useState([]); const express = require('express'); const app = express(); const cors = require('cors');...

Why browsers show elements bigger than defined in CSS

The developer has implemented my design. The logo is intended to be 180 x 180 px. In Inspector it indeed reads 180 x 180 as the rendered size, but using Screen Ruler (Windows Power Tools) I measured 225 x 225 px, which is 1.25 times bigger. Then I made a test HTML/CSS project, put div to be 100x100px and it is also 125 x 125 px on my screen when opened in Chrome and Firefox. My screen is 1920 x 1080px with 16.1 in diagonal, which gives around 137 PPI. Why the object size is bigger in the browser than defined, and does screen resolution and PPI affect this?...

Need help from anyone with safari browser on their iphone would like to know if my site UI looks ok

website: https://nasa-image.onrender.com issue: a friend of mine (from japan) is getting stretched out images and UI is looking horrible in his phone Thing is he is the only one I knew who have an iPhone however he is not an web dev I'm stuck and don't know how to solve this...
No description

Setting barba.js

how to I setup barba up using the the functions mentioned below? I've added the comments on what each one does ```function delay(n) { n = n || 1500; return new Promise((done) => ...

Scrollbar margin disappears ?

Does anyone know how to fix this ? When I refresh page multiple times the white corner appears + horizontal scrollbar + vertical scroll bar left margin disappears. In one of the images you can see that it is not all the time. When I hover over side navigation bar, the navigation bar expands and it fixes itself or when I go to developer tools. Not sure what causes this. I use for scrollbar overflow-y: auto + max-height as 100vh - 5.125rem because of margins and borders...
No description

Why picture isn't taking full height?

Hi everyone, hope you're doin well! 🙂 I'm actually testing myself with some challenges on frontend mentor, and I was struggling a little bit with this one in the image. I took inspiration from Kevin's video for some things (like accessibility classes), but I want to try a different approach rather than using grid (just to do some practice)...
No description

How can I set browser url manually in react js

I'm using outlet component to render child components, I have also set up ProtectedRout component which wraps <Outlet> component, ProtectedRout returns children component if isAuthenticated is true and returns <Login/> components if it is false, It works without any problem, Since I'm directly returning login component instead of using <Navigate to ="/login/> the url in the browser address bar doesn't change, but I want it to be mydomain/login, How can I achieve this? const ProtectedRout = ({children})=>{ const {isAuthenticated}= useAuth()...

GLB model not displaying in three.js

Hi all, I am trying to import a model and display it on my canvas, but it doesn't seem to work. What am i doing wrong? ```import "./index.css"; import * as THREE from "three"; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; console.log( GLTFLoader );...

angular landing page

Hi, I'm working on a project, and the initial page serves as a landing page. It's my first time creating a landing page, so I have some questions. Since a landing page typically consists of multiple sections, is it recommended to separate each section into different components and then display all components within a pageComponent? Or is it preferable to include everything in the same HTML file and differentiate the content using section tags, for example? For now, the content is all static and its working with the first aproach, but will I be able to manage scroll animations correctly? I recently watched the video "Incredible scroll-based animations with CSS-only" , and I found it very interesting to apply in the near future, so i want to modify as little as posible when implementing this Thanks!...