Echo-js
Tags: html, attributes, echo, code
Published: 2021-04-04 21:01:01

---
title: Echo-js
published: true
description: My first article about a tool I wrote
tags: HTML, attributes, echo, code
//cover_image: https://direct_url_to_image.jpg
---

I have chosen to write my first article about a tool I wrote.

[Echo-js](https://github.com/tygari/echo-js) is a tool for creating / rearranging /deleting repetitive children within a parent element dynamically within the HTML DOM.

In my coding, I kept coming across cases where I needed to quickly and easily write many repetitive element children, rearrange those children, and sometimes delete specific children.

I had heard about some such tools within frameworks, but I was still working on learning the core language.  I wasn't ready to tackle tricky and confusing frameworks, yet nothing existed in the core language for what felt like a simple task.

Over time I developed complex functions to accomplish this but they were limited and had many issues.  As I learned more about programming I was able to refine those functions into simpler and more efficient scripts.  Then I discovered the [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) API within core Javascript and wrote [Echo-js version 1](https://github.com/tygari/echo-js/tree/wc).  I wrote a web component to do the job of the above but it required using a specific tag which still felt wrong.

After a year, I discovered the [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API within core Javascript to fix this issue.  With this, I was able to solve the tag issue and allow the Echo-js tool to work with any tag. So I then wrote [Echo-js version 2](https://github.com/tygari/echo-js/tree/master).

Add this script code to ones page to make use of the Echo-js tool.
`<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tygari/echo-js/echo.js" sync></script>`

Echo-js uses two new attributes currently not in use by any core HTML tag or API.

The **echo** attribute takes in a string of ID's or a numeric value and creates children based on the **code** attribute.

The **code** attribute takes in a string of HTML code that is then used as the template dictated by the **echo** attribute.  When not assigned an HTML string or assigned an invalid HTML string this attribute will default to `<div></div>`.

At the start, Echo-js only took in a string of ID's assigned to the **echo** attribute and a string of HTML code assigned to the **code**.  Over time I added more and more features to give this tool more versatility.  As I found bugs I fixed them.  Over time I refined the code to make it more efficient.

Echo-js, when given a string of words, will create a child for each word and apply each word as an ID to those children in the order of the words from left to right.

Written HTML
`<div id="test" echo="bar foo barfoo" code="<span></span>"></div>`

DOM HTML
```
<div id="test" echo="bar foo barfoo" code="<span></span>">
    <span id="bar"></span>
    <span id="foo"></span>
    <span id="barfoo"></span>
</div>
```

The children can be targeted and altered.

Javascript
`document.getElementById('bar').style.color = 'red';
document.getElementById('bar').innerText = 'red';
document.getElementById('foo').style.color = 'yellow';
document.getElementById('foo').innerText = 'yellow';
document.getElementById('barfoo').style.color = 'blue';
document.getElementById('barfoo').innerText = 'blue';`

DOM HTML
```
<div id="test" echo="bar foo barfoo" code="<span></span>">
    <span id="bar" style="color:red">red</span>
    <span id="foo" style="color:yellow">yellow</span>
    <span id="barfoo" style="color:blue">blue</span>
</div>
```

Now that each span is individualized, time to alter the echo attribute by rearranging the order of its words.

Javascript
`document.getElementById("test").setAttribute("echo", "barfoo bar foo");`

DOM HTML
```
<div id="test" echo="barfoo bar foo" code="<span></span>">
    <span id="barfoo" style="color:blue">blue</span>
    <span id="bar" style="color:red">red</span>
    <span id="foo" style="color:yellow">yellow</span>
</div>
```

Echo-js will copy all the children, then delete them from the HTML DOM, then paste them back in the new order.  It will preserve any unique alterations applied to each child.

Even adding another word to the list won't harm the already present children.  In the order position of the new word string, a new child will be created based on the **code** attribute.

Javascript
`document.getElementById("test").setAttribute("echo", "barfoo bar foobar foo");`

DOM HTML
```
<div id="test" echo="barfoo bar foobar foo" code="<span></span>">
    <span id="barfoo" style="color:blue">blue</span>
    <span id="bar" style="color:red">red</span>
    <span id="foobar"></span>
    <span id="foo" style="color:yellow">yellow</span>
</div>
```

Suppose one decides they no longer desire a specific child.  Simply removing the name from the **echo** attribute word string will delete it from the HTML DOM.

Javascript
`document.getElementById("test").setAttribute("echo", "bar foobar foo");`

DOM HTML
```
<div id="test" echo="bar foobar foo" code="<span></span>">
    <span id="bar" style="color:red">red</span>
    <span id="foobar"></span>
    <span id="foo" style="color:yellow">yellow</span>
</div>
```

A word of warning, altering the **code** attribute wipes everything clean, then reapplies **echo** from a fresh start.

Javascript
`document.getElementById("test").setAttribute("code", "<p></p>");`

DOM HTML
```
<div id="test" echo="bar foobar foo" code="<p></p>">
    <p id="bar"></p>
    <p id="foobar"></p>
    <p id="foo"></p>
</div>
```

If the programmer simply needs a set number of children without any ID's, they may use a number instead of a word string.  

Written HTML
`<div id="test" echo="5" code="<p></p>"></div>`

DOM HTML
```
<div id="test" echo="5" code="<p></p>">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
```

Now to number these children.

Javascript
`document.getElementById('test').children[0].innerText = '1';
document.getElementById('test').children[1].innerText = '2';
document.getElementById('test').children[2].innerText = '3';
document.getElementById('test').children[3].innerText = '4';
document.getElementById('test').children[4].innerText = '5';`

DOM HTML
```
<div id="test" echo="5" code="<p></p>">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
```

Changing the number to a higher number will result in new children being added, without losing any uniqueness of the older children.

Javascript
`document.getElementById("test").setAttribute("echo", "8");`

DOM HTML
```
<div id="test" echo="8" code="<p></p>">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p></p>
    <p></p>
    <p></p>
</div>
```

In the inverse reducing the number to a smaller number will simply delete the excess children.  It will retain the children's uniqueness below the number.

Javascript
`document.getElementById("test").setAttribute("echo", "3");`

DOM HTML
```
<div id="test" echo="3" code="<p></p>">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
```

These are the simpler capabilities of this tool.

**Echo** attribute can be assigned an array and it will process it directly.
**Echo** attribute can be assigned a variable and it will find it within the global scape and retrieve the data.
If assigned a variable an **auto** attribute can be set to watch the variable and Echo-js will periodically check the variable for changes.  When it detects a change it will auto update the **echo** attribute to match the altered variable.

**Code** attribute can, besides a string of HTML code,, accept directions to an HTML Template to retrieve code or a variable like **echo**.

There are many options for a programmer to set the tool to work in a way most efficient to them.

The README details every aspect of the tool.  It gives examples of every potential option.


My personal, most audacious use of this tool has been with a simple single HTML line.

`<div id="twodarray" echo="1000" code="<div echo='1000' code='<div onclick=()></div>'></div>" auto="false"></div>`

Echo.js was able to successfully create a 2D array of 1000 children each holding 1000 children for 1001001 total elements of parent, children, and grandchildren.

-----

Any suggestions or feedback would be much appreciated.

Please report any bugs or unusual behavior one may experience so a patch may be applied as soon as possible for all who may use this tool.