JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<div>
 
<ol>
    <li class="1">int num, reverse=0, rem, testing;</li>
    <li class="2">printf("\t\t\tPlase Enter an Numbers: \n");</li>
    <li class="3">scanf("%d", &num);</li>
    <li class="4">testing = num;</li>
    <li class="5 15">while(testing!=0)</li>
    <li>{</li>
    <ol>
        <li class="6 9 12">rem = testing % 10;</li>
        <li class="7 10 13">reverse = reverse * 10 + rem;</li>
        <li class="8 11 14">testing /= 10; <span>//testing = testing / 10;</span></li>
    </ol>
    <li>}</li>
</ol>

</div>


<button>next</button>

<br><br><br>

<table>
    <tr>
        <th>num</th>
        <th>reverse</th>
        <th>rem</th>
        <th>testing</th>
    </tr>
</table>

CSS

body {
    font-family: arial;
}

ol {
   list-style-type: none; 
}

li {
    line-height: 1.5;
}

.s {  
    background-color:yellow;
}

td, th{
    border: 1px solid black;
}

JavaScript

var i = 0;

$('button').on('click',function(){

    $('li').removeClass('s');
    i++;
    $('.'+i).addClass('s');

    updateTable(i);
})


var $table = $('table');

function appendRow(num,reverse,rem,testing){
    $table.append('<tr>'+
                  '<td>'+num+'</td>'+
                  '<td>'+reverse+'</td>'+
                  '<td>'+rem+'</td>'+
                  '<td>'+testing+'</td>'+
                  '</tr>');
}

function updateTable(step){
    switch (step){
        case 1:
            break;
        case 2:
            appendRow('-','0','-','-');
            break;       
        case 3:
            break;
        case 4:
            appendRow('253','0','-','-');
            break;
        case 5:
            appendRow('253','0','-','253');
            break;
        case 6:
            break;
        case 7:
             appendRow('253','0','3','253');
            break;
        case 8:
             appendRow('253','3','3','253');
            break;  
        case 9:
            appendRow('253','3','3','25');
            break;
        case 10:
            appendRow('253','3','5','25');
            break;
        case 11:
            appendRow('253','35','5','25');
            break;
        case 12:
            appendRow('253','35','5','2');
            break;
        case 13:
            appendRow('253','35','2','2');
            break;
        case 14:
            appendRow('253','352','2','2');
            break;
        case 15:
            appendRow('253','352','2','0');
            break;
    }
}