added shout example

marycampione · marycampione · commit 27e5ab25256b · 2012-12-13T15:35:12.000-08:00
diff --git a/web/target06/shout/build.dart b/web/target06/shout/build.dart
@@ -0,0 +1,6 @@
+import 'package:web_ui/component_build.dart';
+import 'dart:io';
+
+void main() {
+  build (new Options().arguments, ['web/shout.html']);
+}
diff --git a/web/target06/shout/pubspec.yaml b/web/target06/shout/pubspec.yaml
@@ -0,0 +1,5 @@
+name:  Shout
+description:  Shout! Shout! Let it all out!
+
+dependencies:
+  web_ui: any
diff --git a/web/target06/shout/web/shout.css b/web/target06/shout/web/shout.css
@@ -0,0 +1,32 @@
+
+body {
+  background-color: #F8F8F8;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.5em;
+  margin: 15px;
+}
+
+p {
+  color: #333;
+}
+
+input {
+  padding: 5px;
+  margin: 20px 0px 20px 0px;
+}
+  
+#container {
+  width: 100%;
+  height: 400px;
+  position: relative;
+  border: 1px solid #ccc;
+  background-color: #fff;
+}
+
+#text {
+  font-size: 24pt;
+  text-align: center;
+  margin-top: 140px;
+}
diff --git a/web/target06/shout/web/shout.dart b/web/target06/shout/web/shout.dart
@@ -0,0 +1,14 @@
+import 'package:web_ui/watcher.dart' as watchers;
+String shoutThis='';
+
+void main() {
+}
+
+String palindrome() {
+  var buffer = new StringBuffer(shoutThis);
+  for (int i = shoutThis.length - 1; i >= 0; i--) {
+    buffer.add(shoutThis[i]);
+  }
+  shoutThis = buffer.toString();
+  return buffer.toString();
+}
diff --git a/web/target06/shout/web/shout.html b/web/target06/shout/web/shout.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Shout This!</title>
+    <link rel="stylesheet" href="shout.css">
+  </head>
+  <body>
+    <h1>Shout This!</h1>
+
+      <input type="text" bind-value="shoutThis" placeholder="Shout This!">
+        
+      <div>      Length: {{ shoutThis.length }} </div>
+      <div>     Shouted: {{ shoutThis.toUpperCase() }} </div>
+      <div>   Substring: {{ (shoutThis.length >= 6) ?
+                             shoutThis.substring(1, 5) :
+                             shoutThis.substring(0, 0) }} </div>
+      <div> Palindromic: {{ palindrome() }} </div>
+      <div> Palindromic: {{ [1,2,3,4].reduce(0, (a, b) => a + b) }} </div>
+      
+    <script type="application/dart" src="shout.dart"></script>
+    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
+  </body>
+</html>
