JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div align='left' id='timeline'></div>
<br>
callback:
<div id='result' class='res'></div>

CSS

/*
CSS GRID help:
https://tuhub.ru/posts/css-grid-complete-guide
*/

:root {
  /*переменные */
  --clr_border: rgba(150, 150, 150, 0.5);
  --clr_unselect_bg: rgba(150, 150, 150, 0.5);
  --clr_select_bg: red;
  --clr_hover_bg: rgba(255, 0, 0, 0.5);
  /*
var(--clr_border);
var(--clr_unselect_bg);
var(--clr_select_bg);
var(--clr_hover_bg);
	получить значение
	var(--color-blue);
	*/
}

.res {
  background: var(--clr_unselect_bg);
}

.container {
  display: grid;
  /*css grid*/
  grid-column-gap: 2px;
  /*расстояние между ячейками*/
  width: 100%;
  height: 20px;
  left: 20px
}

.timeline {
  /*float: right*/
}

.container .month {
  text-align: center;
  grid-row-start: 1;
  grid-row-end: 1;
  height: 20px;
  width: 120px;
  border: solid 2px var(--clr_border);
  background: var(--clr_unselect_bg);
}

.container .year {
  text-align: center;
  grid-row-start: 1;
  /*начальная строка*/
  grid-row-end: 1;
  /*конечная строка */
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 0px;
  background: var(--clr_unselect_bg);
  visibility: hidden;
}

.container .tl_btn {
  cursor: pointer;
  position: relative;
  text-align: center;
  grid-row-start: 1;
  /*начальная строка*/
  grid-row-end: 1;
  /*конечная строка */
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
  background: var(--clr_unselect_bg);
}

/*наведение на кнопку*/

.container .tl_btn:hover {
  cursor: pointer;
  position: relative;
  text-align: center;
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
  background: var(--clr_hover_bg);
}

/*ячейка*/

.container .cell {
  cursor: pointer;
  position: relative;
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
}

/*наведение на ячейку*/

.container .cell:hover {
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  height: 20px;
  width: 100%;
 ...

JavaScript

var timeLine = (function() {
  var statusForButton = 5;
  var month = [
    'Январь',
    'Февраль',
    'Март',
    'Апрель',
    'Май',
    'Июнь',
    'Июль',
    'Август',
    'Сентябрь',
    'Октябрь',
    'Ноябрь',
    'Декабрь'
  ]
  //private
  function getRandomInt(min, max) {
    // генератор рандомного числа
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  function resetSelection(event) {     
    //сбрасываем выделение
    for (let ch = 0; ch < event.target.parentElement.childElementCount; ch++) {
      if (event.target.parentElement.children[ch].getAttribute('select') === "true") { 
        event.target.parentElement.children[ch].setAttribute('select', false);
      } 
    }
  }
  
    function getNumber(event) {
        var buttonWithDate = document.getElementsByClassName('cell-hint');
        //сбрасываем выделение
        for (let ch = 2; ch < event.target.parentElement.childElementCount; ch++) {
            if (event.target.parentElement.children[ch].getAttribute('select') === 			"true") {
            	buttonWithDate[ch-2].setAttribute('status', 4);
              }  else 
              try{
                  buttonWithDate[ch-2].setAttribute('status', 5)
            } catch(e) {
                console.log(e);
            }
        }  
    }
  
  function selectElement(event) {
     
    if (event.target.getAttribute('class') === 'cell') {
      	resetSelection(event)
      	event.target.setAttribute('select', true);
      	getNumber(event)
    }
  }
  //public
  return {
    elementClick: function(event) {
      //клик по элкменту
      selectElement(event);
    },
    nextClick: function(event) {
      //клик по элкменту
      let timelineID = event.target.parentElement.parentElement.getAttribute('id')
      let y = event.target.parentElement.children[0].getAttribute('y')
      let m = event.target.parentElement.children[0].getAttribute('m')
      let c = event.target.parentElement.children[0].getAttribute('c')
      m =...