haxe/api/haxe_js_node/README.md

# Haxe project

This is an example Haxe project scaffolded.

 * `src/Main.hx`: Entry point Haxe source file
 * `build.hxml`: Haxe command line file used to build the project
 * `README.md`: This file


## Notes

```
import js.lib.Object;
import js.html.Document;
import js.*;
import haxe.Template;

import js.html.EffectTiming;
import js.html.Clients;
import js.html.Client;
import js.html.eme.MediaEncryptedEvent;
import js.html.Window;
import js.html.CanvasElement;


class Main {
	static function main() {
		// Syntax.code("
		// 	let all = document.queryC:\Users\user\source\git_loc\hexe\zuikiuuSelectorAll('*');
		// 	for(var i=0;i<el.length;i++){
		// 		all[i].style.margin = '0px';
		// 		all[i].style.padding = '0px';
		// 	}
		// ");

		// var all = Browser.document.querySelectorAll("*");
		// for (i in 0...all.length) {
		// 	trace(all[i]);
		// 	all[i].normalize;
		// 	all[i].
		// };


		var sample = "My name is <strong>::name::</strong>, <em>::age::</em> years old";
		var user = {name: "Mark", age: 30};
		var template = new haxe.Template(sample);
		var output = template.execute(user);
		trace(output);

		var doc = Browser.window.document;
		var html = Browser.document.getElementsByTagName("html");
		var htmlStyle = html[0].style;
		htmlStyle.width = "100vw";
		htmlStyle.height = "100vh";
		htmlStyle.display = "flex";

		// var mainDiv

		var template = Browser.document.createDivElement();

		var nav = Browser.document.createElement("nav");
		var navStyle = nav.style;
		navStyle.backgroundColor = "#C14907";
		navStyle.width = "100vw";
		navStyle.height = "200px";
		Browser.document.body.appendChild(nav);
		
		var aside = Browser.document.createElement("aside");
		var asideStyle = aside.style;
		asideStyle.width = "200px";
		asideStyle.height = "200px";
		// asideStyle.display = "inline-block";
		// asideStyle.justifyContent = "center";
		asideStyle.backgroundColor = "#DA9EFB";
		Browser.document.body.appendChild(aside);

		var myLista = 
		'
			<ul>
				<li>
					<span>Span</span>
				</li>
				<li>
					<button id="haxe" type="button">Haxe</button>
					</li>
				<li>
					<button id="godot" type="button">Godot</button>
				</li>
			</ul>
		';

		var haxe = Browser.document.getElementById("haxe");
		// haxe.addEventListener()
		// 1 Agregar html con template
		// 3 Agregar el texto completo en el div
		// 4 Agregar divs, con inner html
		// 5 formas. Agregar el html con templates o con divs|

		// 5 Agregar templates con divs, El estylo con clases queris y for in
		// 0 Crear el div
		// 1 Agregar la clase
		// 2 Agregar el estylo
		// 3 Agregar el template
		// 4 Agregarlo al html inner
		
		// ? Agregar el div
		// ? Agregar la clase
		// ? Agregar el estylo
		var divH1 = Browser.document.createDivElement();
		divH1.setAttribute("id", "divH1");
		var divH1IdSyle = Browser.document.getElementById("divH1");
		// divH1IdSyle.style

		// ? Agregar el texto
		// ? Comprimir eltexto
		var textH1 = "<h1>Notas Haxe ::notas::</h1>";
		var textH1Trim = StringTools.ltrim(textH1);
		
		// ? Agregar el template
		var textH1TrimTemplate = new haxe.Template(textH1Trim);
		var notas = {notas: 10};
		var notasTemplate = textH1TrimTemplate.execute(notas);
		// ? Imprimir el template
		template.innerHTML = notasTemplate;


				// // Tomamos la lista
		// var myLista = "
		// <ul>
		// <li>::name::</li>
		// </ul>
		// ";
		// // Lo comprimimos
		// var myListaTrim = StringTools.ltrim(myLista);
		
		// // Agregamos la funcionalidad
		// var user = {name: "Mark"};
		
		// // Agregamos la funcionalidad
		// var templates = new haxe.Template(myListaTrim);

		// var output = templates.execute(user);

		// template.textContent = output;
		// template.innerHTML = output;

		var ul = Browser.document.createElement('ul');
		var li = Browser.document.createElement('li');

		li.appendChild(Browser.document.createTextNode("Four"));
		ul.appendChild(li);
		Browser.document.body.appendChild(ul);

		ul.innerHTML = myLista;


		var section = Browser.document.createElement("section");
		var sectionStyle = section.style;
		sectionStyle.backgroundColor = "#0749C1";
		sectionStyle.width = "200px";
		sectionStyle.height = "100px";
		// sectionStyle.display = "flex";
		// sectionStyle.display = "inline-block";
		// sectionStyle.justifyContent = "center";
		Browser.document.body.appendChild(section);
		section.appendChild(template);
		
		
		var footer = Browser.document.createElement("footer");
		var footerStyle = footer.style;
		footerStyle.backgroundColor = "#F7B63D";
		footerStyle.width = "100vw";
		footerStyle.height = "200px";
		Browser.document.body.appendChild(footer);
		



		// var template = Browser.document.createDivElement();
		// var templateStyle = template.style;
		// templateStyle.backgroundColor = "#819830";
		// templateStyle.width = "100vw";
		// templateStyle.height = "100px";


		// // Browser.document.body.firstElementChild(template);
		// // Browser.document.body.firstElementChild(template);

		// // Tomamos la lista
		// var myLista = "
		// <ul>
		// <li>::name::</li>
		// </ul>
		// ";
		// // Lo comprimimos
		// var myListaTrim = StringTools.ltrim(myLista);
		
		// // Agregamos la funcionalidad
		// var user = {name: "Mark"};
		
		// // Agregamos la funcionalidad
		// var templates = new haxe.Template(myListaTrim);

		// var output = templates.execute(user);

		// template.textContent = output;
		// template.innerHTML = output;

		
		// Browser.document.body.appendChild(template);
	}
}

class Notas {

}
```