Skip to content

Instantly share code, notes, and snippets.

@PracticalCode
Created August 13, 2018 14:13
Show Gist options
  • Save PracticalCode/6a729e6793e6b431d1a0a545a4df3a13 to your computer and use it in GitHub Desktop.
Save PracticalCode/6a729e6793e6b431d1a0a545a4df3a13 to your computer and use it in GitHub Desktop.
HelloWorldFancy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World - Fancy Example</title>
<link rel="stylesheet" href="helloworldfancy.css">
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
<input type="text" id="name_box">
<input type="submit" value="Say Hello" id="button">
<script type="application/dart" src="helloworldfancy.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
// Copyright 2014 David Kopec
// Created for Dart for Absolute Beginners, an Apress title
// This source code is released under the terms outlined in license.txt in the
// source code respository's root directory.
import 'dart:html';
void main() {
querySelector("#button").onClick.listen(sayHello);
}
void sayHello(MouseEvent event) {
querySelector("#name").text = (querySelector("#name_box") as InputElement).value;
(querySelector("#name_box") as InputElement).value = "";
}
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;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
#sample_text_id {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment