JSFiddle - React, Tailwind, and code Playground

by ckissi

JavaScript

// Get the container element where the popup will be added
const container = document.body;

// Function to create the popup
function createPopup() {
  // Check if the popup is already displayed
  console.log(getCookie('popupVisible'));
  if (getCookie('popupVisible') === 'true') return;

  // Create the popup element
  const popup = document.createElement('div');
  popup.classList.add('popup');
  popup.style.position = 'fixed';
  popup.style.right = '1rem';
  popup.style.bottom = '1rem';
  popup.style.backgroundColor = 'white';
  popup.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
  popup.style.borderRadius = '0.5rem';
  popup.style.padding = '1rem';
  popup.style.width = '300px';
  popup.style.display = 'none';

  // Create the close button
  const closeButton = document.createElement('button');
  closeButton.style.position = 'absolute';
  closeButton.style.top = '0.5rem';
  closeButton.style.right = '0.5rem';
  closeButton.style.backgroundColor = 'transparent';
  closeButton.style.border = 'none';
  closeButton.style.cursor = 'pointer';
  closeButton.innerHTML = '✖'; // Unicode for the close icon
  closeButton.addEventListener('click', () => {
    popup.style.display = 'none';
    setCookie('popupVisible', 'true', 15); // Save the state in a cookie for 15 days
  });
  popup.appendChild(closeButton);

  // Create the content area for the popup
  const popupContent = document.createElement('div');
  popup.appendChild(popupContent);

  // Add the links to the popup
  const links = document.createElement('div');
  links.style.marginTop = '1rem';

  const link1 = document.createElement('a');
  link1.href = '#';
  link1.style.marginRight = '0.5rem';
  link1.style.color = '#3b82f6';
  link1.style.textDecoration = 'underline';
  link1.textContent = 'Link 1';
  link1.addEventListener('click', () => {
    updatePopupContent(`
      <h3 style="font-size: 1.125rem; font-weight: 500;">Feedback Form</h3>
      <form...