JSFiddle - React, Tailwind, and code Playground

by pardahlman

HTML

Card 1 facing up: <span id="card1"></span>
<br />
Card 2 facing up: <span id="card2"></span>

JavaScript

var Card = (function() {
	//constructor
	var card = function(settings) {
		settings = settings || {};

		// public properties
		Object.defineProperty(this, "imgSrc", { get: function() { return settings.imgSrc || ""; } });
		Object.defineProperty(this, "facingUp", { get: function() { return false; }, configurable : true });


	};

	// instance specific function
	var flip = function () {
		var newValue = !this.facingUp;
		Object.defineProperty(this, "facingUp", { get: function () { return newValue; }, configurable: true });
		//this.facingUp = !this.facingUp;
	};

	card.prototype = {
		constructor: card,
		flip: flip,
		//facingUp: false
	};


	return card;
})();

var card1 = new Card(); //facingUp = false
var card2 = new Card(); //facingUp = false

card1.flip(); //facingUp = true
card1.facingUp = false; // this does not work due to read me


$("#card2").text(card2.facingUp);
$("#card1").text(card1.facingUp);