Develop Reference

Adding a class to blocks in turn, when clicking on the button

I want the "active" class to be added to the "stick" block by clicking on the button, if you click on the button again, it will be added to the next "stick" block and so on until the end
<div class="media">
<div class="stick active"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
</div>
<button class="next">></button>
.media {
display: flex;
justify-content: center;
}
.stick {
width: 6px;
height: 16px;
background: rgba(141, 50, 0, 0.1);
border-radius: 20px;
margin: 2px;
}
.active {
height: 30px;
background: #8D3200;
}

Hi so you're searching for something like this?:
Note: i added id next to the button :)
const btn = document.getElementById(`next`);
btn.addEventListener(`click`, e => {
document.querySelectorAll(`.media > .stick:not(.active)`)[0].classList += ` active`;
});

How to make transparent element while dragging in Chrome?

I have a card element that can be dragged from one column to another column. This works, except the card has a transparent dropzone element inside it that becomes opaque on Chrome browsers when dragging. This problem is not the case on Firefox or Safari.
You can see the code here.
How can I fix this problem on Chrome browsers?
I tried by playing with opacity and rgb() in css, but with no success. See the code below.
#board {
display: flex;
padding: 8px;
width: 800px;
}
#board * {
font-family: sans-serif;
}
.board__column {
flex: 1;
background: #fcb51d;
padding: 10px;
border-radius: 5px;
}
.board__column:not(:last-child) {
margin-right: 10px;
}
.board__column-title {
margin-bottom: 20px;
font-size: 30px;
color: white;
user-select: none;
}
.board__item-card {
box-sizing: border-box;
cursor: pointer;
background: white;
padding: 8px;
border-radius: 8px;
}
.board__item-input {
background: white;
padding: 10px 15px;
border-radius: 5px;
}
.board__dropzone {
height: 10px;
transition: background 0.15s, height 0.15s;
}
.board__dropzone--active {
height: 20px;
background: rgba(0, 0, 0, 0.25);
}
.board__add-item {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: white;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 5px;
cursor: pointer;
}
<div id="board">
<!-- Todo's tasks -->
<div class="board__column">
<div class="board__column-title">Todo</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
My first todo task 🤓
</div>
<div class="board__dropzone"></div>
</div>
<div class="board__card" draggable="true">
<div class="board__item-card">
My second todo task...
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- In progress tasks -->
<div class="board__column">
<div class="board__column-title">In Progress</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
I'm working on the task 😁
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- Done tasks -->
<div class="board__column">
<div class="board__column-title">Done</div>
<div class="board__column-items">
<div class="board__item-card" draggable="true">
<div class="board__item-card">
I finished the task 😇
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
</div>

I Believe it is not the dropzone div element that is turning opaque, I believe that the board__card element being draggable forces it somehow to inherit the color of its parent, please check the following link:
Why HTML draggable element drags with parent background?

Make image appear when hovering and dissapear when not

I have a div that I want an image to appear when it is hovered on and disappear when moved to another div (which will show another image instead). I tried to set it to display: none from the css file and show it again in jQuery with display: normal, but it feels wrong and apparently is wrong too, any suggestions on how to make it work?
const imgOne = () => {
$("#img1").css('display', 'normal')
}
$(document).ready(function () {
$(".class4").hover(function() {
$('#banner').css('background', '#3a50d9')
$(".hero-name div").css('color', '#ffffff')
$("#banner h2").css("font-family", 'Codystar, cursive')
$('#banner h2').css('font-size', '6vmin')
$("#banner h2").css("font-weight", "700")
$(".hero-name div").css('text-shadow', '-4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27')
})
$(".class5").hover(function() {
$('#banner').css('background', '#005dff')
$(".hero-name div").css('color', '#ffffff')
$("#banner h2").css("font-size", '4vmin')
$("#banner h2").css("font-family", '\"Press Start 2P\", cursive')
$(".hero-name div").css('text-shadow', '-5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd')
// Images
imgOne()
})
}
#img1 {
position: absolute;
left: 41%;
bottom: 60%;
display: none;
}
<!-- Banner Section -->
<section id="banner">
<img id ="img1" src="resources/frozen.svg" alt="pacman" type="png">
<div class="hero-name">
<div class="class1">Y</div>
<div class="class2">O</div>
<div class="class3">U</div>
<div class="class4">R</div>
<div class="class5"></div>
<div class="class6">N</div>
<div class="class7">A</div>
<div class="class8">M</div>
<div class="class9">E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
An example to clarify: If I hover over the letter "N", an image would appear. When I move to hover to the letter "A", another image would appear and the image that appeared from "N" would disappear.

Im a bit confused at exactly what you want. This may be a case where using :not in CSS will do what you want though. So if I had several images and only wanted the hovered image to be visible I would add
img {
position: absolute;
left: 50%;
top: 20px;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 0.5s;
}
#backdrop {
position: absolute;
top:0;
width:0;
height: 250px;
z-index:-1;
transition: width .5s;
}
.letters {
width: min-content;
}
h2 {
position: relative;
left: 20px;
}
/*class1 hover effects*/
.class1:hover ~ #img1{
opacity: 1;
}
.class1:hover ~ #backdrop{
width: 100%;
background: #3a50d9;
}
.class1:hover ~ .hero-pro h2, .hero{
font-family: 'Codystar', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
/*class2 hover effects*/
.class2:hover ~ #img2{
opacity: 1;
}
.class2:hover ~ #backdrop{
width: 100%;
background: #005dff;
}
.class2:hover ~ .hero-pro h2, .hero{
font-family: 'Press Start 2P', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd;
}
/*class3 hover effects*/
.class3:hover ~ #img3{
opacity: 1;
}
.class3:hover ~ #backdrop{
width: 100%;
background: yellow;
}
.class3:hover ~ .hero-pro h2, .hero{
font-family: 'Press Start 2P', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Codystar&display=swap" rel="stylesheet">
<!-- Banner Section -->
<section id="banner">
<div class="hero-name">
<div class="class1 letters">Y</div>
<div class="class2 letters">O</div>
<div class="class3 letters">U</div>
<div class="class4 letters">R</div>
<div class="class5 letters"></div>
<div class="class6 letters">N</div>
<div class="class7 letters">A</div>
<div class="class8 letters">M</div>
<div class="class9 letters">E</div>
<div id="backdrop"></div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
<img id ="img1" src="https://www.pinclipart.com/picdir/middle/84-849138_gold-chain-gangster-clipart.png" alt="sonic"/>
<img id ="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Pac_Man.svg/1200px-Pac_Man.svg.png" alt="pacman"/>
<img id ="img3" src="https://www.clipartmax.com/png/middle/27-279319_donkey-kong-png-photo-donkey-kong-king-of-swing.png" alt="dk"/>
<img id ="img4" src="https://www.vhv.rs/dpng/d/574-5744697_tails-sonic-and-all-stars-racing-transformed-tails.png" alt="tails"/>
</div>

Use opacity so your image retains its dimensions.
#img1 {
position: absolute;
left: 41%;
bottom: 60%;
opacity: 0;
}
#img1:hover {
opacity: 1;
}
<!-- Banner Section -->
<section id="banner">
<img id="img1" src="https://placekitten.com/200/300" alt="pacman" type="png">
<div class="hero-name">
<div class="class1">Y</div>
<div class="class2">O</div>
<div class="class3">U</div>
<div class="class4">R</div>
<div class="class5"></div>
<div class="class6">N</div>
<div class="class7">A</div>
<div class="class8">M</div>
<div class="class9">E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
</section>

how to change div background color with anothor div attribute value in js

hello guys i got small problem in javascript..
i want to change the background color of .gradient_color class and the color should be another class attribute value... i want to do this with 50+ divs all divs with different color .. how can i set the .gradient_color div background with the value of data-clipboard-text
<div class="box">
<div class="gradient_color"></div>
<div
class="copyButton"
data-clipboard-text="background: linear-gradient(to right, #8e2de2,#8f6ba8);"
>
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div
class="copyButton"
data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)"
>
COPY
</div>
</div>

you could get all the .gradient_color elements using querySelectorAll and loop over the returned collection. In each iteration, get the next element sibling for the current .gradient_color element and read its data-clipboard-text attribute and set is as background of the current .gradient_color element
const divs = document.querySelectorAll('.gradient_color');
divs.forEach(d => {
d.style.background = d.nextElementSibling.dataset.clipboardText;
})
.gradient_color {
width: 50px;
height: 50px;
border: 1px solid;
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
COPY
</div>
</div>

This should work as well:
const gradientColors = document.querySelectorAll('.gradient_color');
const copyButtons = document.querySelectorAll('.copyButton');
gradientColors.forEach((div,index)=>{
const color = copyButtons[index].dataset.clipboardText;
div.style.background=color;
});
.gradient_color {
width: 50px;
height: 50px;
border: 1px solid;
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
COPY
</div>
</div>

I hope this answers your question?
let elem_with_color_class = document.querySelectorAll('.copyButton');
elem_with_color_class.forEach((elem) => {
elem.addEventListener('click', function() {
let parent = this.parentElement;
let target_elem = parent.querySelector('.gradient_color');
target_elem.style.background = this.getAttribute('data-clipboard-text');
});
});
.box {
display: inline-flex;
justify-content: space-around;
align-items: center;
}
.gradient_color {
height: 30px;
width: 50px;
border: 1px solid #aaa;
margin: 1em;
display: inline-block;
}
.copyButton {
height: 30px;
width: 100px;
font-size: 12px;
font-weight: 500;
font-family: "Quicksand", sans-serif;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #fff;
user-select: none;
outline: none;
background: darkseagreen;
border-radius: 2px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.10);
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">COPY</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">COPY</div>
</div>

Can anyone figure out why addEventListener on my div is not working?

I am trying to add a listener to a small button like div so I can eventually change the color once clicked without having to use an actual button for different reasons. I have seen multiple people on here say that it works or should work. Is there something I am missing or is it just not possible? Just looking for answers!
It's pretty simple and I have verified the button works with the same function.
//this is the entire js page at the moment
var WorkingOutManager = (function () {
this.setCounter = 1;
this.workoutCounter = 1;
this.workoutID = "workout" + workoutCounter + "_set" + setCounter;
this.changeState = () => {
//I will eventually add the code to change the state of the div
console.log(this.workoutID);
}
this.currentSetButton = document.getElementById(this.workoutID).
this.currentSetButton.addEventListener("click", this.changeState);
return {
changeState: changeState
}
})();
<body>
<div id="banner">
<a id="banner_text_link" href="../content/home.html">Work It Out</a>
</div>
<div id="wrapper">
<div>
<img id="page_image"
onclick="window.location.href='../content/home.html'"
src="../images/work_it_out_logo_workouts.png" alt="Work It
Out logo">
</div>
<!--Eventually, Display a Timer after pressing start -->
<div id="current_workout">
<div class="workout_exercise">
<div class="set_name">Pushups</div>
<div onclick="WorkingOutManager.changeState()"
class="set_exercise" id="workout1_set1">15</div>
<div class="set_exercise" id="workout1_set2">15</div>
<div class="set_exercise" id="workout1_set3">15</div>
<div class="set_exercise" id="workout1_set4">15</div>
</div>
<div class="workout_exercise">
<div class="set_name">Situps</div>
<div class="set_exercise" id="workout2_set1">TF</div>
<div class="set_exercise" id="workout2_set2">TF</div>
<div class="set_exercise" id="workout2_set3">TF</div>
<div class="set_exercise" id="workout2_set4">TF</div>
</div>
<div class="workout_exercise">
<div class="set_name">Pullups</div>
<div class="set_exercise" id="workout3_set1">TF</div>
<div class="set_exercise" id="workout3_set2">TF</div>
<div class="set_exercise" id="workout3_set3">TF</div>
<div class="set_exercise" id="workout3_set4">TF</div>
</div>
<button onclick="WorkingOutManager.changeState()"
id="add_exercise">COMPLETE WORKOUT</button>
</div>
</div>
<script src="../scripts/working_out.js"></script>
</body>
#current_workout {
color: rgb(48, 48, 48);
width: 100%;
height: auto;
}
.workout_exercise {
background-color: #c4c4c4;
height: 3rem;
width: auto;
align-content: center;
}
.set_name {
color: #fafafa;
float: left;
height: 100%;
padding: 0 0.2rem;
width: calc(30% - 0.4rem);
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #c4c4c4;
font-size: 1.6rem;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.set_exercise {
float: right;
width: calc(calc(70% / 4) - 0.2rem);
height: 100%;
padding: 0 0.1rem;
margin: 0 0.1rem;
border-radius: 50%;
/* transform: rotate(-25deg);
text-transform: rotate(25deg); */
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #fafafa;
}
I am not receiving any error messages when I click on the div with the onClick listener. Nothing happens at all, in fact. The button at the bottom of the "current_workout" div works properly and logs the correctly formatted "workoutID."

It works for me if I change the '.' at the end of this line to a semicolon:
this.currentSetButton = document.getElementById(this.workoutID).
Because you're using float: right on .set_exercise, the items are listed from right to left instead of left to right. The clickable item, workout1_set1 is at the right end of the row, not the left. My guess is that you've been clicking the wrong item. I've tweaked your css to highlight the clickable item in the snippet below.
(The handler is firing twice because you've also got an onclick attribute on the div.)
FWIW—I'm not going to tell you how to do your thing—but I see no good reason to use float here (or anywhere at all, ever, really). You could achieve this layout with flexbox, grid, or a table and avoid all of the headaches that come with floats. (I don't usually advocate for tables, but one could argue that this is a table.)
var WorkingOutManager = (function () {
this.setCounter = 1;
this.workoutCounter = 1;
this.workoutID = "workout" + workoutCounter + "_set" + setCounter;
this.changeState = () => {
//I will eventually add the code to change the state of the div
console.log(this.workoutID);
}
this.currentSetButton = document.getElementById(this.workoutID);
this.currentSetButton.addEventListener("click", this.changeState);
return {
changeState: changeState
}
})();
#current_workout {
color: rgb(48, 48, 48);
width: 100%;
height: auto;
}
.workout_exercise {
background-color: #c4c4c4;
height: 3rem;
width: auto;
align-content: center;
}
.set_name {
color: #fafafa;
float: left;
height: 100%;
padding: 0 0.2rem;
width: calc(30% - 0.4rem);
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #c4c4c4;
font-size: 1.6rem;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.set_exercise {
float: right;
width: calc(calc(70% / 4) - 0.2rem);
height: 100%;
padding: 0 0.1rem;
margin: 0 0.1rem;
border-radius: 50%;
/* transform: rotate(-25deg);
text-transform: rotate(25deg); */
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #fafafa;
}
#workout1_set1 {
background: red;
color: white;
font-weight: bold;
}
<div id="banner">
<a id="banner_text_link" href="../content/home.html">Work It Out</a>
</div>
<div id="wrapper">
<div>
<img id="page_image"
onclick="window.location.href='../content/home.html'"
src="../images/work_it_out_logo_workouts.png" alt="Work It
Out logo">
</div>
<!--Eventually, Display a Timer after pressing start -->
<div id="current_workout">
<div class="workout_exercise">
<div class="set_name">Pushups</div>
<div onclick="WorkingOutManager.changeState()"
class="set_exercise" id="workout1_set1">15</div>
<div class="set_exercise" id="workout1_set2">15</div>
<div class="set_exercise" id="workout1_set3">15</div>
<div class="set_exercise" id="workout1_set4">15</div>
</div>
<div class="workout_exercise">
<div class="set_name">Situps</div>
<div class="set_exercise" id="workout2_set1">TF</div>
<div class="set_exercise" id="workout2_set2">TF</div>
<div class="set_exercise" id="workout2_set3">TF</div>
<div class="set_exercise" id="workout2_set4">TF</div>
</div>
<div class="workout_exercise">
<div class="set_name">Pullups</div>
<div class="set_exercise" id="workout3_set1">TF</div>
<div class="set_exercise" id="workout3_set2">TF</div>
<div class="set_exercise" id="workout3_set3">TF</div>
<div class="set_exercise" id="workout3_set4">TF</div>
</div>
<button onclick="WorkingOutManager.changeState()"
id="add_exercise">COMPLETE WORKOUT</button>
</div>
</div>