JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<div class='wrapper'>
  <span id='daily--number'></span>
</div>

CSS

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 0 rgba(0,0,0, .5);
  padding: 20px;
  border-radius: 3px;
}

#daily--number {
  color: cornflowerblue;
  font-size: 30px;
  font-weight: bold;
}

JavaScript

(function (debugMode) {
    'use strict';
  
    /**
     * Настройки поведения скрипта.
     */
    let config = {
        random: {
            min: 300, // минимальный предел для генератора случайного числа
            max: 600 // максимальный предел для генератора случайного числа
        },
        cookie: {
            expires: 1 // дней существования cookie
        },
        timer: {
            interval: debugMode ? 5000 : 86400000 // миллисекунд для повторного запуска скрипта
        }
    };

    /**
     * Набор инструментов для работы скрипта.
     */
    let utils = {
        randomNumber: {
            generate: (min, max) => (Math.floor(Math.random() * (max - min)) + min)
        },
        currentTime: {
            get: () => (new Date().getTime())
        }
    };

    /**
     * Генерация случайного числа.
     */
    let dailyNumber = {
        generate: () => (utils.randomNumber.generate(config.random.min, config.random.max)),
    };

    /**
     * Элементы страницы, отвечающие за отображение данных, полученных при работе скрипта.
     */
    let page = {
        dailyNumber: {
            set: number => { document.getElementById('daily--number').innerText = number; },
            get: () => (document.getElementById('daily--number').innerText)
        }
    };

    /**
     * Обертка для работы с cookie
     */
    let cookie = {
        lastVisit: {
            set: time => { Cookies.set('last_visit', time, config.cookie.expires); },
            get: () => (Cookies.get('last_visit'))
        },
        dailyNumber: {
            set: number => { Cookies.set('last_daily_number', number, config.cookie.expires); },
            get: () => (Cookies.get('last_daily_number'))
        }
    };

    /**
     * Контрольная точка для ручного тестирования скрипта.
     */
    if (debugMode) {
        Cookies.remove('last_visit');
        Cookies.remove('last_daily_number');
    }

    /**
     * Функция вызывает считывание и запись данных в cookie.
  ...