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>It's All About You</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>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() {

  String 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];

  if (jsonData['chocolate']) {
    loveChocolate.checked = true;
  } else {
    noLoveForChocolate.checked = true;
  }
}

// Display all values as JSON.
void showJson(Event e) {

  // Grab the data that will be converted to JSON.
  num favNum = int.parse(favoriteNumber.value);
  num pi = double.parse(valueOfPi.value);
  bool chocolate = loveChocolate.checked;
  String sign = horoscope.value;
  List<String> favoriteThings =
      [ favOne.value, favTwo.value, favThree.value ];

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

  // Convert everything to JSON and
  // display the 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 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>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() {

	String 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];

	if (jsonData['chocolate']) {
	loveChocolate.checked = true;
	} else {
	noLoveForChocolate.checked = true;
	}
	}

	// Display all values as JSON.
	void showJson(Event e) {

	// Grab the data that will be converted to JSON.
	num favNum = int.parse(favoriteNumber.value);
	num pi = double.parse(valueOfPi.value);
	bool chocolate = loveChocolate.checked;
	String sign = horoscope.value;
	List<String> favoriteThings =
	[ favOne.value, favTwo.value, favThree.value ];

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

	// Convert everything to JSON and
	// display the 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;
	}