JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

JavaScript

function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

function setCookie(name, val) {
  document.cookie = name + "=" + encodeURIComponent(val);
  if (val === 'true') {
    var Dy = new Date();
    Dy.setFullYear(Dy.getFullYear() + 1);
    console.log('Вікно підписки появиться ' + Dy.toUTCString());
  } else if (val === 'false') {
    var Dy = new Date();
    Dy.setMonth(Dy.getMonth() + 1);
    console.log('Вікно підписки появиться ' + Dy.toUTCString());
  } else {
    var Dy = new Date();
    console.log('Куки запишуться від цієї дати ' + Dy.toUTCString());
  }
  document.cookie = "expires=" + Dy.toUTCString();
  document.cookie = "path=/";
}

function deleteCookie(name) {
  setCookie(name, "", -1);
}
//setCookie('contact-form', 'false');
//deleteCookie('contact-form');	// Видалення кука	 
let c = getCookie('contact-form');
if (c === 'true') {
  console.log('Підписка була оформлена');
} else if (c === 'false') {
  console.log('Була відмова від підписки');
} else {
  setTimeout(modal, 5000);
  console.log("Форма підписки тільки з'явилась"); // появлення форми

}

//Модальне вікно
var opas = 0;

function modal() {
  var b = document.getElementById('owervlow-f');
  b.style.display = 'flex';
  let delay = 1;
  if (opas < 1) {
    setTimeout(modal, delay);
  }
  opas = opas + 0.02;
  b.style.opacity = String(opas);
  //console.group("opasity"); виводить в консоль зміну opasity
  //console.log(opas);
  //console.groupEnd();
}


// Закриття форми
let clos = document.getElementById('closet');
let owerflow = document.getElementById('owervlow-f');
clos.onclick = function close() {
  console.log('Форма підписки була закрита');
  setCookie('contact-form', 'false');
  owerflow.style.display = 'none';
}

// Підтвердження форми 
let submit = document.getElementById('buttonContactForm');
submit.onclick =...