ericwindmill/index.html

## index.html
<body>
	<header>
    <h1>The Banana Stand</h1>
    <p> Brought to you by Dart POS </p>
  </header>
  <main>
   	<section class="buttons-container">
      <h2>Choose Product</h1>
      <button class='product-button'>Plain Banana</button>
      <button class='product-button'>Frozen Banana</button>
      <button class='product-button'>Chocolate Banana</button>
    </section>
    <section class="transaction-container">
      <ul class='items'>
      </ul>
      <div class='total'>
        <p>Total</p>
        <p class="cost" id='total'>0.00</p>
      </div>
    </section>
  </main>
  <footer>
    <button class='finish-button'>Close For the Day</button>
    <h2 class='closing-message'>THERES ALWAYS MONEY IN THE BANANA STAND</h2>
  </footer>
</body>

## main.dart
import 'dart:html';

void main() {
  new BananaStand();
}

class Business {
  double profits;
  double sales;
  double businessCosts;
}

class BananaStand extends Business {
  Element itemsCount;
  List<Element> plainButtons;
  Transaction currentTransaction;
  Element closeButton;
  bool messageShowing = false;

  BananaStand() {
    itemsCount = document.querySelector('.items');
    plainButtons = document.querySelectorAll('.product-button');
    plainButtons.forEach((b) {
      b.onClick.listen((e) => handleClick(e));
    });
    closeButton = document.querySelector('.finish-button');
    closeButton.onClick.listen((_) => soldOut());
    currentTransaction = new Transaction();
  }

  void handleClick(e) {
    var banana = new Banana.fromStringType(e.target.text);
    addBananaToTransaction(banana);
  }

  void addBananaToTransaction(Banana banana) {
    if (currentTransaction == null) {
      currentTransaction = new Transaction();
    }
    currentTransaction.addProduct(banana);
    List listItems = [];
    currentTransaction.itemized.forEach((k, v) {
      listItems.add(
          "<li><p>${v}</p><p>${k.toString()}</p><p class='cost'>${costAsCurrency(k.cost * v)}</p></li>");
    });
    itemsCount.children.clear();
    listItems.forEach((li) {
      itemsCount.appendHtml(li);
    });
  }

  void finishTransaction() {
    currentTransaction = null;
  }

  void soldOut() {
    var msg = document.querySelector('.closing-message');
    msg.style.visibility = messageShowing ? 'hidden' : 'visible';
    messageShowing = !messageShowing;
  }
}

class Transaction {
  Map<Banana, int> itemized = {};
  double transactionTotal = 0.0;
  Element total;

  Transaction() {
    total = querySelector('#total');
  }

  Map<Banana, int> addProduct(Banana product) {
    if (itemized[product] != null) {
      itemized[product] += 1;
    } else {
      itemized[product] = 1;
    }
    _updateTotal();
    return itemized;
  }

  void _updateTotal() {
    transactionTotal = 0.0;
    itemized.forEach((k, v) {
      transactionTotal += k.cost * v;
    });
    total.text = costAsCurrency(transactionTotal);
  }
}

class Banana {
  final BananaType type;
  final double cost;
  Banana(this.type, this.cost);

  factory Banana.fromStringType(String buttonText) {
    BananaType type;
    double cost;
    switch (buttonText) {
      case ('Plain Banana'):
        type = BananaType.Plain;
        cost = 1.00;
        break;
      case ('Frozen Banana'):
        type = BananaType.Frozen;
        cost = 1.25;
        break;
      case ('Chocolate Banana'):
        type = BananaType.Chocolate;
        cost = 1.50;
        break;
    }
    return new Banana(type, cost);
  }

  @override
  String toString() => this.type.toString().split('.')[1];

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Banana && runtimeType == other.runtimeType && type == other.type;

  @override
  int get hashCode => type.hashCode;
}

String costAsCurrency(double cost) => "\$" + cost.toStringAsFixed(2);

enum BananaType { Plain, Frozen, Chocolate }

## styles.css
body {
  background: white;
  color: black;
  font-family: Roboto, sans-serif;
}

h1, h2, p {
  margin: 0;
  padding: 0;
  line-height:1.5;
}

header {
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main {
 	display: grid;
  grid-template-columns: 50% 50%;
  height: 400px;
}

main > * {
  padding: 25px;
}

.buttons-container {
  background: lightgray;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

}

.transaction-container {
  border: 1px solid black;
	display: flex;
  flex-flow: column;
  justify-content: space-between
}

.items {
  list-style: none;
  padding: 0;
}

.items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  height: 30px;
}

.items li:nth-child(2) {
  background: lightgrey;
}

.total {
  border-top: 1px solid black;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.cost {
  flex: 0 0 50px;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}


button {
  cursor: pointer;
  background: slategray;
  border-radius: 4px;
  height: 100px;
  font-size: 2rem;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

button:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

footer {
  display: flex;
  flex-flow:column;
  justify-content: center;
  align-items: center;
  height:150px;
}

.finish-button {
  height: 60px;
  font-size: 1.5rem;
}

.closing-message {
  visibility: hidden;
}
	<body>
	<header>
	<h1>The Banana Stand</h1>
	<p> Brought to you by Dart POS </p>
	</header>
	<main>
	<section class="buttons-container">
	<h2>Choose Product</h1>
	<button class='product-button'>Plain Banana</button>
	<button class='product-button'>Frozen Banana</button>
	<button class='product-button'>Chocolate Banana</button>
	</section>
	<section class="transaction-container">
	<ul class='items'>
	</ul>
	<div class='total'>
	<p>Total</p>
	<p class="cost" id='total'>0.00</p>
	</div>
	</section>
	</main>
	<footer>
	<button class='finish-button'>Close For the Day</button>
	<h2 class='closing-message'>THERES ALWAYS MONEY IN THE BANANA STAND</h2>
	</footer>
	</body>
	import 'dart:html';

	void main() {
	new BananaStand();
	}

	class Business {
	double profits;
	double sales;
	double businessCosts;
	}

	class BananaStand extends Business {
	Element itemsCount;
	List<Element> plainButtons;
	Transaction currentTransaction;
	Element closeButton;
	bool messageShowing = false;

	BananaStand() {
	itemsCount = document.querySelector('.items');
	plainButtons = document.querySelectorAll('.product-button');
	plainButtons.forEach((b) {
	b.onClick.listen((e) => handleClick(e));
	});
	closeButton = document.querySelector('.finish-button');
	closeButton.onClick.listen((_) => soldOut());
	currentTransaction = new Transaction();
	}

	void handleClick(e) {
	var banana = new Banana.fromStringType(e.target.text);
	addBananaToTransaction(banana);
	}

	void addBananaToTransaction(Banana banana) {
	if (currentTransaction == null) {
	currentTransaction = new Transaction();
	}
	currentTransaction.addProduct(banana);
	List listItems = [];
	currentTransaction.itemized.forEach((k, v) {
	listItems.add(
	"<li><p>${v}</p><p>${k.toString()}</p><p class='cost'>${costAsCurrency(k.cost * v)}</p></li>");
	});
	itemsCount.children.clear();
	listItems.forEach((li) {
	itemsCount.appendHtml(li);
	});
	}

	void finishTransaction() {
	currentTransaction = null;
	}

	void soldOut() {
	var msg = document.querySelector('.closing-message');
	msg.style.visibility = messageShowing ? 'hidden' : 'visible';
	messageShowing = !messageShowing;
	}
	}

	class Transaction {
	Map<Banana, int> itemized = {};
	double transactionTotal = 0.0;
	Element total;

	Transaction() {
	total = querySelector('#total');
	}

	Map<Banana, int> addProduct(Banana product) {
	if (itemized[product] != null) {
	itemized[product] += 1;
	} else {
	itemized[product] = 1;
	}
	_updateTotal();
	return itemized;
	}

	void _updateTotal() {
	transactionTotal = 0.0;
	itemized.forEach((k, v) {
	transactionTotal += k.cost * v;
	});
	total.text = costAsCurrency(transactionTotal);
	}
	}

	class Banana {
	final BananaType type;
	final double cost;
	Banana(this.type, this.cost);

	factory Banana.fromStringType(String buttonText) {
	BananaType type;
	double cost;
	switch (buttonText) {
	case ('Plain Banana'):
	type = BananaType.Plain;
	cost = 1.00;
	break;
	case ('Frozen Banana'):
	type = BananaType.Frozen;
	cost = 1.25;
	break;
	case ('Chocolate Banana'):
	type = BananaType.Chocolate;
	cost = 1.50;
	break;
	}
	return new Banana(type, cost);
	}

	@override
	String toString() => this.type.toString().split('.')[1];

	@override
	bool operator ==(Object other) =>
	identical(this, other) \|\|
	other is Banana && runtimeType == other.runtimeType && type == other.type;

	@override
	int get hashCode => type.hashCode;
	}

	String costAsCurrency(double cost) => "\$" + cost.toStringAsFixed(2);

	enum BananaType { Plain, Frozen, Chocolate }
	body {
	background: white;
	color: black;
	font-family: Roboto, sans-serif;
	}

	h1, h2, p {
	margin: 0;
	padding: 0;
	line-height:1.5;
	}

	header {
	padding: 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	main {
	display: grid;
	grid-template-columns: 50% 50%;
	height: 400px;
	}

	main > * {
	padding: 25px;
	}

	.buttons-container {
	background: lightgray;
	display: flex;
	flex-flow: column;
	justify-content: space-between;

	}

	.transaction-container {
	border: 1px solid black;
	display: flex;
	flex-flow: column;
	justify-content: space-between
	}

	.items {
	list-style: none;
	padding: 0;
	}

	.items li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5px;
	height: 30px;
	}

	.items li:nth-child(2) {
	background: lightgrey;
	}

	.total {
	border-top: 1px solid black;
	height: 30px;
	display: flex;
	justify-content: space-between;
	}

	.cost {
	flex: 0 0 50px;
	}

	h1 {
	font-size: 2rem;
	}

	h2 {
	font-size: 1.8rem;
	}


	button {
	cursor: pointer;
	background: slategray;
	border-radius: 4px;
	height: 100px;
	font-size: 2rem;
	color: white;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	}

	button:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	}

	footer {
	display: flex;
	flex-flow:column;
	justify-content: center;
	align-items: center;
	height:150px;
	}

	.finish-button {
	height: 60px;
	font-size: 1.5rem;
	}

	.closing-message {
	visibility: hidden;
	}