Skip to content

Instantly share code, notes, and snippets.

@Sfshaza

Sfshaza/index.html

Last active June 26, 2018 13:13
Show Gist options
  • Save Sfshaza/245c841595786300b3f4 to your computer and use it in GitHub Desktop.
Save Sfshaza/245c841595786300b3f4 to your computer and use it in GitHub Desktop.
Download ZIP
its_all_about_you
Raw
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>
Raw
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);
}
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment