import 'dart:html'; |
import DOM |
import 'dart:async'; |
import timer |
Create variables using html |
ButtonElement btn = querySelector('#myButton') as ButtonElement; |
|
connect button with id myButton to the btn variable |
ParagraphElement output = querySelector('#output') as ParagraphElement; |
|
connect button with id output to the output variable |
DivElement divc = querySelector('#divv') as DivElement; |
|
connect container with id divv to the divc variable |
FormElement form = querySelector('#myForm') as FormElement; |
|
connect form with id myForm to the form variable |
working with html variables |
btn.onClick.listen((MouseEvent e) { code }); |
|
listen the button |
output.text = 'Pressed!'; |
|
Add text to output variable |
output.style.color = 'blue'; |
|
add style to output element |
output.id = 'asd'; |
|
add id to the object |
container.style.display = 'block'; |
container-name | none or block |
|
show/hide element |
|
ParagraphElement newElem = ParagraphElement() |
TAB ..id = 'newParagraph' |
TAB ..text = 'new text'; |
container.append(newElem); |
container - name of container | newElem - name of variable |
Create paragraph with teg and text |
|
Future.delayed(Duration(seconds: 2), () { code }); |
|
2sec timer |
|
window.onKeyDown.listen((KeyboardEvent event) { code }); |
output.text = 'Key: ${event.code}'; |
hearing key pressing and print the key |
|
form.onSubmit.listen((Event e) { |
TAB e.preventDefault(); |
TAB InputElement nameInput = querySelector('#name') as InputElement; |
TAB InputElement emailInput = querySelector('#email') as InputElement; |
TAB String name = nameInput.value ?? ''; |
TAB String email = emailInput.value ?? ''; |
}); |
|
form |