There is HTML where each element can have an x-make attribute with the following values:
copy:n – copy the current element n times and place new elements after the current one;
remove:n – remove n elements, starting with the next one. If there are no n elements after the current one (number_of_elements_after_current < n), then all elements that come after the current one are deleted;
removeChildren:n – remove n children of an element, starting from the first;
switch:n – swap the current element with the element n steps ahead of the current one (you should pay attention to examples 2 and 3).
Conditions:
The operations must be performed in the following order: first all copy operations, then remove, then removeChildren, and switch last. First, all operations at the top level are performed, then at the second level, and so on. The x-make attribute must be removed after performing an operation from that attribute.
Example 1:
solution(document.querySelector(‘entry’))
Before:
<entry>
<div>
<div x-make="remove:1">Block 1</div>
<div x-make="copy:3">Block 2</div>
</div>
</entry>
After:
<entry>
<div>
<div>Block 1</div>
<div>Block 2</div>
<div>Block 2</div>
<div>Block 2</div>
</div>
</entry>
Explanation:
“Block 2” was copied 3 times – now there are four elements of “Block 2”.
Next, the element following “Block 1” was removed.
Example 2:
solution(document.querySelector(‘entry’))
Before:
<entry>
<div x-make="removeChildren:2">
<div x-make="copy:100">Block 1</div>
<div>Block 2</div>
<div x-make="switch :7">Block 3</div>
<div>Block 4</div>
<div>Block 5</div>
</div>
</entry>
After:
<entry>
<div>
<div>Block 4</div>
<div>Block 3</div>
<div>Block 5</div>
</div>
</entry>
Explanation:
The number of blocks “Block 1” did not increase, because it was removed by the parent with removeChildren.
“Block 3” has changed from “Block 4” as the seventh element, counting from “Block 3”, is “Block 4”.
Example 3:
solution(document.querySelector(‘entry’))
Before:
<entry>
<section>
<div x-make="switch:2">
<div x-make="remove:5">Block 1</div>
<span>Block 2</span>
</div>
<div x-make="copy:1">
<div x-make="remove:5">Block 3</div>
<div x-make="switch:1">Block 4</div>
</div>
Block 5
</section>
</entry>
After:
<entry>
<section>
<div><div>Block 3</div></div>
<div><div>Block 3</div></div>
<div><div>Block 1</div></div>
Block 5
</section>
</entry>
Explanation:
Due to the precedence of operations, the second element was copied first – section now has four elements. The switch operation caused the first block inside section to be swapped with the third block Remove:5 in “Block 1” removed “Block 2” Remove:5 removed “Block 4” in “Block 3” (in two elements inside section since they were copied)
Example 4:
solution(document.querySelector(‘entry’))
Before:
<entry>
<div x-make="switch:2">1</div>
<div x-make="switch:3">2</div>
<div x-make="switch:5">3</div>
</entry>
After:
<entry>
<div>1</div>
<div>2</div>
<div>3</div>
</entry>
Explanation:
“Block 1” is swapped with “Block 3”. Further in the container, the first element with x-make will be “Block 3” – it will swap places with “Block 1”. The remaining “Block 2” swaps places with itself, that is, remains in place.
Notes
The solution should be a function called solution that takes a DOM element as input – an entry point.
The source code should look like this:
function solution(entryPoint) { // solution }
