JSFiddle - React, Tailwind, and code Playground

by Ser8191

HTML

<div id="block">
<div class="diod d0" onclick="zapros(0)" id="d0">1</div>
<div class="diod d1" onclick="zapros(1)" id="d1">2</div>
<div class="diod d2" onclick="zapros(2)" id="d2">3</div>
<div class="diod d3" onclick="zapros(3)" id="d3">4</div>
<div class="diod d4" onclick="zapros(4)" id="d4">5</div>
<div class="diod d5" onclick="zapros(5)" id="d5">6</div>
<div class="diod d6" onclick="zapros(6)" id="d6">7</div>
<div class="diod d7" onclick="zapros(7)" id="d7">8</div>
</div>
Массив:<div id="massiv">0-0-0-0-0-0-0-0</div>
Реверс:<div id="revers">0-0-0-0-0-0-0-0</div>

CSS

div#block {
margin:0 0 0 0;
width:500px; 
height:200px;
border: 1px solid #5698C9;
}
.diod{
position: absolute;
width:50px;
height:50px;
margin:0 0 0 0;
border: 1px dotted #5698C9;
display: flex;
justify-content: center;
align-items: center;
opacity:0.5;
font-size:15px;
color:#404040;
background: #00FF21;
}
.d0{margin: 10px 0 0 10px;}
.d1{margin: 10px 0 0 70px;}
.d2{margin: 10px 0 0 130px;}
.d3{margin: 10px 0 0 190px;}
.d4{margin: 10px 0 0 250px;}
.d5{margin: 10px 0 0 310px;}
.d6{margin: 10px 0 0 370px;}
.d7{margin: 10px 0 0 430px;}

JavaScript

var arr=[0,0,0,0,0,0,0,0];
function zapros(q) {  
if (arr[q]==0){
arr[q]=1;
document.getElementById("d"+q).style.opacity = "1";
}else{
arr[q]=0;
document.getElementById("d"+q).style.opacity = "0.5";
}

var bin = arr.join('-');
document.getElementById("massiv").innerText=bin;

var bin = arr.reverse();
var bin = arr.join('-');
document.getElementById("revers").innerText=bin;
}