JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="f_progress_contain">
<div id="f_progress" class="f_progress">
<div id="f_prog1"></div>
<div id="f_prog2"></div>
<div id="f_prog3"></div>
<div id="f_prog4"></div>
<div id="f_prog5"></div>
<div id="f_prog6"></div>
<div id="f_prog7"></div>
</div>
</div>


<div id="f_page1">
Page 1
</div>

<div id="f_page2">
Page 2
</div>

<div id="f_page3">
Page 3
</div>




<p>

</p>

<button id="prev">Prev</button>

<button id="next">Next</button>

CSS

.f_progress_contain {height:15px;border:solid #999999;border-width:0 0 1px 0;margin-bottom:30px;}


.f_progress {height:30px;
 display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: center;
    align-items: center; 
}

.f_progress div {width:10px;height:10px;border-radius:500px;border:1px solid #999999;background-color:#ffffff;}

.f_progress div:first-child {background-color:cyan;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

const parent = id('f_progress').children;
const idArray = Array.from(parent).map(x => x.id);

const progress = idArray.length;

var current_progress = 0;

id("next").addEventListener("click", function() {
current_progress = (current_progress + 1);
if (current_progress == progress) {current_progress = (progress - 1);}
next(idArray[current_progress]);

});

id("prev").addEventListener("click", function() {
if (current_progress == 0) {current_progress = 1;}
prev(idArray[current_progress]);
current_progress = (current_progress - 1);


});


function next(el) {
id(el).style.backgroundColor = "cyan";
}

function prev(el) {
id(el).style.backgroundColor = "white";
}