devallabharath / dom-tree-css

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Logo

This code is written in JavaScript, using the Node.js platform. This tool creates html dom-tree in string format and then writes to an output file, with any existing content being appended to the tree content. This tool eliminates the extra peeking of the html file while writing the css files.

input index.html:

<body>
	<main>
		<svg height="400" width="400">
			<circle r="192" cx="200" cy="200"
				fill="transparent" stroke="#000"
				stroke-width="5" transform="rotate(-90 200 200)"
			/>
		</svg>
		<div id="container">
			<input id="inp" class="input" type="text" value="30"/>
			<button class="start">Start</button>
			<button class="pause">Pause</button>
		</div>
	</main>
	<section></section>
	<script type="module" src="index.js"></script>
</body>

output index.css:

/* Dom Tree: test.html
body
	main
		svg
			circle
		div, #container
			input, #inp, .input
			button, .start
			button, .pause
	section
*/

Usage:


> node index.js -i inputFile -o outputFile

inputFile : [filepath]

  • File must exist.
  • Must be a valid html file.

outputFile : [filepath]

  • File may or may not exist. This tool creates the file if not.
  • Any file. But recommended css file.

About


Languages

Language:JavaScript 89.2%Language:HTML 8.9%Language:CSS 1.9%