(js) => blog

Gradient Generator

Page section: playground
TAGS: setInterval
More on setInterval

Hover gradient to pause.

Random Gradient Generator

There are 281,474,976,710,656 or 281 trillion different gradients here. If you’d like to see all of them pull up a chair and put the kettle on since it’ll take a while. In fact at the rate of one every two seconds it’s likely to take well in excess of 18 million years. So if you use one of these gradients and someone else has the same one the chances are they stole off you.

    View contents of: /static/js/gradient-generator.js 
    // Interval

const colourDiv = document.getElementById("colourDiv");
const resumeBtn = document.getElementById("resume");
const saveBtn = document.getElementById("save");
const savedGradientList = document.querySelector('#saved-gradient-list');
const savedGradients = document.querySelector('#saved-gradients');
const gradientP = document.getElementById("gradient-paragraph");
let timerId;
let gradient = '';

let i = 0;


function colourChange() {
  // const gradientP = document.getElementById("gradient-paragraph");

  let red = Math.floor(Math.random() * 256);
  let green = Math.floor(Math.random() * 256);
  let blue = Math.floor(Math.random() * 256);
  let red1 = Math.floor(Math.random() * 256);
  let green1 = Math.floor(Math.random() * 256);
  let blue1 = Math.floor(Math.random() * 256);

  gradient = `linear-gradient(to bottom left, rgb(${red}, ${green}, ${blue}), rgb(${red1}, ${green1}, ${blue1}))`;

  colourDiv.style.backgroundImage = `linear-gradient(to bottom left, rgb(${red}, ${green}, ${blue}), rgb(${red1}, ${green1}, ${blue1}))`;

  
  i = i + 1;
  
  gradientP.textContent = `${i}. ${gradient}`;

}

// creates saved gradient divs

function savedGrds() {
  console.log(gradientP.textContent);
  // savedLi = document.createElement('li');
  // savedLi.id = 'saved-gradient-';
  // savedLi.textContent = gradient;
  // savedLi.setAttribute('title', 'Hello');
  // savedGradientList.appendChild(savedLi);

  savedGradientDiv = document.createElement('div');
  savedGradientDiv.classList.add('saved-gradient-box');
  savedGradientDiv.style.backgroundImage = gradient;
  savedGradientDiv.textContent = gradient;

  savedGradients.appendChild(savedGradientDiv);

  savedGradientCloseBtn = document.createElement('button');
  savedGradientCloseBtn.classList.add('close-btn');
  savedGradientCloseBtn.innerHTML = '&#10006';
  savedGradientDiv.appendChild(savedGradientCloseBtn);

  savedGradientDiv.addEventListener('click', (e) => {
    let grad = e.target.textContent;
    document.body.style.backgroundImage = grad.slice(0, -1); // removes the letter from the close button
    document.body.style.backgroundAttachment = 'fixed';
    console.log(gradient);
  });
}

// remove saved gradients
const closeBtns = document.querySelectorAll('close-btn');

// closeBtns.addEventListener('click', (e) => {
//   const parent = e.target.parent;
//   parent.removeElement();
// });

closeBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    console.log('hoi');
  });
});



// BUTTONS & TRIGGERS

colourDiv.addEventListener("mouseover", () => {
  clearInterval(timerId);
  document.body.style.background = gradient;
  resumeBtn.textContent = 'Resume';
});

colourDiv.addEventListener("mouseout", () => {
  //   alert("whoah");
  document.body.style.background = '';
});


// the resume button restarts the timer

resume.addEventListener("click", () => {
  //   alert("whoah");
  // timerId();
  timerId = setInterval(colourChange, 2000);
  resumeBtn.textContent = 'Running';
});


  
  // called when save is pressed.

saveBtn.addEventListener("click", savedGrds);