CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Best Jeanist
Best Jeanist

Reputation: 1129

Combining 2 list of divs into one

I have this code below that consists of 2 separate divs Red Fruit and Green Fruit The problem is what i'm trying to do is combining both of this 2 list into one so like the end result will be one big list with half of it Red Fruit and another half Green fruits with their separate colours without the heading is there a simple way to do this without changing much of my codes? Any help would be greatly appreciated thanks!

var red = {};
var green = {};
var random = {};

var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry','Pomegranate','Rassberry'];

var key2 = "Green Fruits";
green[key2] = ['Watermelon', 'Durian', 'Avacado','Lime','Honeydew'];



     var redString = '';
     $.each(red[key], function(index) {
         redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
     });
     $('.redclass').html(redString);

     var greenString = '';
     $.each(green[key2], function(index) {
         greenString += ('<div class="pilldiv greenpill class">' + green[key2][index] + '</div>');
     });
     $('.greenclass').html(greenString);
	
	
.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.redpill {
  background-color: Pink;
  cursor:default;
}
.greenpill {
  background-color: SpringGreen;
    cursor:default;

}
 .class {
  font-family: Open Sans;
}
.center {
  display: flex;
  justify-content: center;
}
.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.top {
	margin-bottom: 20px
}
h3{
font-weight: normal;
}
.panel {
    display: table;
    height: 100%;
    width: 60%;
	background-color:white;
	border: 1px solid black;
	margin-left: auto;
    margin-right: auto;
}
.new-green-fruit{
background-color: LightBlue;
cursor:pointer;
}
.top{
margin-bottom:30px;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="//#" />

</head>

<body>
    <div class="panel">
        <div style="float:left;width:calc(50% - 5px);">
            <h3 class="class center">Red Fruits</h3>
            <div id="redid" class="redclass wrappingflexbox top"></div>
        </div>

        <div style="float:right;width:calc(50% - 5px)">
            <h3 class="class center">Green Fruits</h3>
            <div id="greenid" class="greenclass wrappingflexbox top"></div>
        </div>

    </div>

    </body>
</html>

Upvotes: 1

Views: 94

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371233

Easiest tweak would be to append to one single HTML string rather than two separate strings (and remove the other container so that the width is correct):

var red = {};
var green = {};
var random = {};

var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];

var key2 = "Green Fruits";
green[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];



var combinedString = '';
$.each(red[key], function(index) {
  combinedString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$.each(green[key2], function(index) {
  combinedString += ('<div class="pilldiv greenpill class">' + green[key2][index] + '</div>');
});
$('.redclass').html(combinedString);
.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.greenpill {
  background-color: SpringGreen;
  cursor: default;
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.top {
  margin-bottom: 20px
}

h3 {
  font-weight: normal;
}

.panel {
  display: table;
  height: 100%;
  width: 60%;
  background-color: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.new-green-fruit {
  background-color: LightBlue;
  cursor: pointer;
}

.top {
  margin-bottom: 30px;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />

</head>

<body>
  <div class="panel">
    <div style="float:left;width:calc(100% - 5px);">
      <h3 class="class center">Red Fruits And Green Fruits</h3>
      <div id="redid" class="redclass wrappingflexbox top"></div>
    </div>
  </div>

</body>

</html>

Upvotes: 2

Related Questions