Sfshaza · August 29, 2015 14:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <!--
  Copyright (c) 2012, the Dart project authors.
  see the AUTHORS file for details.
  All rights reserved. Use of this source code
  is governed by a BSD-style license that can be
  found in the LICENSE file.
 -->

 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pirate badge</title>
    <script async type="application/dart" src="main.dart"></script>
    <script async src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1>Pirate badge</h1>

    <div class="widgets">
      <div>
        <input type="text" id="inputName" maxlength="15" disabled>
      </div>
      <div>
        <button id="generateButton" disabled>Aye! Gimme a name!</button>
      </div>
    </div>
    <div class="badge">
      <div class="greeting">
        Arrr! Me name is
      </div>
      <div class="name">
        <span id="badgeName"> </span>
      </div>
    </div>
  </body>
 </html>
diff --git a/main.dart b/main.dart
 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.

 // Demonstrates:
 // list, maps, random, strings, string interpolation
 // cascade, fat arrow, ternary operator
 // named constructors
 // optional parameters
 // a class
 // getters
 // static class-level methods/fields
 // top-level variables and functions
 // typecasting with 'as'
 // import, also with show
 // dart:core, html, math, convert and async libraries

 // In Step 5 of the code lab (dartlang.org/codelabs/darrrt/),
 // you read the pirate names from a JSON file.

 import 'dart:html';
 import 'dart:math' show Random;
 import 'dart:convert' show JSON;
 import 'dart:async' show Future;

 ButtonElement genButton;
 SpanElement badgeNameElement;

 main() async {
  InputElement inputField = querySelector('#inputName');
  inputField.onInput.listen(updateBadge);
  genButton = querySelector('#generateButton');
  genButton.onClick.listen(generateBadge);

  badgeNameElement = querySelector('#badgeName');

  try {
    await PirateName.readyThePirates();
    // on success
    inputField.disabled = false; //enable
    genButton.disabled = false; //enable
  } catch (arrr) {
    print('Error initializing pirate names: $arrr');
    badgeNameElement.text = 'Arrr! No names.';
  }
 }

 void updateBadge(Event e) {
  String inputName = (e.target as InputElement).value;

  setBadgeName(new PirateName(firstName: inputName));
  if (inputName.trim().isEmpty) {
    genButton
      ..disabled = false
      ..text = 'Aye! Gimme a name!';
  } else {
    genButton
      ..disabled = true
      ..text = 'Arrr! Write yer name!';
  }
 }

 void generateBadge(Event e) {
  setBadgeName(new PirateName());
 }

 void setBadgeName(PirateName newName) {
  if (newName == null) return;

  badgeNameElement.text = newName.pirateName;
 }

 class PirateName {
  static final Random indexGen = new Random();

  static List<String> names = [];
  static List<String> appellations = [];

  String _firstName;
  String _appellation;

  PirateName({String firstName, String appellation}) {
    if (firstName == null) {
      _firstName = names[indexGen.nextInt(names.length)];
    } else {
      _firstName = firstName;
    }
    if (appellation == null) {
      _appellation =
          appellations[indexGen.nextInt(appellations.length)];
    } else {
      _appellation = appellation;
    }
  }

  String toString() => pirateName;

  String get pirateName =>
      _firstName.isEmpty ? '' : '$_firstName the $_appellation';

  static Future readyThePirates() async {
    String path =
        'https://www.dartlang.org/codelabs/darrrt/files/piratenames.json';
    String jsonString = await HttpRequest.getString(path);
    _parsePirateNamesFromJSON(jsonString);
  }

  static void _parsePirateNamesFromJSON(String jsonString) {
    Map pirateNames = JSON.decode(jsonString);
    names = pirateNames['names'];
    appellations = pirateNames['appellations'];
  }
 }
diff --git a/styles.css b/styles.css
 body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
 }

 h1, p {
  color: #333;
 }
 .widgets {
  padding-bottom: 20pt;
  float: left;
 }
 .badge {
  border: 2px solid brown;
  border-radius: 1em;
  background: red;
  font-size: 14pt;
  width: 14em;
  height: 7em;
  text-align: center;
  float: left;
  margin-left: 20px;
  white-space: nowrap;
  overflow: hidden;
 }
 .greeting {
  color: white;
  font-family: sans-serif;
  padding: 0.5em;
 }
 .name {
  color: black;
  background: white;
  font-family: "Marker Felt", cursive;
  font-size: 25pt;
  padding-top: 1.0em;
  padding-bottom: 0.7em;
  height: 16px;
 }
 #generateButton {
  font-size: 12pt;
  margin-top: 20px;
 }
 input[type="text"] {
  font-size: 12pt;
  margin-top: 10pt;
  margin-bottom: 10pt;
  width: 12em;
 }
 @media all and (max-width: 500px) {
  .badge {
    margin-left: 0px;
  }
 }
	<!DOCTYPE html>

	<!--
	Copyright (c) 2012, the Dart project authors.
	see the AUTHORS file for details.
	All rights reserved. Use of this source code
	is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pirate badge</title>
	<script async type="application/dart" src="main.dart"></script>
	<script async src="packages/browser/dart.js"></script>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<h1>Pirate badge</h1>

	<div class="widgets">
	<div>
	<input type="text" id="inputName" maxlength="15" disabled>
	</div>
	<div>
	<button id="generateButton" disabled>Aye! Gimme a name!</button>
	</div>
	</div>
	<div class="badge">
	<div class="greeting">
	Arrr! Me name is
	</div>
	<div class="name">
	<span id="badgeName"> </span>
	</div>
	</div>
	</body>
	</html>
	// Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
	// for details. All rights reserved. Use of this source code is governed by a
	// BSD-style license that can be found in the LICENSE file.

	// Demonstrates:
	// list, maps, random, strings, string interpolation
	// cascade, fat arrow, ternary operator
	// named constructors
	// optional parameters
	// a class
	// getters
	// static class-level methods/fields
	// top-level variables and functions
	// typecasting with 'as'
	// import, also with show
	// dart:core, html, math, convert and async libraries

	// In Step 5 of the code lab (dartlang.org/codelabs/darrrt/),
	// you read the pirate names from a JSON file.

	import 'dart:html';
	import 'dart:math' show Random;
	import 'dart:convert' show JSON;
	import 'dart:async' show Future;

	ButtonElement genButton;
	SpanElement badgeNameElement;

	main() async {
	InputElement inputField = querySelector('#inputName');
	inputField.onInput.listen(updateBadge);
	genButton = querySelector('#generateButton');
	genButton.onClick.listen(generateBadge);

	badgeNameElement = querySelector('#badgeName');

	try {
	await PirateName.readyThePirates();
	// on success
	inputField.disabled = false; //enable
	genButton.disabled = false; //enable
	} catch (arrr) {
	print('Error initializing pirate names: $arrr');
	badgeNameElement.text = 'Arrr! No names.';
	}
	}

	void updateBadge(Event e) {
	String inputName = (e.target as InputElement).value;

	setBadgeName(new PirateName(firstName: inputName));
	if (inputName.trim().isEmpty) {
	genButton
	..disabled = false
	..text = 'Aye! Gimme a name!';
	} else {
	genButton
	..disabled = true
	..text = 'Arrr! Write yer name!';
	}
	}

	void generateBadge(Event e) {
	setBadgeName(new PirateName());
	}

	void setBadgeName(PirateName newName) {
	if (newName == null) return;

	badgeNameElement.text = newName.pirateName;
	}

	class PirateName {
	static final Random indexGen = new Random();

	static List<String> names = [];
	static List<String> appellations = [];

	String _firstName;
	String _appellation;

	PirateName({String firstName, String appellation}) {
	if (firstName == null) {
	_firstName = names[indexGen.nextInt(names.length)];
	} else {
	_firstName = firstName;
	}
	if (appellation == null) {
	_appellation =
	appellations[indexGen.nextInt(appellations.length)];
	} else {
	_appellation = appellation;
	}
	}

	String toString() => pirateName;

	String get pirateName =>
	_firstName.isEmpty ? '' : '$_firstName the $_appellation';

	static Future readyThePirates() async {
	String path =
	'https://www.dartlang.org/codelabs/darrrt/files/piratenames.json';
	String jsonString = await HttpRequest.getString(path);
	_parsePirateNamesFromJSON(jsonString);
	}

	static void _parsePirateNamesFromJSON(String jsonString) {
	Map pirateNames = JSON.decode(jsonString);
	names = pirateNames['names'];
	appellations = pirateNames['appellations'];
	}
	}
	body {
	background-color: #F8F8F8;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2em;
	margin: 15px;
	}

	h1, p {
	color: #333;
	}
	.widgets {
	padding-bottom: 20pt;
	float: left;
	}
	.badge {
	border: 2px solid brown;
	border-radius: 1em;
	background: red;
	font-size: 14pt;
	width: 14em;
	height: 7em;
	text-align: center;
	float: left;
	margin-left: 20px;
	white-space: nowrap;
	overflow: hidden;
	}
	.greeting {
	color: white;
	font-family: sans-serif;
	padding: 0.5em;
	}
	.name {
	color: black;
	background: white;
	font-family: "Marker Felt", cursive;
	font-size: 25pt;
	padding-top: 1.0em;
	padding-bottom: 0.7em;
	height: 16px;
	}
	#generateButton {
	font-size: 12pt;
	margin-top: 20px;
	}
	input[type="text"] {
	font-size: 12pt;
	margin-top: 10pt;
	margin-bottom: 10pt;
	width: 12em;
	}
	@media all and (max-width: 500px) {
	.badge {
	margin-left: 0px;
	}
	}