Question

0

173

Views

Reload page, If there are more than three div

I have a page where circles are created and appear in random places.

When you click on the circle, it hides.

I want to make it so that when there are more than 3 circles on the page at the same time, then alerts appear, and when you click on ok, the page reloads.

I tried to add this piece to the end of the code, but nothing works:

if(i > 3) {
  alert('Alert For your User!');
  window.location.reload(); 
}

//create circle

var widthHeight = 35;
var margin = 25;
var delta = widthHeight + margin;

let clicks = 0;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop + "px";
  div.style.left = limitedLeft + "px";
  
  const nodes = document.querySelectorAll('.animation');
  for(let i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', (event) => {
    event.target.style.animation = 'Animation 200ms linear';
    setTimeout(() => {
      event.target.style.animation = '';
    }, 220);  });
  }
  
  $(div).click(function() {
    $('#clicks').text(++clicks);
    $(this).fadeOut();
  });
  
  document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 600;

setInterval(() => {
  i += 1;
  createDiv(`circle${i}`);
}, oneSecond);

.circle {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T13:13:32.484Z

Create a new variable circleCnt. When creating a new circle, assign +1, when clicking -1.

You can then do your own validation with this variable.

//create circle

var widthHeight = 35;
var margin = 25;
var delta = widthHeight + margin;

let clicks = 0;
let circleCnt = 0;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop + "px";
  div.style.left = limitedLeft + "px";
  
  const nodes = document.querySelectorAll('.animation');
  for(let i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', (event) => {
    event.target.style.animation = 'Animation 200ms linear';
    setTimeout(() => {
      event.target.style.animation = '';
    }, 220);  });
  }
  
  $(div).click(function() {
    --circleCnt;
    $('#clicks').text(++clicks);
    $(this).fadeOut();
  });
  
  if(circleCnt > 3) {
    alert('Alert For your User!');
    window.location.reload(); 
  }
  
  document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 600;

setInterval(() => {
  i += 1;
  ++circleCnt;
  createDiv(`circle${i}`);
}, oneSecond);

.circle {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0

173

Reload page, If there are more than three div

1 answers

0

Find remote jobs

Andres GPT