Html Div

by black strings

HTML

<div id="myContainer">
  My Container
  <div id="cardContainer">
  <h5>Card Container</h5>
  </div>
</div>

CSS

/* CSS here */
#myContainer {
  background-color:#00ff00;
  width: 100%;
  padding:20px;
}

#cardContainer {
  background-color:white;
  padding:10px;
}

.cardAvatar {
  padding:3px;
  margin:2px;
  display: inline-block;
  border:thin solid grey;
}

JavaScript

// Deck.js
var Deck = function(){
	this.deck = [];
}

Deck.prototype.insertCardToDeck = function(card) {
	this.deck.push(card);
};

Deck.prototype.draw = function(){
	for(var i = 0; i < this.deck.length; i++){
  	var currentCard = this.deck[i];
    // create a div for visual - each card get its own div
		var cardDiv = document.createElement('div');	
    
    // give div a class so we can target it for styling
    cardDiv.className = "cardAvatar";	
    
    // display the card name inside the visual
    cardDiv.innerHTML = '[type]' + currentCard.type + '<br>' + currentCard.name; 
    
    // add the viual into another dive
    document.getElementById('cardContainer').appendChild(cardDiv);
	}
}
// ---- end of Deck.js

// Card
var Card = function(type, name, hp, atk, def){
	this.type = type;
	this.name = name;
	this.hp = hp;
	this.atk = atk;
	this.def = def;
}

// Card.js
Card.prototype.dealDmg = function(dmgToCard) {
	var totalDmg = 0;
	if(this.atk < dmgToCard.def){
		totalDmg = 0;
	}else{
		totalDmg = (dmgToCard.def + dmgToCard.hp) - this.atk;
	}

	dmgToCard.hp = dmgToCard.hp - totalDmg;


	this.hp = (this.def + this.hp) - dmgToCard.atk;


	if(dmgToCard.hp < 0){
		dmgToCard.hp = 0;
	}
	if(this.hp < 0){
		this.hp = 0;
	}


	return dmgToCard.hp, this.hp;
};
// ------ end of Card.js


// ---------------------------my simulation
// Deck For cards
		var myDeck = new Deck();

		// Cards
		var WindRunner = new Card("Monster", "Wind Runner", 5, 4, 1);
		var FootSoldier = new Card("Monster", "Foot Soldier", 10, 2, 2)
		var CatGirl = new Card("Monster", "Cat Girl", 7, 3, 2);
		var Beggar = new Card("Monster", "Beggar", 1, 1, 1);
		var LordSony = new Card("Monster", "Lord Sony", 20, 10, 10);
		var HeadlessBody = new Card("Monster", "Headless Body", 5, 2, 1);
		var AxeMan = new Card("Monster", "Axe Man", 12, 5, 2);
		var Froggy = new Card("Monster", "Froggy", 2,2,0);
		var Santa = new Card("Monster", "Santa", 25, 10, 7);
		var Witch = new Card("Monster", "Witch", 15,...