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

html, css

https://codepen.io/Nandha-Kumar-S-S/pen/ZEVyKxx i specified the width and height of body tag and when background color is applied to body tag ...

Read a file and make div's based on the content of the file. best approach

Hello, I have to read a json file so I do it like this : ``` fetch('./data.json) ...

side nav overflow problem

```jsx import React from "react"; import NavbarCss from "./css/Navbar.module.css"; ...

JavaScript: How to display a week of dates at a time

I am working on a FrontLoops challenge where the page displays the current week of dates. Clicking on the prev button should display the previous week of dates and clicking the next button should display the next week of dates. Currently, my code automatically puts the current date in the container for Sunday no matter what day it is. I'm still fairly new to working with date and time in JavaScript, so I would appreciate any help/direction in making this functional. https://codepen.io/savvystrider/pen/rNowMbz...

hover effect

Hi everyone I realize this menu what I want is : in the hover the colored div he means the after should grow at the center to the left side and right side...

Question about classes

Good day! Sorry for the stupid question, but I couldn't find the answer. How does the property in the circle differ from those inside the constructor and what is their feature and difference?
No description

css nesting

```@media only screen and (min-width: 1440px) { #menu_div { display: none; } }...

Shadcn questions

Good evening, Sorry to bother you, but I’m working on a project with Next JS (App Router) at my work and I tried you use shadcn ui in the project, but I faced some obstacles and problems....

Writing Css in react

whats the best way to write css in react i mean i am writing css for all components in one single style sheet i dont think its a good idea to do that i tried using different style sheets for different components but i notised that stylesheet of parent component also effects the child component what should i do
No description

Last pass password manager bug...

Hello everyone... I am currently working on a project and Last pass Password manager is adding elements to my html contact form. Has anyone faced this issue? If yes please how did you fix it? This is the element it keeps adding. When I open my dev tools and remove it, It goes away but comes back after refresh .... <div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div>...

How to send an email with HTML syntax instead of HTML text

I want send an email with HTML syntax instead of HTML text like this
<!DOCTYPE html > <body data-id="__react-email-body"><a data-id="react-email-button" target="_blank" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px"><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0">Click me</span><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a></body>
<!DOCTYPE html > <body data-id="__react-email-body"><a data-id="react-email-button" target="_blank" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px"><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0">Click me</span><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a></body>
...

Trouble Navigating to Another Page in React Using a Button

I'm working on a React project and I'm having trouble implementing a button that navigates to another page when clicked. Additionally, I'd like to know how I can view the target page without having to press a button each time. Here's my current code for the button in React: ```...

Dark Mode Toggle

I have tried and tried again to get this toggle to work. I have included a link to my github repo. In the top part of the script.js file is the over-engineered script that I commented out. Below is the script Kevin had on youtube. Any help on this is much appreciated! PS: This is the error I get : TypeError: can't access property "addEventListener", darkModeToggle is null https://github.com/andrewteece/social-media-dashboard...

Hanging indentations

Hey together! I am trying to display references in a specific citation style, alongside a hanging indentation. Since the browser-support for text-indent: hanging is non-existent - MDN - I had to get creative with floating spacers and JS height calculations. I'm generally speaking quite happy with the visuals, I just don't like employing (probably terribly written) JS for such a "seeminly" simple thing. Here's a pen of it, would love to hear if someone has suggestions! https://codepen.io/Halbach_IO/pen/bGOWxBP...

Header navigation bar

So I have a header nav at the top of the page as shown in image. all the code: https://stackblitz.com/edit/web-platform-us4b5p?file=index.html ...
No description

Page scrolls down to bottom

https://infotelligent-58ac19.webflow.io/infotelligent-vs-zoominfo I didn't give any #id at the end of url, but when I visit the url it's scrolling down to the form. why is this happening?...

Keeping the height of the image while changing the height of the absolute container

Hello everyone, It will actually look like the before and after image (when hovering), but I want it to vertically and from top to bottom. Meanwhile, I want the image not to shrink. As you can see in the attached image, the color image and the black and white image are not aligned. I am sharing the code below, I use it with Swiper JS. Code : https://codepen.io/yekowele/pen/MWZmVJR...
No description

Tile animation as main navigation of site

Hello there, I am working on a website for a client and I've come up with an interesting design where the main navigation is four tiles centered in the screen and when a specific title is click they all move the the out corners of the screen, revealing the content behind that tile. Depending on which tile is click the other tiles will be group to the corner differently. Kind of confusing to explain, but its pretty simple when you see it. Here is a figma prototype to check out: https://www.figma.com/proto/Ivlj1ciCBtTUJCw2eYsOq9/Roswell.pics?node-id=5-51&starting-point-node-id=5%3A51&mode=design&t=LVXGY9DxxchTfrxW-1 I just was wondering if anyone could give me a brief walkthrough on how to achieve this, with some kind of overlay or animation library, I was considering doing this in React.js, or just any ideas would be great....