mannuelf/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    email-validation-with-streams

Created with <3 with dartpad.dev.

  
## index.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>email-validation-with-streams</title>
    <link rel="stylesheet" href="styles.css">
    <script type="application/dart" src="main.dart"></script>
  </head>

  <body>
    <h1 id="header"></h1>
<input/>
<div style="color: red;"></div>
  </body>
</html>

## main.dart
import 'dart:html';
import 'dart:async';

void main() {
  final header = querySelector('#header');
  final div = querySelector('div') as DivElement;
  final input = querySelector('input') as InputElement;

  final validateEmail =
      StreamTransformer.fromHandlers(handleData: (String inputValue, sink) {
    if (inputValue.contains('@')) {
      sink.add(inputValue);
    } else {
      sink.addError('Enter a valid email');
    }
  });

  header?.text = "Enter your email";

  input.onInput
      .map((dynamic event) => event.target.value)
      .transform(validateEmail).listen((inputValue) => div.innerHtml = '',
          onError: (err) => div.innerHtml = err);
}

## styles.css
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

h1 {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>email-validation-with-streams</title>
	<link rel="stylesheet" href="styles.css">
	<script type="application/dart" src="main.dart"></script>
	</head>

	<body>
	<h1 id="header"></h1>
	<input/>
	<div style="color: red;"></div>
	</body>
	</html>
	import 'dart:html';
	import 'dart:async';

	void main() {
	final header = querySelector('#header');
	final div = querySelector('div') as DivElement;
	final input = querySelector('input') as InputElement;

	final validateEmail =
	StreamTransformer.fromHandlers(handleData: (String inputValue, sink) {
	if (inputValue.contains('@')) {
	sink.add(inputValue);
	} else {
	sink.addError('Enter a valid email');
	}
	});

	header?.text = "Enter your email";

	input.onInput
	.map((dynamic event) => event.target.value)
	.transform(validateEmail).listen((inputValue) => div.innerHtml = '',
	onError: (err) => div.innerHtml = err);
	}
	body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	}

	h1 {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	}