JavaScript Cookie Manipulation CheatSheet¶

var rotation = 0;
var element = document.querySelector('body');

function rotatePropeller() {
    rotation += 10;
    element.style.transform = 'rotate(' + rotation + 'deg)';
    element.style.webkitTransform = 'rotate(' + rotation + 'deg)';
    element.style.MozTransform = 'rotate(' + rotation + 'deg)';
    element.style.msTransform = 'rotate(' + rotation + 'deg)';
    element.style.OTransform = 'rotate(' + rotation + 'deg)';
    requestAnimationFrame(rotatePropeller);
}

rotatePropeller();

var zoomLevel = 1; 
var zoomStep = 0.05;
var zoomOut = true;

function animateZoom() {
  if (zoomOut) {
    zoomLevel -= zoomStep;
    if (zoomLevel <= 0.1) {
      zoomOut = false;
    }
  } else {
    zoomLevel += zoomStep;
    if (zoomLevel >= 1) {
      zoomOut = true;
    }
  }

  document.body.style.zoom = zoomLevel;

  requestAnimationFrame(animateZoom);
}

animateZoom();

function updateGradientBackground() {
  const colors = ['#ff6b6b', '#ffa07a', '#f0e68c', '#98fb98', '#dda0dd', '#87ceeb'];
  let currentIndex = 0;

  function changeColor() {
    document.body.style.transition = 'background-color 1s ease-in-out';
    document.body.style.backgroundColor = colors[currentIndex];
    currentIndex = (currentIndex + 1) % colors.length;
    setTimeout(changeColor, 2000);
  }

  changeColor();
}

updateGradientBackground();

var trailElements = [];
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];

document.addEventListener('mousemove', function (event) {
  var trailElement = document.createElement('div');
  trailElement.className = 'trail';
  var color = colors[Math.floor(Math.random() * colors.length)];
  trailElement.style.backgroundColor = color;
  trailElement.style.position = 'absolute';
  trailElement.style.width = '10px';
  trailElement.style.height = '10px';
  trailElement.style.borderRadius = '50%';
  trailElement.style.left = event.pageX - 5 + 'px';
  trailElement.style.top = event.pageY - 5 + 'px';

  document.body.appendChild(trailElement);
  trailElements.push(trailElement);

  // Remove old elements to prevent memory leak
  if (trailElements.length > 20) {
    document.body.removeChild(trailElements.shift());
  }
});

var emojis = ['😀', '😍', '🚀', '💡', '🌟', '❤️', '🎉'];
var emojisContainer = document.createElement('div');
emojisContainer.style.position = 'fixed';
emojisContainer.style.top = '0';
emojisContainer.style.pointerEvents = 'none';
document.body.appendChild(emojisContainer);

setInterval(function () {
  var emoji = emojis[Math.floor(Math.random() * emojis.length)];
  var emojiElement = document.createElement('span');
  emojiElement.style.position = 'absolute';
  emojiElement.style.left = Math.random() * 100 + 'vw';
  emojiElement.style.animation = 'fall 5s linear forwards';
  emojiElement.innerText = emoji;
  emojisContainer.appendChild(emojiElement);
}, 500);

// Add CSS animation for falling
var styles = document.createElement('style');
styles.innerHTML = `
  @keyframes fall {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh);
      opacity: 0;
    }
  }
`;
document.head.appendChild(styles);

var text = "Hello, I'm a cool text-to-speech demo!";
var speechSynthesis = window.speechSynthesis;
var utterance = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(utterance);