Visualization of the towers of the Hanoi algorithm in Javascript

Question

Latley I am working on a school project and I have to introduce an algorithm, which in my case is the decisive algorithm for the puzzle of the Hanoi Tower. Due to my knowledge of HTML / CSS, I thought it would be nice to use these + Javascript to render steps on a web page.

I created a website, as well as a basic, recursive algorithm.

function move(n, beg, aux, end) { if (n == 1) { console.log(beg + '-->' + end + '\n'); setTowers(beg, end); } else { move(n - 1, beg, end, aux); move(1, beg, aux, end); move(n - 1, aux, beg, end); } } 

Page layout (CSS code won't help here):

 section#main-app .app-wrapper .tower-wrapper .tower#twr--a .block.blck--top .block.blck--middle .block.blck--bottom .tower#twr--b .block.blck--top .block.blck--middle .block.blck--bottom .tower#twr--c .block.blck--top .block.blck--middle .block.blck--bottom 

Then I started to fight, because I had to somehow visualize it. I was thinking about putting each tower in an array:

 var twrElemsA = document.getElementById('twr--a').getElementsByClassName('block'); towerA = jQuery.makeArray(twrElemsA); 

Then the function actually sets the color. 2 things at the moment: it does not erase the color, if necessary, and it will not set the color at all, because I messed up the switch / operator, I don’t know how to do it correctly.

 function setColors(target) { target.forEach(function (element) { switch (element) { case '<div class="block blck--top">': $(element).css({ 'background-color': 'red' }); break; case '<div class="block blck--middle">': $(element).css({ 'background-color': '#51616F' }); break; case '<div class="block blck--bottom">': $(element).css({ 'background-color': '#394B5A' }); break; } }); 

}

Now, if the move function returns, for example, A → B, setColors should then iterate over TowerB and set the background colors of all three blocks to a specific color. But the switch statement doesn't work, and I'm running out of ideas and time, which are a destructive combo.

Maybe someone knows what can help here. I appreciate any help!

Yours faithfully..

Answer 1

From the appearance of the setColors function, you make visual changes to the blocks using JavaScript. The general consensus on website development is to leave these tasks in CSS.

In your case, you check your DIVs classes block and blck--bottom . Therefore, instead of using JavaScript, perhaps you can try a stylesheet with the following selector:

 .block.blck--top { background-color: '#51616F'; } .block.blck--middle { background-color: '#51616F'; } .block.blck--bottom { background-color: '#51616F'; } 

In contrast, however, if you need to perform additional actions that are not visual, you can use the following approach.

 function setColors(target) { target.forEach(function (element) { if(element.classList.contains('blck--top')) { element.style['background-color'] = 'red'; /* - Extra code here - */ } else if(element.classList.contains('blck--middle')) { element.style['background-color'] = '#51616F'; /* - Extra code here - */ } else if(element.classList.contains('blck--bottom')) { element.style['background-color'] = '#394B5A'; /* - Extra code here - */ } }); 

But if you really want to use the switch statement, then:

 function setColors(target) { target.forEach(function (element) { switch (element.getAttribute('class')) { case 'block blck--top': $(element).css({ 'background-color': 'red' }); break; case 'block blck--middle': $(element).css({ 'background-color': '#51616F' }); break; case 'block blck--bottom': $(element).css({ 'background-color': '#394B5A' }); break; } }); 

Please note that I also provided you with the ability to perform the same tasks using plain old JavaScript (without jQuery if you do).