pratikbutani · March 7, 2023 17:56
diff --git a/readme.md b/readme.md
diff --git a/index.html b/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>
diff --git a/main.dart b/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;
  });
 }
diff --git a/styles.css b/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;
	});
	}