chalin/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>It's All About You</title>
    <script defer src="main.dart.js"></script>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1>It's All About You</h1>

    <table>
      <thead>
      <tr>        <th> </th>
        <th>Enter value</th>
        <th>Data type</th>
        <th>JSON string</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td align="right">Favorite number:</td>
        <td><input type="text" id="favoriteNumber"></td>
        <td>integer</td>
        <td><textarea class="result" id="intAsJson" readonly></textarea></td>
      </tr>

      <tr>
        <td align="right">Do you know pi?</td>
        <td><input type="text" id="valueOfPi"></td>
        <td>double</td>
        <td><textarea class="result" id="doubleAsJson" readonly></textarea></td>
      </tr>

      <tr>
        <td align="right">What's your sign?</td>
        <td><input type="text" id="horoscope"></td>
        <td>String</td>
        <td><textarea class="result" id="stringAsJson" readonly></textarea></td>
      </tr>

      <tr>
        <td align="right">A few of your favorite things?</td>
        <td>
          <input type="text" id="favOne">
          <input type="text" id="favTwo">
          <input type="text" id="favThree">
        </td>
        <td>List&lt;String&gt;</td>
        <td><textarea class="result" id="listAsJson" readonly></textarea></td>
      </tr>

      <tr>
        <td align="right">I love chocolate!</td>
        <td>
          <form>
            <input type="radio" name="chocolate" id="loveChocolate" checked>True
            <input type="radio" name="chocolate" id="noLoveForChocolate" checked>False
          </form>
        </td>
        <td>bool</td>
        <td><textarea class="result" id="boolAsJson" readonly> </textarea></td>
      </tr>

      </tbody>
    </table>

    <div>
      <label>All data together as a map</label><br>
      <textarea id="mapAsJson" readonly></textarea>
    </div>
   </body>
</html>

## main.dart
// Copyright (c) 2015, 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.

import 'dart:html';
import 'dart:convert';

// Input fields
InputElement favoriteNumber;
InputElement valueOfPi;
InputElement horoscope;
InputElement favOne;
InputElement favTwo;
InputElement favThree;
RadioButtonInputElement loveChocolate;
RadioButtonInputElement noLoveForChocolate;

// Result fields
TextAreaElement intAsJson;
TextAreaElement doubleAsJson;
TextAreaElement stringAsJson;
TextAreaElement listAsJson;
TextAreaElement boolAsJson;
TextAreaElement mapAsJson;

void main() {
  // Set up the input text areas.
  favoriteNumber = querySelector('#favoriteNumber');
  valueOfPi = querySelector('#valueOfPi');
  horoscope = querySelector('#horoscope');
  favOne = querySelector('#favOne');
  favTwo = querySelector('#favTwo');
  favThree = querySelector('#favThree');
  loveChocolate = querySelector('#loveChocolate');
  noLoveForChocolate = querySelector('#noLoveForChocolate');

  // Set up the results text areas
  // to display the values as JSON.
  intAsJson = querySelector('#intAsJson');
  doubleAsJson = querySelector('#doubleAsJson');
  boolAsJson = querySelector('#boolAsJson');
  stringAsJson = querySelector('#stringAsJson');
  listAsJson = querySelector('#listAsJson');
  mapAsJson = querySelector('#mapAsJson');

  // Set up the listeners.
  favoriteNumber.onKeyUp.listen(showJson);
  valueOfPi.onKeyUp.listen(showJson);
  loveChocolate.onClick.listen(showJson);
  noLoveForChocolate.onClick.listen(showJson);
  horoscope.onKeyUp.listen(showJson);
  favOne.onKeyUp.listen(showJson);
  favTwo.onKeyUp.listen(showJson);
  favThree.onKeyUp.listen(showJson);

  _populateFromJson();
  showJson(null);
}

// Pre-fill the form with some default values.
void _populateFromJson() {
  final jsonDataAsString = '''{
    "favoriteNumber": 73,
    "valueOfPi": 3.141592,
    "chocolate": true,
    "horoscope": "Cancer",
    "favoriteThings": ["monkeys", "parrots", "lattes"]
  }''';

  Map jsonData = json.decode(jsonDataAsString);

  favoriteNumber.value = jsonData['favoriteNumber'].toString();
  valueOfPi.value = jsonData['valueOfPi'].toString();
  horoscope.value = jsonData['horoscope'].toString();
  favOne.value = jsonData['favoriteThings'][0];
  favTwo.value = jsonData['favoriteThings'][1];
  favThree.value = jsonData['favoriteThings'][2];

  final chocolateRadioButton =
      jsonData['chocolate'] == false ? noLoveForChocolate : loveChocolate;
  chocolateRadioButton.checked = true;
}

/// Display all values as JSON.
void showJson(Event _) {
  // Grab the data that will be converted to JSON.
  final favNum = int.tryParse(favoriteNumber.value);
  final pi = double.tryParse(valueOfPi.value);
  final chocolate = loveChocolate.checked;
  final sign = horoscope.value;
  final favoriteThings = <String>[
    favOne.value,
    favTwo.value,
    favThree.value,
  ];

  final formData = {
    'favoriteNumber': favNum,
    'valueOfPi': pi,
    'chocolate': chocolate,
    'horoscope': sign,
    'favoriteThings': favoriteThings
  };

  // Convert to JSON and display results.
  intAsJson.text = json.encode(favNum);
  doubleAsJson.text = json.encode(pi);
  boolAsJson.text = json.encode(chocolate);
  stringAsJson.text = json.encode(sign);
  listAsJson.text = json.encode(favoriteThings);
  mapAsJson.text = json.encode(formData);
}

## 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, td, th, label, table {
  color: #333;
}

table {
  text-align: left;
  border-spacing: 5px 15px
}

label {
  font-weight: bold;
}

textarea {
  resize: none;
}

.result {
  background-color: Ivory;
  padding: 5px 5px 5px 5px;
  border: 1px solid black;
}

#mapAsJson {
  background-color: Ivory;
  padding: 5px 5px 5px 5px;
  margin-top: 15px;
  border: 1px solid black;
  width: 500px;
  height: 50px;
  font-size:14px;
}

table {
  text-align: left;
  border-spacing: 5px 15px
}

label {
  font-weight: bold;
}

textarea {
  resize: none;
}
	<!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>It's All About You</title>
	<script defer src="main.dart.js"></script>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<h1>It's All About You</h1>

	<table>
	<thead>
	<tr> <th> </th>
	<th>Enter value</th>
	<th>Data type</th>
	<th>JSON string</th>
	</tr>
	</thead>

	<tbody>
	<tr>
	<td align="right">Favorite number:</td>
	<td><input type="text" id="favoriteNumber"></td>
	<td>integer</td>
	<td><textarea class="result" id="intAsJson" readonly></textarea></td>
	</tr>

	<tr>
	<td align="right">Do you know pi?</td>
	<td><input type="text" id="valueOfPi"></td>
	<td>double</td>
	<td><textarea class="result" id="doubleAsJson" readonly></textarea></td>
	</tr>

	<tr>
	<td align="right">What's your sign?</td>
	<td><input type="text" id="horoscope"></td>
	<td>String</td>
	<td><textarea class="result" id="stringAsJson" readonly></textarea></td>
	</tr>

	<tr>
	<td align="right">A few of your favorite things?</td>
	<td>
	<input type="text" id="favOne">
	<input type="text" id="favTwo">
	<input type="text" id="favThree">
	</td>
	<td>List<String></td>
	<td><textarea class="result" id="listAsJson" readonly></textarea></td>
	</tr>

	<tr>
	<td align="right">I love chocolate!</td>
	<td>
	<form>
	<input type="radio" name="chocolate" id="loveChocolate" checked>True
	<input type="radio" name="chocolate" id="noLoveForChocolate" checked>False
	</form>
	</td>
	<td>bool</td>
	<td><textarea class="result" id="boolAsJson" readonly> </textarea></td>
	</tr>

	</tbody>
	</table>

	<div>
	<label>All data together as a map</label><br>
	<textarea id="mapAsJson" readonly></textarea>
	</div>
	</body>
	</html>
	// Copyright (c) 2015, 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.

	import 'dart:html';
	import 'dart:convert';

	// Input fields
	InputElement favoriteNumber;
	InputElement valueOfPi;
	InputElement horoscope;
	InputElement favOne;
	InputElement favTwo;
	InputElement favThree;
	RadioButtonInputElement loveChocolate;
	RadioButtonInputElement noLoveForChocolate;

	// Result fields
	TextAreaElement intAsJson;
	TextAreaElement doubleAsJson;
	TextAreaElement stringAsJson;
	TextAreaElement listAsJson;
	TextAreaElement boolAsJson;
	TextAreaElement mapAsJson;

	void main() {
	// Set up the input text areas.
	favoriteNumber = querySelector('#favoriteNumber');
	valueOfPi = querySelector('#valueOfPi');
	horoscope = querySelector('#horoscope');
	favOne = querySelector('#favOne');
	favTwo = querySelector('#favTwo');
	favThree = querySelector('#favThree');
	loveChocolate = querySelector('#loveChocolate');
	noLoveForChocolate = querySelector('#noLoveForChocolate');

	// Set up the results text areas
	// to display the values as JSON.
	intAsJson = querySelector('#intAsJson');
	doubleAsJson = querySelector('#doubleAsJson');
	boolAsJson = querySelector('#boolAsJson');
	stringAsJson = querySelector('#stringAsJson');
	listAsJson = querySelector('#listAsJson');
	mapAsJson = querySelector('#mapAsJson');

	// Set up the listeners.
	favoriteNumber.onKeyUp.listen(showJson);
	valueOfPi.onKeyUp.listen(showJson);
	loveChocolate.onClick.listen(showJson);
	noLoveForChocolate.onClick.listen(showJson);
	horoscope.onKeyUp.listen(showJson);
	favOne.onKeyUp.listen(showJson);
	favTwo.onKeyUp.listen(showJson);
	favThree.onKeyUp.listen(showJson);

	_populateFromJson();
	showJson(null);
	}

	// Pre-fill the form with some default values.
	void _populateFromJson() {
	final jsonDataAsString = '''{
	"favoriteNumber": 73,
	"valueOfPi": 3.141592,
	"chocolate": true,
	"horoscope": "Cancer",
	"favoriteThings": ["monkeys", "parrots", "lattes"]
	}''';

	Map jsonData = json.decode(jsonDataAsString);

	favoriteNumber.value = jsonData['favoriteNumber'].toString();
	valueOfPi.value = jsonData['valueOfPi'].toString();
	horoscope.value = jsonData['horoscope'].toString();
	favOne.value = jsonData['favoriteThings'][0];
	favTwo.value = jsonData['favoriteThings'][1];
	favThree.value = jsonData['favoriteThings'][2];

	final chocolateRadioButton =
	jsonData['chocolate'] == false ? noLoveForChocolate : loveChocolate;
	chocolateRadioButton.checked = true;
	}

	/// Display all values as JSON.
	void showJson(Event _) {
	// Grab the data that will be converted to JSON.
	final favNum = int.tryParse(favoriteNumber.value);
	final pi = double.tryParse(valueOfPi.value);
	final chocolate = loveChocolate.checked;
	final sign = horoscope.value;
	final favoriteThings = <String>[
	favOne.value,
	favTwo.value,
	favThree.value,
	];

	final formData = {
	'favoriteNumber': favNum,
	'valueOfPi': pi,
	'chocolate': chocolate,
	'horoscope': sign,
	'favoriteThings': favoriteThings
	};

	// Convert to JSON and display results.
	intAsJson.text = json.encode(favNum);
	doubleAsJson.text = json.encode(pi);
	boolAsJson.text = json.encode(chocolate);
	stringAsJson.text = json.encode(sign);
	listAsJson.text = json.encode(favoriteThings);
	mapAsJson.text = json.encode(formData);
	}
	body {
	background-color: #F8F8F8;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2em;
	margin: 15px;
	}

	h1, p, td, th, label, table {
	color: #333;
	}

	table {
	text-align: left;
	border-spacing: 5px 15px
	}

	label {
	font-weight: bold;
	}

	textarea {
	resize: none;
	}

	.result {
	background-color: Ivory;
	padding: 5px 5px 5px 5px;
	border: 1px solid black;
	}

	#mapAsJson {
	background-color: Ivory;
	padding: 5px 5px 5px 5px;
	margin-top: 15px;
	border: 1px solid black;
	width: 500px;
	height: 50px;
	font-size:14px;
	}

	table {
	text-align: left;
	border-spacing: 5px 15px
	}

	label {
	font-weight: bold;
	}

	textarea {
	resize: none;
	}