• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How can i select a specific clone element from 80 clones?

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.

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 );



Screenshot_2022-06-23-11-30-43-578~2.jpeg
 

OldMan

King Coder
Before trying to answer, I would like to know what goes into the green box and the yellow box.
And do you know what boxes need to be altered or are they chosen by something else and therefore different each time?
 

kawasaki93

New Coder
Before trying to answer, I would like to know what goes into the green box and the yellow box.
And do you know what boxes need to be altered or are they chosen by something else and therefore different each time?
hello oldman, i try to create a sunbed app.Every green box means 2 sunbeds. I made this code;
JavaScript:
{
  $(".beach_wrapper").append($(".sunbed").first().clone(
    ).attr("id","clon_"+x));

but i having problems to select a specific clone. I tried this codes in css to see ifs works but it dosnt work;
I want to modify the box to an hexagone like in the image i sent you,. Can you tell me the exact code?
CSS:
.sunbed.clone_7{
Background: blue;
}

clone_7{
Background: blue;
}
id.clone7{
Background: blue;
}
 

Attachments

  • 20220619_090638.jpg
    20220619_090638.jpg
    538.4 KB · Views: 1

OldMan

King Coder
By "sunbed" are you talking about tanning beds?
Why don't you make a 10 by 8 "table". Javascript can locate any cell you want.
You could make the cells buttons and when clicked it becomes selected.
If you like that idea I might (My coding is not great nowadays) give you sample code.
 
Top