How to callback to blink on condition

Question

At 0s I would like it to blink the div.count from the button independently. No problem for this code, at least I think.

I'm trying callback to blink on condition something like the answer of this thread. I got completely confused about how to set the functions, so where to put them and how to put them

let btn = document.querySelector("#btn");

setInterval(function() {
  let count = document.querySelector("#count");
  let result = Number(count.innerText) - 1;

  if (result < 0) {
    result = 3;
  }

  count.innerText = result;
}, 1000);

*,
*::after,
*::before {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
}

html,
body {
  height: 100vh;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: aliceblue;
}

.counter_conatiner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-top: 1rem;
}

#count {
  font-size: 3rem;
  background-color: #4c96af;
  padding: 2px 12px;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 4px;
  color: #fff;
}

button {
  position: relative;
  background-color: #4caf50;
  border: none;
  font-size: 28px;
  color: #ffffff;
  padding: 15px;
  width: 150px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;
}

button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s;
}

button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
}

.blink-bg {
  color: #fff;
  padding: 10px;
  display: inline-block;
  border-radius: 5px;
  animation: blinkingBackground 100ms none;
}

@keyframes blinkingBackground {
  50% {
    background-color: #ef0a1a;
  }
}

<h1>callback</h1><br />
<div id="count">3</div><br />
<button id="btn">blink count by this button at 0s each times</button>

score 0 · Answer 1 · answered Oct 26 '22 at 16:45

0

Hope I understood you correctly

let interval;
function btnClick(){
  if(interval){
    clearInterval(interval);
    interval = null;
  }else {
    interval = setInterval(function() {
      let count = document.querySelector("#count");
      let result = Number(count.innerText) - 1;
    
      if (result < 0) {
        result = 3;
      }
    
      count.innerText = result;
    }, 1000);
  }
}

answered Oct 26 '22 at 16:45

Amit Kahlon

108
1
1
10

``` if (result == 0) { button.click().count.classlist.toggle('blink-bg'); result = 3}; ``` With most of the codes you wrote. Basically a function that clicks at 0s, adding the blink-bg class for 100ms each time – soap Oct 26 '22 at 18:19

How to callback to blink on condition

1 Answers1