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

Last JS newbie of the day ... object iteration

Final one today ... my brain is melting now. Within the for...in execution crewMember is placed within square brackets, []. What are they doing to crewMember. If I've understood it right, the statement refers to crewMember because it is a variable saving the spaceship.crew property for each iteration. But I still don't understand what the square brackets are making the crewMember into? The only guess I have is a property value, but I don't really understand ......

Form IDs: submitting, getting 2 forms to act as one

When you have form.addEventListener('submit', function(){}), the 'form' which will be submitted is whichever form held the particular type = "submit" button triggering that form submit. I have a mobile form (id = "form__mobile"), which only contains a 'title' search input and the submit button. However, there is a modal-expanding button that, if you click it, a modal opens which contains what are meant to be the other 2 inputs of that same form, along with another submit button. ...

Codepen not working

https://codepen.io/kevinpowell/pen/PoeGYGK I took this codepen from Kevin's video and is not working.

nav dot indicator query selector seems wrong

To put a dot indicator on the according nav menu when scrolling, how should the
querySelector
querySelector
be? ( i think this is where the problem is? bc the code below is not working and console showed error is included in the link below) plz help thank you in advance https://codepen.io/codedkk/pen/Baqxzjg...

JS functions

Hi again! Why is this code printing undefined at the end? ```javascript...

JS functions for newbie

Hello! How does the getFahrenheit function know that the return value of multiplyByNineFifths is the celsius argument? Taken from codecademy intro course. ...

Better way to animate an entering element with `@keyframes`

I was building a demo playing around with an "entering" and "leaving" full page element using both transform and @keyframes, I'm satisfied with the transform result but the @keyframes one involved a lot of js to make the animation "goes backwards" when the user hits the "toggle" button, there is a better approach for it? here's my pen: https://codepen.io/eduruiz/pen/oNaErPr ps. first time posting here, hi everyone! 🧑...

CSS responsive sidebar menu

Hello, does anyone know how to create a sidebar menu like this: https://medicine.duke.edu/divisions/cardiology/about/leadership where parent link is clickable and the carrot expands menu? I would like to do it with css only.

Uninstalling node, node -v still returns a version number

I'm trying to uninstall node, I've gone into my 'local' on my mac, and removed node from 'bin', 'include', and 'lib'. but when I check node -v, i'm still getting back a version. Is there somewhere else I need to delete it? I ran the sudo rm -rf node command when I removed them...

Position: sticky

Go easy on me... I know this should be easy XD Not really used position sticky, but why tf is this not working? Does the direct parent have to scroll or something? Basically trying to get the sidebar and the sticky bar to, well, stick πŸ™‚...

Scaling element to the largest multiple of some step size which can fit inside it's parent

Background I was on YouTube music and noticed that when playing from a playlist, the "up next" list has the following appearance; - in normal windowed mode, the bottom-most visible track has a few pixels cut off the bottom edge...

Download anchor tag

I want the download to start as you click it but it opens the file in new/same tab than either you click download if pdf or right click save image as if it's an image.
<a href="./padfile.pdf" download="PDF File">Download</a>
<a href="./padfile.pdf" download="PDF File">Download</a>
...

Debugging: How to find where mystery divs are coming from

I recently installed and then uninstalled the aria-modal-dialog npm package. Somehow my code is now generating three 0px by 0px divs and inserting them above the header, which is throwing off the layout, and I'm having a heck of a time finding where they're coming from. GH: https://github.com/nnall/DevJobs-FEM.git Live: https://main--dynamic-salmiakki-7aaccb.netlify.app/...

want opinion on styling with component libraries

hey folks I have a doubt with component library such as mui, chakra-ui we can define styles like this
<Box m={2} maxW='960px>Tomato</Box>
<Box m={2} maxW='960px>Tomato</Box>
and these styles doesn't count as the inline style instead for every component we use a new className is automatically generated and there these styles are added so we still need to use separate CSS file I have seen some projects made with them and they use separate CSS file very little most of the styling is done as shown in the code...

Understanding object notation - JS newbie

A third installment of my non-understanding of JS, but hey ... here we go. As mentioned before I'm taking codecademy's intro course, and today it's all about objects. This one slide is about nested objects, and the text says: "In application code, objects are often nestedβ€” an object might have another object as a property which in turn could have a property that’s an array of even more objects!"...

Defining TypeScript type or interface for array within object

I am at the beginning of my TypeScript learning curve and am currently struggling as to how to create an interface (or type?) for an array within an object. This is within a React component. I have the following object: ...

Problem with Font Preloading

hello everyone.(sry for my bad english) hello everyone, in my project woff2 format fonts are connected like this "<link rel="preload" href="fonts/PublicSansRegular.woff2" as="font" type="font/woff2" crossorigin>" but in developers tolls it always shows me this warning "00/fonts/PublicSansRegular.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally." I can't solve this problem, can anyone help?...

null error work around.

Im having various event listeners for child class . In HTML there is only parent classes, the child classes are then added via JS, when a page loads im getting null errors for these event listners, how to fix this?

npm package instructions say to include a specific .js file, names it, but where is this file?

I'm installing an npm package for an accessible modal dialog from here : https://www.npmjs.com/package/aria-modal-dialog?activeTab=readme Installing now, under "Standard Usage", it tells me to "Include the a11y.modal.js file at the bottom of your document" but there is no link or indication of where it's located. Where am I supposed to get this file from?...