Adding pseudo-class to elements with JavaScript
Hi, does anyone know of an easy way to add pseudo-class styles to an element created with JavaScript? For example:
```js
const button = document.createElement('button');
button.style.backgroundColor = 'lightblue';
button.style.color = '#333';...
Object-fit:cover; reduces quality of images, alternative?
Hi, I've been using aspect-ratio: 1; and object-fit: cover; for a while now, and I've just found out it reduces the quality of the images significantly. Is there any alternative to it, or a roundabout that I can use? The only thing I can come up with is using photoshop to make the desired shape.
Images loading slowly or not at all when deployed to Netlify
Hello, I have a react page that I have just deployed to Netlify that has a bunch of images. Everything looks fine in localhost:3000 but the images in the deployed website either dont load or load very slowly. Im still a little new to web dev so maybe this is an easy fix. I'm wondering if creating the project with NextJS would help or not. Does anyone know why this is or have any solutions? I can show my code if that would help, thanks.
hop issues
https://codepen.io/-bloop-/pen/MWPprJV
so i basically just have a simple arc.. everytime u click it is supposed to hop.
which it does, but the problem is, if u keep clicking, it seems as if with every click, it hops higher and higher, and doesn't hop the same height. why is it happening and how can I tackle this problem?
also currently, when u tap it just teleports to the calculated position, i would like it to gradually go up like it does when it comes down.. how can I achieve that as well?...
Parameter not defined
Hey guys,i hope you're all good and having a good day.
I'm doing a JavaScript course and i can't really figure this out. I'm trying to display under the buttons another 2 paragraphs,one with the result which it does display when you play the game, and another one that displays the hand of the player and the hand of the computer.
The problem is with the "hands" paragraph, on the console it keeps saying "Uncaught ReferenceError: playerMove is not defined ". But "playerMove" is a parameter and i don't know what to do.
I tried researching for similar problems but couldn't find an answer,declaring the parameter,reviewed the code and nothing.
Here's the code pen https://codepen.io/JC-Dsc/pen/BaqWdqd?editors=1111...
Side Project help
Hey guys, so I have this idea to be my side project and I need your input or help on this one
I wanna create a website where I would show pictures gallery
Can someone give me an example of this kinda website?
What is the best way to do the web?
Do I make admin dashboard to publish a new post?...
When should I set explicit widths/heights for images to increase CLS score?
Always thought it was bad practice, but I'm checking Page Speed Insights and it's telling me to add explicit widths/heights so that it improves my CLS score. I do have a couple images that can be fixed, so I did make them fixed with explicit
width and height and that was enough to bump my page to 100 performance. Curious about the nuances though.Z-indexnot working on pseudo-elements
Hello team, I am working on some pseudo-elements with backgroung-images, and my problem is that no matter if i set the ::before and the ::after with pisition: absolute and z-index lower than the parent element, they don't go under the parent element covering my patent element. Why is that? And how can i solve it?
```
.tartkozep::before {
content: " ";...
width: calc(100% -2rem); returns invalid property value in inspector
so im not sure where the issue but something is happening due to content editable div
i gave width:100% for parent. first child is an image with width of 2rem , so for second child i gave with = 100%-2rem
https://codepen.io/avinash-tallapaneni/pen/MWPyvQe...
text area not growing in height when text is entered.
https://codepen.io/avinash-tallapaneni/pen/MWPyvQe
i gave min-height:8rem and height: auto. when i enter text its not growing in height instead im getting scroll. how to fix this?...
Cards
I've cards with picture on top and the name below. Inside grid system. Now everything is fine as long as the name is within one line. If it goes to the second line the name section which has padding and background-color increase in height due to more text but I want the name section of all the cards in that line to be the same height no matter how much content, they all should change. I gave min-height to the
game_card_wrapper which did increase it's height and all the others but name section kept it's original height . What should be the solution.
game_card_wrapper
game_name
game_name a
https://codepen.io/Arslan-Akbar/pen/poOMadb...Equal sides with text
```.gameInfo{
text-align: center;
font-size: 2rem;
background: -webkit-linear-gradient(300deg, #93F5EC 20%, #A77BF3 70%);
-webkit-background-clip: text;...

React Routes
how can i navigate to the id using react router? i want to have same functionality as when you click a tag and a tag has id where u scroll down
a display problem
Hi, guys how are you doing I hope you are all doing right. I am having a problem with a project I am working on and it is a single web page, I have built a component that does need a position absolute but the problem is that now the next component is being displayed at the top of it, not in the state flow as the others compenent so if a nayone know what to do please feel free to help

Does chrome support the preloading of tiff images ??
i want to know does the chrome support the preloading of tiff images like any other image format jpg png
Simple Sass @extends and % issue
I'm probably doing something stupid, but I have the following code:
```css
%list {
@include mixins.reset-list();...
Timer is BUGGED
Hey, I am trying to build a Pomodoro clock. When I click in the "start" button everything works perfectly and the times begin from 25:00min until 00:00. And when I click in the "paused" button, it pauses as expected. BUT, if I click multiple times in the start/paused button, it starts behavior strangely, like the timer start and stop rapidly or skips over parts of the countdown altogether, mostly in the seconds... How can I solve it?
https://codepen.io/ssstephanyyy/pen/vYVydRz...
optimized way to create a multiple modal/popup
i have about 2-3 modal and 5/6 pop up in my project. How would you design them? stack all on top of each other ? or stack them in a single page and take advantage of display block/none?
vanilla javascript to make component-based UI
I'm working on a side project at the moment, which is a boardgame.
I already implemented the complete game to be usable via CLI but now I want to make a web-interface as well.
I was wondering whether it'd be feasible to make that component-based without any of the big frameworks (angular/react/vue/svelte) as long as i combine it with RxJS to handle the events and DOM manipulation.
And if feasible, how you would approach building these components (e.g. regular HTML files scattered all over the place, ...)...
Javascript for different pages.
I've a single file of js with multiple scripts for different pages. Issue is I'm getting one element on a page that is not available on the other page, because of that the script of that page doesn't work. What should be the approach here. Make a different js files for different pages. Or is there another way.