side scrolling card layout

by amindunited

HTML

<div class="exampleContainer">
  <div class="LandscapePhone">
    <div class="cardContainer">

    </div>
    <div class="deckViewContainer">
      
    </div>
    <div class="maybeContainer">
      
    </div>
  </div>
  <div class="portraitPhone">
  
    <div class="cardContainer">
    </div>
    <div class="deckViewContainer">
      
    </div>
    <div class="maybeContainer">
      
    </div>
  </div>
</div>

CSS

* {
  box-sizing:border-box;
}
.LandscapePhone {
  width: 480px;
  height: 320px;
  border: solid 5px black;
  border-radius: 5px;
}
.portraitPhone {
  width: 320px;
  height: 480px;
  border: solid 5px black;
  border-radius: 5px;
}
.cardContainer {
  height: 110px;
  max-height: 110px;
  width: 100%;
  overflow-y: auto;
  border: solid 1px grey;
  white-space: nowrap;
}
.maybeContainer {
  height: 110px;
  max-height: 110px;
  width: 100%;
  overflow-y: auto;
  border: solid 1px grey;
  white-space: nowrap;
}

.deckViewContainer {
  min-height: 33%;  
}

.card {
  height: 100px;
  width: 80px;
  border: solid 1px #cdcdcd;
  border-radius: 3px;
  display: inline-block;
}

JavaScript

var allCards = 200;
//DeckViewCards are by mana cost, 
var deckViewCards = {
	'0': [],
  '1': [{}, {}, {}, {}],
  '2': [{}, {}, {}, {}, {}, {}, {}, {}],
  '3': [{}, {}, {}, {}, {}, {}, {}],
  '4': [{}, {}, {}, {}, {}],
  '5': [{}, {}, {}, {}],
  '6': [{}, {}],
  'land': {
  	
  }
}
var cardTemplate = '<div class="card"></div>';
var maybeCards = 25;
var cardContainers = document.querySelectorAll('.cardContainer');
console.log('cardContainer ', cardContainers);

for (var i = 0; i < allCards; i++ ) {
	var card = document.createElement('div');
  card.classList.add("card");
  cardContainers[0].appendChild(card);

	card = document.createElement('div');
  card.classList.add("card");
  cardContainers[1].appendChild(card);
}

var maybeContainers = document.querySelectorAll('.maybeContainer');
for (var i = 0; i < maybeCards; i++ ) {
	var card = document.createElement('div');
  card.classList.add("card");
  maybeContainers[0].appendChild(card);

	card = document.createElement('div');
  card.classList.add("card");
  maybeContainers[1].appendChild(card);
}