Skip to content

Instantly share code, notes, and snippets.

@chalin

chalin/index.html

Forked from Sfshaza/index.html
Last active May 18, 2021 05:57
Show Gist options
  • Save chalin/1d42e4eadb75bcc1ffbc079e299b862e to your computer and use it in GitHub Desktop.
Save chalin/1d42e4eadb75bcc1ffbc079e299b862e 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 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>
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() {
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);
}
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