This massive pad contains 0 errors and warnings, and demonstrates use of async and await features. This code has associated html and css. It imports the 'dart:html', 'dart:math', 'dart:convert', and 'dart:async' packages as well. Also, mentions pirates.
Created with <3 with dartpad.dartlang.org.
| Sample uses dartpad as the REPL/IDE. See Dart tour example -- see https://dartpad.dartlang.org/c736f05fd84997783114 |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>pirate-badge-app</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script type="application/dart" src="main.dart"></script> | |
| </head> | |
| <body> | |
| <!-- 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. | |
| --> | |
| <h1>Pirate badge</h1> | |
| <div class="widgets"> | |
| <div> | |
| <input type="text" id="inputName" maxlength="15" disabled> | |
| </div> | |
| <div> | |
| <button id="generateButton" disabled>Aye! Gimme a name!</button> | |
| </div> | |
| </div> | |
| <div class="badge"> | |
| <div class="greeting"> | |
| Arrr! Me name is | |
| </div> | |
| <div class="name"> | |
| <span id="badgeName"> </span> | |
| </div> | |
| </div> | |
| </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. | |
| // This app starts out with almost no Dart code, as described | |
| // in Step 1 of the code lab (dartlang.org/codelabs/darrrt/). | |
| import 'dart:html'; | |
| import 'dart:math' show Random; | |
| import 'dart:convert' show JSON; | |
| import 'dart:async' show Future; | |
| ButtonElement genButton; | |
| SpanElement badgeElement; | |
| main() async { | |
| // Your app starts here. | |
| print('program starts...'); | |
| InputElement inputField = querySelector('#inputName'); | |
| inputField.onInput.listen(updateBadge); | |
| genButton = querySelector('#generateButton'); | |
| genButton.onClick.listen(generateBadge); | |
| badgeElement = querySelector('#badgeName'); | |
| try { | |
| print('waiting for pirates data...'); | |
| await Pirate.getPiratesFromRemote(); | |
| print('Received data!'); | |
| inputField.disabled = false; | |
| genButton.disabled = false; | |
| } catch(error) { | |
| print('Error initializing pirate names: $error'); | |
| badgeElement.text = 'Arrr! No names.'; | |
| } | |
| } | |
| void updateBadge(Event e) { | |
| String badgeName = (e.target as InputElement).value; | |
| setBadgeName(new Pirate(firstName: badgeName)); | |
| if(badgeName.trim().isEmpty) { | |
| genButton..disabled = false | |
| ..text = "Aye! Gimme a name!"; | |
| } else { | |
| genButton..disabled = true | |
| ..text = "Aye! write yer name!"; | |
| } | |
| } | |
| void generateBadge(Event e) { | |
| setBadgeName(new Pirate()); | |
| } | |
| void setBadgeName(Pirate pirate) { | |
| badgeElement.text = pirate.toString(); | |
| } | |
| class Pirate{ | |
| static final Random randIndex = new Random(); | |
| static List names = []; | |
| static List titles = []; | |
| static Future getPiratesFromRemote() async { | |
| final String path = 'https://www.dartlang.org/codelabs/darrrt/files/piratenames.json'; | |
| String response = await HttpRequest.getString(path); | |
| _parseResponse(response); | |
| } | |
| static _parseResponse(String response) { | |
| Map pirateDetails = JSON.decode(response); | |
| names = pirateDetails['names']; | |
| titles = pirateDetails['appellations']; | |
| } | |
| String _firstName; | |
| String _appellation; | |
| Pirate({String firstName, String appellation}) { | |
| _firstName = firstName == null ? names[randIndex.nextInt(names.length)] : firstName; | |
| _appellation = appellation == null ? titles[randIndex.nextInt(titles.length)] : appellation; | |
| } | |
| String get pirateName => _firstName.isEmpty ? '' : '$_firstName the $_appellation'; | |
| String toString() => pirateName; | |
| } |
| body { | |
| background-color: #F8F8F8; | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 14px; | |
| font-weight: normal; | |
| line-height: 1.2em; | |
| margin: 15px; | |
| } | |
| h1, p { | |
| color: #333; | |
| } | |
| .widgets { | |
| padding-bottom: 20pt; | |
| float: left; | |
| } | |
| .badge { | |
| border: 2px solid brown; | |
| border-radius: 1em; | |
| background: red; | |
| font-size: 14pt; | |
| width: 20em; | |
| height: 7em; | |
| text-align: center; | |
| float: left; | |
| margin-left: 20px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .greeting { | |
| color: white; | |
| font-family: sans-serif; | |
| padding: 0.5em; | |
| } | |
| .name { | |
| color: black; | |
| background: white; | |
| font-family: "Marker Felt", cursive; | |
| font-size: 25pt; | |
| padding-top: 1.0em; | |
| padding-bottom: 0.7em; | |
| height: 16px; | |
| } | |
| #generateButton { | |
| font-size: 12pt; | |
| margin-top: 20px; | |
| } | |
| input[type="text"] { | |
| font-size: 12pt; | |
| margin-top: 10pt; | |
| margin-bottom: 10pt; | |
| width: 12em; | |
| } | |
| @media all and (max-width: 500px) { | |
| .badge { | |
| margin-left: 0px; | |
| } | |
| } |