Dart cloud platform-DartPad, dart cloud-dartpad

Dart cloud platform-DartPad, dart cloud-dartpad

If you want to experience the Dart language but do not want to install the Dart Development Environment on your computer, you can use the Dart cloud compilation service-DartPad provided by Google.

DartPad is a free and open source code service that helps developers learn the Dart language. The source code that enters DartPad is sent to Google cloud computing platform for running, the server will compile the source code and process it as JavaScript and return it to the browser. The errors and warnings generated during compilation will also be returned.

Address of DartPad: https://dartpad.dartlang.org/
Because it is a service provided by Google, you need to flip the wall to open the website

The page after opening the website is as follows:

The two links in the lower left corner areDart Official WebsiteAndDart API reference

Copy the following code to the corresponding window, and then click Run.

DART code

Import 'dart: html '; // declare all element objects InputElement toDoInput; UListElement toDoList; ButtonElement deleteAll; void main () {// retrieve all elements toDoInput = querySelector ('# to-do-input'); toDoList = querySelector ("# to-do-list "); deleteAll = querySelector ('# delete-all'); // Add a delegate to toDoInput for the change event of the Element Object toDoInput. onChange. listen (addToDoItem); // Add processing for the Click Event of the Element Object deleteAll: Clear the subelement deleteAll. onClick. listen (e) => toDoList. children. clear ();} // void addToDoItem (Event e) Event processing for the toDoInput change Event {// declare a new element object var newToDo = new LIElement (); // set the text of the current element to the value newToDo of toDoInput. text = toDoInput. value; // Add processing for the Click Event of the current element: Remove newToDo. onClick. listen (e) => newToDo. remove (); // set the toDoInput value of the Element Object toDoInput. value = ''; // set the current element to toDoList. children. add (newToDo );}

HTML code

<! DOCTYPE html> 

CSS code

Body {/* Set font */font-family: 'opensans ', Sans-serif;/* set the background color */background-color: WhiteSmoke; /* set the margin */margin: 15px;} # to-do-input {/* set the font */font-family: 'Open Sans ', sans-serif; /* set the font size */font-size: 14px;/* set the font width */font-weight: normal;/* set the padding: Top right bottom left */padding: 5px 0px 5px 5px;/* Set width */width: 100%;/* set border */border: 1px solid Silver;/* Set background color */background-color: white ;}# to-do-list {/* set the padding */padding: 0px;/* set the margin */margin: 0px; /* set where to place the list item mark */list-style-position: inside;} # to-do-list li {/* set the padding: top right bottom left */padding: 5px 0px 5px 5px;/* Set bottom border */border-bottom: 1px dotted Silver;} # to-do-list li: hover {/* set color */color: red;/* Set font size */font-size: 18px;/* set the type (SHAPE) of the cursor */cursor: pointer;} # delete-all {/* set the background color */background-color: # F8F8F8;/* set the border */border: 1px dotted # ccc; /* set the rounded border */border-radius: 1em;/* float to the right */float: right;} # delete-all: hover {/* set the background color */background-color: # ddd ;}

After the execution, the page on the right will return the compiled code result, as shown in figure

A simple Dart project is completed in this way. It is a simple process and you do not need to install anything on your computer. Dart officially recommends using DartPad for study and WebStorm for development.

WebStorm-related portals: http://blog.csdn.net/hekaiyou/article/details/46551179

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.