JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<div class="container">
<div id="top">LOGO</div>
<div id="middle">
<button disabled id="prev" type="button"><span>&lt;</span></button>
<div id="content">
<div id="header">dgdfgdfhdfhhdfhdhd</div>

<div id="group">

  <div class="current">
  <p class="title">Series 1</p>
    <ul>
      <li>
        <input type="checkbox" id="1" class="box" />
        <label for="1"><img src="https://picsum.photos/seed/100/100" /></label>
      </li>
      <li>
        <input type="checkbox" id="2" class="box" />
        <label for="1"><img src="https://picsum.photos/seed/101/101" /></label>
      </li>
      <li>
        <input type="checkbox" id="3" class="box" />
        <label for="3"><img src="https://picsum.photos/seed/102/102" /></label>
      </li>
      <li>
        <input type="checkbox" id="4" class="box" />
        <label for="4"><img src="https://picsum.photos/seed/103/103" /></label>
      </li>
    </ul>
  </div>
  
  <div>
  <p class="title">Series 2</p>
    <ul>
      <li>
        <input type="checkbox" id="5" class="box" />
        <label for="5"><img src="https://picsum.photos/seed/104/104" /></label>
      </li>
      <li>
        <input type="checkbox" id="6" class="box" />
        <label for="6"><img src="https://picsum.photos/seed/105/105" /></label>
      </li>
      <li>
        <input type="checkbox" id="7" class="box" />
        <label for="7"><img src="https://picsum.photos/seed/106/106" /></label>
      </li>
      <li>
        <input type="checkbox" id="8" class="box" />
        <label for="8"><img src="https://picsum.photos/seed/107/107" /></label>
      </li>
    </ul>
  </div>

<div>
  <p class="title">Series 3</p>
    <ul>
      <li>
        <input type="checkbox" id="9" class="box" />
        <label for="9"><img src="https://picsum.photos/seed/108/108" /></label>
      </li>
      <li>
        <input type="checkbox" id="10" class="box" />
        <label for="10"><img src="https://picsum.photos/seed/109/109" /></label>
      </li>
      <li>
      ...

CSS

input[type=checkbox] {
display: none;
}

body {
   /* This is used to reset any browser-default margins */ 
     margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  
  -webkit-font-smoothing: antialiased;
color: rgb(221, 221, 221);
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 21px;
}



.container{
    display: flex;
    flex-direction: column;
  /*  align-items: center; */
    justify-content: center;
    text-align: center;
    height: 100vh;
border: 5px solid pink;
background: orange;
  background-image: radial-gradient(rgba(0, 0, 0, 0.2), 25px, transparent 0);
  background-size: 60px 60px;
}

#middle{
    display: flex;
    flex-direction: row;
  /*  align-items: center; */
    justify-content: center;
    text-align: center;
    
 padding: 25px 0;
 height: 100vh;
border: 5px solid purple;
}

#top, #bottom {
 
  background:red;
   width: 100%;
  
      }
 #bottom {
 
  background-color: transparent;

      }

#content {
  display: flex;
    flex-direction: column;
  /*  align-items: center; */
    justify-content: center;
    text-align: center;
    background-color: blue;
    border: 5px solid blue;
    border-radius: 25px;
    width: 100%;
    overflow: hidden;
}

#prev, #next {
    display: block;
    border: 1px solid red;
    background-color: transparent;
}

span {
  display: block;
  /*border: 1px solid blue;*/
  background-color: white;
  padding: 5px;
  font-family: economica;
  font-size: 72px;
  color: white;
  background-color:rgba(255,255,255,0.5);/*background color and opacity together*/

}

div::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

#prev span {
  border-radius: 5px 0 0 5px;
  margin-right: -10px;
}

#next span {
  border-radius: 0 5px 5px 0;
  margin-left: -10px;
}

#group div{
    display: none;
}
#group div.current{
    display: block; /*flex*/
 ...

JavaScript

var newIndex = 0;
//Simple Checkbox to Local Storage
let boxes = document.getElementsByClassName('box').length;

function save() {
  //for updating on click: You own X of Y
  $('.huis').text("You own " + $('.current').find(':checked').length + " out of " + $('.current').find('li').length);
  //for saving
  for (let i = 1; i <= boxes; i++) {
    var checkbox = document.getElementById(String(i));
    localStorage.setItem("checkbox" + String(i), checkbox.checked);
  }
}

//for loading BUG: adding li gives: Uncaught TypeError: Cannot set properties of null (setting 'checked')"
for (let i = 1; i <= boxes; i++) {
  if (localStorage.length > 0) {
    var checked = JSON.parse(localStorage.getItem("checkbox" + String(i)));
    document.getElementById(String(i)).checked = checked;
  }
}
window.addEventListener('change', save);
//END

//console.log($('.Series1').children('li').length);
//console.log($('.current').find('li').length);
//console.log($('.current').find(':checked').length);

//On 1st load
$('.huis').text("You own " + $('.current').find(':checked').length + " out of " + $('.current').find('li').length);
$('#header').text($('.current').find('.title').text());

//DIV scroller prev-next (jQuery)

function updateItems(delta) {
  const $items = $('#group').children();
  const currentIndex = $items.filter('.current').index();
  window.newIndex = Math.max(0, Math.min(currentIndex + delta, $items.length - 1));

  console.log(newIndex);


  $items.each(function(index) {
    $(this).toggleClass('current', index === newIndex);
  });

  const hasPrev = newIndex !== 0;
  const hasNext = newIndex !== $items.length - 1;

  $('#prev').attr('disabled', !hasPrev);
  $('#next').attr('disabled', !hasNext);
  
  
}
$("#next").click(function() {
  updateItems(1);
  getSeriesData();

});
$("#prev").click(function() {
  updateItems(-1);
  getSeriesData();
});

//END
function getSeriesData() {
    $('.huis').text("You own " + $('.current').find(':checked').length + " out of " +...