kwalrath/index.html

## index.html
<!DOCTYPE html>

<!-- Copyright 2015 the Dart project authors. All rights reserved.
     Use of this source code is governed by a BSD-style license
     that can be found in the LICENSE file. -->

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
    <title>HTML</title>
    <link rel="stylesheet" href="styles.css">
    <script async src="main.dart" type="application/dart"></script>
    <script async src="packages/browser/dart.js"></script>
</head>

<body>
<h2>Jabberwocky</h2>

<p>
  Lines containing the string
  <span class="searchString">(placeholder)</span>:
</p>
<pre id="jw"></pre>
</body>
</html>

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

main() async {
  const findMe = 'jabberwock';

  // Find an element with the ID "jw".
  var displayer = querySelector('#jw');

  // Get the text to display, and display it.
  var lines = await getLines(findMe);
  lines?.forEach((line) {
    print(line);
    displayer?.text += line + '\n';
  });

  // Find all elements with the class "searchString".
  querySelectorAll('.searchString').forEach((el) {
    // Set each one's text and highlight it.
    el..text = findMe
      ..classes.add('highlighted');
  });
}

// Reads a file, returning its lines.
getLines(String withString) async {
  var jabber = await HttpRequest.getString(
      'https://www.dartlang.org/samples-files/jabberwocky.txt');
  var lines = jabber.split('\n');
  lines.retainWhere((line) =>
      line.toLowerCase().contains(withString));
  return lines;
}

## styles.css
/* Copyright 2015 the Dart project authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style license */
/* that can be found in the LICENSE file. */

p {
  color: #888;
}
a {
  color: cyan;
}
.searchString {
  font-style: italic;
  transition: 1s ease-in;
}
.highlighted {
  color:white;
}
	<!DOCTYPE html>

	<!-- Copyright 2015 the Dart project authors. All rights reserved.
	Use of this source code is governed by a BSD-style license
	that can be found in the LICENSE file. -->

	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="scaffolded-by" content="https://github.com/google/stagehand">
	<title>HTML</title>
	<link rel="stylesheet" href="styles.css">
	<script async src="main.dart" type="application/dart"></script>
	<script async src="packages/browser/dart.js"></script>
	</head>

	<body>
	<h2>Jabberwocky</h2>

	<p>
	Lines containing the string
	<span class="searchString">(placeholder)</span>:
	</p>
	<pre id="jw"></pre>
	</body>
	</html>
	import 'dart:html';

	main() async {
	const findMe = 'jabberwock';

	// Find an element with the ID "jw".
	var displayer = querySelector('#jw');

	// Get the text to display, and display it.
	var lines = await getLines(findMe);
	lines?.forEach((line) {
	print(line);
	displayer?.text += line + '\n';
	});

	// Find all elements with the class "searchString".
	querySelectorAll('.searchString').forEach((el) {
	// Set each one's text and highlight it.
	el..text = findMe
	..classes.add('highlighted');
	});
	}

	// Reads a file, returning its lines.
	getLines(String withString) async {
	var jabber = await HttpRequest.getString(
	'https://www.dartlang.org/samples-files/jabberwocky.txt');
	var lines = jabber.split('\n');
	lines.retainWhere((line) =>
	line.toLowerCase().contains(withString));
	return lines;
	}
	/* Copyright 2015 the Dart project authors. All rights reserved. */
	/* Use of this source code is governed by a BSD-style license */
	/* that can be found in the LICENSE file. */

	p {
	color: #888;
	}
	a {
	color: cyan;
	}
	.searchString {
	font-style: italic;
	transition: 1s ease-in;
	}
	.highlighted {
	color:white;
	}