kawasaki93
New Coder
Hello, I have cloned an element and I need to select several clones to modify its shape and color, how can I select several specific clones in this code:
here is my work:
https://codepen.io/Kawasaki93/pen/qBxwVbR
I need to select clones to modify shapes and colors.
here is my work:
https://codepen.io/Kawasaki93/pen/qBxwVbR
I need to select clones to modify shapes and colors.
HTML:
<html>
<h1>Playa Juan</h1>
<head>
<meta name="viewport" content="width=374,height=767, initial-scale=1.0; user-scalable=1; " >
</head>
<body>
<div class="beach_wrapper">
<div class="sunbed toggle">
<div class="form">
<form>
<input type= "text" style="height:17px" size="3" value="">
<label> </label>
</form>
<style>
form {
/*Codigo centrado formulario */
margin-left: -16px;
margin-top: 32px;
padding: 1em;
border: 0px solid#CCC;
text-align: center;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
form li + li {
margin-top: 1px;
}
label {
/*Tamaño y alineacion uniforme*/
display: inline-block;
width:7px;
text-align: center;
}
input,textarea {
font: 1em sans-serif;
widht: 7px;
box-sizing: border-box;
border: 1px solid #999
}
</style>
</div>
</div>
</div>
</body>
</html>
CSS:
.beach_wrapper {
width: 1170px;
max-width: 100%;
display: grid;
grid-template-columns: 90px 90px 90px 90px 90px 90px 90px 90px 90px 90px ;
grid-template-rows: 80px 80px 80px 80px 80px 80px 80px 80px;
gap: 0px 0px;
margin-left: auto;
margin-right: auto;
padding-right: 10px;
padding-left: 10px;
}
body {
display: flex;
align-items: center ;
height: 280vh;
background: #808187;
background: radial-gradient(ellipse at center, white 0%, #28affa 100%);
}
.sunbed {
width: 70px;
height: 40px;
border: 2px solid;
color: orange;
border-color: black;
background: green;
text-align: center;
display:inline-block;
font-family: sans-serif;
margin-left:12px;
margin-top:15px;
}
.sunbed.step1 {
background: yellow
}
.sunbed.step2 {
background: red
}
.sunbed.step3 {
background: purple
}
.sunbed.step4 {
background: green
}
.sunbed.step5{
background:yellow
}
.sunbed.step6{
background:red
}
.sunbed.step7{
background:green
}
.sunbed.step8{
background:yellow
}
.sunbed.step9{
background:red
}
.sunbed.step10{
background:green
}
.form input{
background-color: #FFEFD5;
border: none;
border-bottom: 1px solid green;
text-align:center;
zoom: 100%;
touch-action: none;
}
@media only screen and (min-width: 384px) and (max-width: 767px) { /* Your Styles... */ }
JavaScript:
for (var x=1;x<80 ;x++)
{
$(".beach_wrapper").append($(".sunbed").first().clone(
));
}
$('.toggle').dblclick(function () { let step = $(this).data('actual-step') || 1;
$(this).addClass('step'+ step);
$(this).data('actual-step', step + 1 );