Sfshaza/index.html

## index.html
<!DOCTYPE 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.
-->

<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">
      </div>
      <div>
        <button id="generateButton">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>

## 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.

// In Step 3 of the code lab (dartlang.org/codelabs/darrrt/),
// you added a button to the app.

import 'dart:html';

ButtonElement genButton;

void main() {
  querySelector('#inputName').onInput.listen(updateBadge);
  genButton = querySelector('#generateButton');
  genButton.onClick.listen(generateBadge);
}

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

  setBadgeName(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('Anne Bonney');
}

void setBadgeName(String newName) {
  querySelector('#badgeName').text = newName;
}

## 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.
	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.
	-->

	<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">
	</div>
	<div>
	<button id="generateButton">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.

	// In Step 3 of the code lab (dartlang.org/codelabs/darrrt/),
	// you added a button to the app.

	import 'dart:html';

	ButtonElement genButton;

	void main() {
	querySelector('#inputName').onInput.listen(updateBadge);
	genButton = querySelector('#generateButton');
	genButton.onClick.listen(generateBadge);
	}

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

	setBadgeName(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('Anne Bonney');
	}

	void setBadgeName(String newName) {
	querySelector('#badgeName').text = newName;
	}
	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;
	}
	}