JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
   <title>TEST</title>
   <link rel="stylesheet" type="text/css" href="/css/style.css">
   <script src="/weekhouers.js"></script>
</head>

<body>
   <div class="wraper">
      <div class="container">
         <div class="planer__main-options main-options">
            <div class="main-options__select select">
               <p class="select__title">Select:</p>
               <p class="select__all">All</p>
               <p> | </p>
               <p class="select__reset">Reset</p>
            </div>
            <div class="main-options__total total">
               <p class="total__title">Total: </p>
               <p class="total__quantity">0</p>
               <p class="total__persent">(0%)</p>
               <p class="total__label">h/week</p>
            </div>
         </div>
         <div class="maim-field">
            <table id="table">
               <tbody>
                  <tr>
                     <td class="table-chekbox">
                     </td>
                     <td class="table-chekbox">
                        <div class="hours__item">
                           <div class="hours__hours"><label>0</label></div>
                           <div class="hours__check"><input class="checkbox" type="checkbox" id="1"></div>
                        </div>
                     </td>
                     <td class="table-chekbox">
                        <div class="hours__item">
                           <div class="hours__hours"><label>1</label></div>
                           <div class="hours__check"><input class="checkbox" type="checkbox" id="2"></div>
                        </div>
                     </td>
                     <td class="table-chekbox">
                        <div class="hours__item">
                           <div class="hours__hours"><label>2</label></div>
                       ...

CSS

@charset "UTF-8";
/*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: "Gilroy";
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}

/*--------------------*/
.wraper {
  padding: 40px 0;
}

.planer__main-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container {
  width: 960px;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}

.main-options {
  padding: 0 0 10px 0;
}
.main-options__select {
  display: flex;
  flex-direction: row;
}
.main-options__total {
  display: flex;
  flex-direction: row;
}

.select__title {
  margin-right: 10px;
}
.select__all {
  margin-right: 10px;
  cursor: pointer;
}
.select__all + p {
  margin-right: 10px;
}
.select__reset {
  margin-right: 10px;
  cursor: pointer;
}

.total__title {
  margin-right: 5px;
}
.total__quantity {
  margin-right: 5px;
  font-weight: 600;
}
.total__persent {
  margin-right: 5px;
}

.maim-field {
  border: 1px solid;
  padding: 10px;
  position: relative;
}

.hours__item {
  min-width: 14px;
}
.hours__hours {
  margin: 0 0 5px 0;
  text-align: center;
}

.days__item {
  display: flex;
  flex-direction: row;
}

.days__days {
  display: flex;
  min-width: 40px;
}

table {
  margin-left: -1px;
  margin-top: -5px;
  border-collapse:...

JavaScript

window.onload = function () {
   let selectAll = document.querySelector('.select__all');
   let resetAll = document.querySelector('.select__reset');
   let total = document.querySelector('.total__quantity');
   let percent = document.querySelector('.total__persent');
   let classSign = document.getElementsByClassName('sign');
   let elementsCheckboxHours = document.querySelectorAll('.hours__check input');
   let elementsCheckboxDays = document.querySelectorAll('.days__check input');
   let sendButton = document.querySelector('.submit');
   let showResponse = document.querySelector('.response');
   let saveTimetable = []; // Тут будем хранить сохраненные данные пользователем
   let elementOpenSave = document.getElementById('open');
   let buttonApplyAndDeleteId = 0; // счетчик для ID значений кнопок DELETE и APPLY

   for (let i = 0; i < classSign.length; i++) {
      classSign[i].setAttribute('data-id', i + 1);
      classSign[i].setAttribute('data-color', 'none');
      if (i < 24) {
         classSign[i].setAttribute('data-save', `{ "monday": { "${i}": "false" }, "id": "${i + 1}" }`);
      }
      else if (i > 23 && i < 48) {
         classSign[i].setAttribute('data-save', `{ "tuesday": { "${i - 24}": "false" }, "id": "${i + 1}"  }`);
      }
      else if (i > 47 && i < 72) {
         classSign[i].setAttribute('data-save', `{ "wednesday": { "${i - 48}": "false" }, "id": "${i + 1}"  }`);
      }
      else if (i > 71 && i < 96) {
         classSign[i].setAttribute('data-save', `{ "thursday": { "${i - 72}": "false" }, "id": "${i + 1}"  }`);
      }
      else if (i > 95 && i < 120) {
         classSign[i].setAttribute('data-save', `{ "friday": { "${i - 96}": "false" }, "id": "${i + 1}"  }`);
      }
      else if (i > 119 && i < 144) {
         classSign[i].setAttribute('data-save', `{ "saturday": { "${i - 120}": "false" }, "id": "${i + 1}"  }`);
      }
      else if (i > 143 && i < 168) {
         classSign[i].setAttribute('data-save', `{ "sunday": { "${i -...