Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(389)

Unified Diff: src/site/docs/tutorials/remove-elements/index.markdown

Issue 26542002: edit pass on T3,4,5, updated images (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: merging with master Created 7 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: src/site/docs/tutorials/remove-elements/index.markdown
diff --git a/src/site/docs/tutorials/remove-elements/index.markdown b/src/site/docs/tutorials/remove-elements/index.markdown
index dd949c4e108f598c954425fe35a160da81b92268..6852d2c665a055d1b80fec9a8ab4741a0526f96f 100644
--- a/src/site/docs/tutorials/remove-elements/index.markdown
+++ b/src/site/docs/tutorials/remove-elements/index.markdown
@@ -18,18 +18,17 @@ prev-title: "Add Elements to the DOM"
* Function expressions are a convenient way to define single-use functions.
* => is a shorthand syntax for defining functions that contain just one
expression.
-* dart:html defines many event-related classes.
{% endcapture %}
{% capture sample_links %}
<p>
-Get the source code for the sample featured in this target:</p>
+Get the source code for the sample featured in this tutorial:</p>
<ul>
<li>
- <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target04/todo_with_delete"
+ <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/remove-elements/todo_with_delete"
target="_blank">todo_with_delete</a>
</li>
</ul>
@@ -43,9 +42,9 @@ Get the source code for the sample featured in this target:</p>
<h3>Dynamically delete items from the browser page.</h3>
</div>
-This target shows you how to delete elements from the DOM.
+This tutorial shows you how to delete elements from the DOM.
A new and improved version of the todo app from
-[the previous target](/docs/tutorials/add-elements/)
+[the previous tutorial](/docs/tutorials/add-elements/)
now allows the user to delete items from the list
either one at a time, or all at once.
@@ -55,13 +54,14 @@ either one at a time, or all at once.
* [Removing all child elements from an element](#remove-all-elem)
* [About function expressions and =>](#about-function-expressions)
* [Other resources](#other-resources)
+* [What next?](#what-next)
##Try the app {#try-app}
Below is a revised version
-of the todo app from the previous target
+of the todo app from the previous tutorial
that allows you to delete items.
-Stop procrastinating and remove items from your todo list.
+Stop procrastinating and remove items from your to do list.
**Try it!**
Type in the input field and press the return key;
@@ -70,21 +70,21 @@ Enter a few more items.
Point the mouse cursor at one of the items in the list;
the item turns red and gets slightly larger.
Click it and it disappears from the list.
-Use the **Delete All** button in the lower right corner of the app
+Use the **Delete All** button
to remove all of the items in the list at once.
<iframe class="running-app-frame"
style="height:250px;width:300px;"
- src="http://dart-lang.github.io/dart-tutorials-samples/web/target04/todo_with_delete/web/todo_with_delete.html">
+ src="examples/todo_with_delete/todo_with_delete.html">
</iframe>
You can find the complete source code for this sample on github at
-<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target04/todo_with_delete"
+<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/remove-elements/todo_with_delete"
target="_blank">todo_with_delete</a>.
The remaining sections describe
key aspects of the code
-added to the todo app for this target.
+added to the todo app for this tutorial.
Specifically, they look at
the Dart code that removes one or more elements from the DOM
and the CSS code that makes the text red and larger.
@@ -117,7 +117,9 @@ to keep the code simpler.
An element is removed from
the DOM when it is removed from its parent's list of children.
-The List class provides functions for finding an item in the list
+The
+<a href="https://api.dartlang.org/dart_core/List.html" target="_blank">List</a>
+class provides functions for finding an item in the list
and removing it.
But, in this case,
using the element's remove() function
@@ -131,7 +133,8 @@ the user clicks an item to delete it.
This is achieved with one line of Dart code.
When a new to do item is created,
the code registers a mouse click handler on the new element.
-The event handler causes the element to remove itself from the DOM
+When the user clicks that new element,
+its event handler causes the element to remove itself from the DOM
with remove().
![Registering an event handler to delete an item](images/remove-element-code.png)
@@ -233,12 +236,24 @@ it returns no value and takes an Event object as a parameter.
<li>
You can find more information about the DOM and CSS in
- <a href="/docs/dart-up-and-running/">Dart Up and Running</a>,
+ <a href="/docs/dart-up-and-running/">Dart: Up and Running</a>,
which also provides thorough coverage of the Dart language,
libraries, and tools.
</li>
</ul>
+##What next? {#what-next}
+
+* The next tutorial,
+[Install Shared Packages](/docs/tutorials/shared-pkgs),
+shows you how to use code written and shared by others.
+
+* One of those packages is Polymer.dart,
+which makes manipulating the DOM even easier
+with data binding, templates, and declarative event handlers.
+Check out [Define a Custom Element](/docs/tutorials/polymer-intro)
+for an introduction to Polymer.
+
{% endcapture %}
{% include tutorial.html %}

Powered by Google App Engine
This is Rietveld 408576698