pratikbutani/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Dart with HTML & CSS

Created with <3 with dartpad.dev.

  
## index.html
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dart + HTML + CSS Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Click the button to change the color of the text!</h1>
    <br><br>
    <button id="colorButton">Change color</button>

  </body>
</html>

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

void main() {
  var colorButton = querySelector('#colorButton');
  var h1 = querySelector('h1');
  var colors = ['red', 'green', 'blue'];
  var currentColorIndex = 0;

  colorButton?.onClick.listen((event) {
    h1?.style.color = colors[currentColorIndex];
    currentColorIndex = (currentColorIndex + 1) % colors.length;
  });
}

## styles.css
h1 {
  color: black;
}

body {
  font-family: sans-serif;
  text-align: center;
  margin-top: 50px;
}
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Dart + HTML + CSS Example</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
	<h1>Click the button to change the color of the text!</h1>
	<br><br>
	<button id="colorButton">Change color</button>

	</body>
	</html>
	import 'dart:html';

	void main() {
	var colorButton = querySelector('#colorButton');
	var h1 = querySelector('h1');
	var colors = ['red', 'green', 'blue'];
	var currentColorIndex = 0;

	colorButton?.onClick.listen((event) {
	h1?.style.color = colors[currentColorIndex];
	currentColorIndex = (currentColorIndex + 1) % colors.length;
	});
	}
	h1 {
	color: black;
	}

	body {
	font-family: sans-serif;
	text-align: center;
	margin-top: 50px;
	}