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>Portmanteaux</title>
  <script defer src="main.dart.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Portmanteaux</h1>
  <button id="getWords">Get portmanteaux</button>
  <ul id="wordList"></ul>
</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.

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

UListElement wordList = querySelector('#wordList');

void main() {
  querySelector('#getWords').onClick.listen(makeRequest);
}

Future<void> makeRequest(Event _) async {
  const path = 'https://www.dartlang.org/f/portmanteaux.json';
  final httpRequest = HttpRequest();
  httpRequest
    ..open('GET', path)
    ..onLoadEnd.listen((e) => requestComplete(httpRequest))
    ..send('');
}

void requestComplete(HttpRequest request) {
  switch (request.status) {
    case 200:
      processResponse(request.responseText);
      return;
    default:
      final li = LIElement()..text = 'Request failed, status=${request.status}';
      wordList.children.add(li);
  }
}

void processResponse(String jsonString) {
  for (final portmanteau in json.decode(jsonString)) {
    wordList.children.add(LIElement()..text = portmanteau);
  }
}

## 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, li { color: #333; }
	<!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>Portmanteaux</title>
	<script defer src="main.dart.js"></script>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<h1>Portmanteaux</h1>
	<button id="getWords">Get portmanteaux</button>
	<ul id="wordList"></ul>
	</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.

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

	UListElement wordList = querySelector('#wordList');

	void main() {
	querySelector('#getWords').onClick.listen(makeRequest);
	}

	Future<void> makeRequest(Event _) async {
	const path = 'https://www.dartlang.org/f/portmanteaux.json';
	final httpRequest = HttpRequest();
	httpRequest
	..open('GET', path)
	..onLoadEnd.listen((e) => requestComplete(httpRequest))
	..send('');
	}

	void requestComplete(HttpRequest request) {
	switch (request.status) {
	case 200:
	processResponse(request.responseText);
	return;
	default:
	final li = LIElement()..text = 'Request failed, status=${request.status}';
	wordList.children.add(li);
	}
	}

	void processResponse(String jsonString) {
	for (final portmanteau in json.decode(jsonString)) {
	wordList.children.add(LIElement()..text = portmanteau);
	}
	}
	body {
	background-color: #F8F8F8;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2em;
	margin: 15px;
	}

	h1, p, li { color: #333; }