Develop Reference

Rolling numbers in js

I created rolling numbers
On the site I'm building in React.
How do I make it start working that it gets to the working place that it is?
It's starting to work for me that the page comes up
const RollingNumbers = () => {
useEffect(() => {
let valueDisplays = document.querySelectorAll(".amount");
let interval = 4000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue === endValue) {
clearInterval(counter);
}
}, duration);
});
enter image description here
Thank you

How to assign clearInterval function to the button which would stop the function started by another button?

As I understood from MDN, I am supposed to make variable and assign setInterval function to it, so that I could use that variable and call clearInterval for it, but for some reason, my code is now working. It is properly fetching data with buttonStart, but will not stop fetching data with buttonStop.
Thank you for your time.
const buttonStart = document.querySelector('#start')
const buttonStop = document.querySelector('#stop')
const list = document.querySelector('#list')
class Price {
constructor(time, price) {
this.time = time
this.price = price
}
}
const fetchBitcoin = async () => {
try {
const res = await fetch('https://api.cryptonator.com/api/ticker/btc-usd');
const data = await res.json();
const newPrice = new Price(data.timestamp, data.ticker.price)
return newPrice
} catch (e) {
console.log("Something went wrong in downloading price", e)
}
}
const addNewPrice = async () => {
const newLI = document.createElement('LI')
const newElement = await fetchBitcoin()
const newTime = convertTime(newElement.time)
newLI.append(newTime, ' ', newElement.price.slice(0, 8))
list.append(newLI)
}
function convertTime(time) {
let unix_timestamp = time
var date = new Date(unix_timestamp * 1000);
var hours = date.getHours();
var minutes = "0" + date.getMinutes();
var seconds = "0" + date.getSeconds();
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime
}
let interval = buttonStart.addEventListener('click', () => {
setInterval(addNewPrice, 2000)
})
buttonStop.addEventListener('click', () => clearInterval(interval));

You need to create interval variable and assign the return value of the setInterval method rather than addEventListener because addEventListener does not return anything,
let interval;
buttonStart.addEventListener('click', () => {
interval = setInterval(addNewPrice, 2000)
})

You need to adjust the example below to your use case but this is what you need in general:
var timerEl = document.querySelector('.js-timer');
var startBtn = document.querySelector('.js-start');
var stopBtn = document.querySelector('.js-stop');
var intervalId;
var timer = 0;
startBtn.addEventListener('click', function() {
stopTimer();
console.log('start timer');
intervalId = setInterval(execTimer, 100);
});
stopBtn.addEventListener('click', stopTimer);
function stopTimer() {
timer = 0;
console.log('stop timer');
clearInterval(intervalId);
renderTimer();
}
function execTimer() {
timer++;
renderTimer();
console.log('timer score', timer);
}
function renderTimer() {
timerEl.textContent = timer;
}
<span class="js-timer"></span><br />
<button class="js-start">Start</button>
<button class="js-stop">Stop</button>

Moment JS subtract problems

I'm setting up a timer with moment, is not the only one I have in this screen but this doesn't work:
const halfBellTimer = () => {
const x = setInterval(() => {
let countTime = moment.duration().add({seconds: meditationTime / 2});
if (countTime <= 0) {
console.log('STOP');
} else {
countTime = countTime.subtract(1, 's');
console.log(countTime.seconds());
}
}, 1000);
};
It sets the time correctly but I get a log of the same value, so it doesn't subtract it.
Any idea?
Thanks!

If you move let countTime = moment.duration().add({seconds: meditationTime / 2});
outside of setInterval function it works fine.
Don't forget to clean up with clearInterval.
Take a look at the example.
const halfBellTimer = () => {
const meditationTime = 10;
let countTime = moment.duration().add({
seconds: meditationTime / 2
});
const x = setInterval(() => {
if (countTime <= 0) {
console.log('STOP');
clearInterval(x);
} else {
countTime = countTime.subtract(1, 's');
console.log(countTime.seconds());
}
}, 1000);
};
halfBellTimer();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>

Can i call a action in every 20 second inside a timer which is always running in every second

I need to print a console in every 20 second(technically i will call a action in reactjs) inside a interval which is running in every second.
this is a dummy code not functioning properly.
var intervalDuration = 200;
var hitOnEvery = 20;
setInterval(() => {
interValDuration -= 1;
if (interValDuration >= 0) {
setTimeout(()=>{
console.log(interValDuration , 'Hit on every' + hitOnEvery + 'second')
},hitOnEvery);
}
console.log('This will print every '+intervalDuration +'count in a place')
}, 1000);
can someone correct and help me.

You can do it like this:
var interValDuration = 200;
var hitOnEvery = 20;
setInterval(() => {
interValDuration -= 1;
if (interValDuration % hitOnEvery == 0) {
console.log(interValDuration , 'Hit on every' + hitOnEvery + 'second')
}
console.log('This will print every '+interValDuration +'count in a place')
}, 1000);
Basically check if interValDuration divided by hitOnEvery has 0 leftover after division, meaning every 20sec perform action

Here is the closure function, for the generic usage
const timer = (() => {
let timer;
let seconds = 1;
return (func, hitAtTime) => {
let stopTimer = () => {
console.log(timer);
window.clearInterval(timer);
};
const startTimer = () => {
timer = window.setInterval(() => {
console.log("i run every second");
seconds++;
if (seconds % hitAtTime === 0) {
func();
}
}, 1000);
};
return {
stopTimer: stopTimer,
startTimer: startTimer,
};
};
})();
timer(() => console.log("i run every 10 seconds"), 10).startTimer();

How to make a countdown timer function reusable

I have a countdown function like the following:
data(){
return {
timer: null
}
}
methods: {
countdown: function(time){
const TIME_COUNT = time;
if (!this.timer) {
this.count = TIME_COUNT;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
}
else{
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
I want to call the countdown function with different parameters like countdown(10) or countdown(60) so that every time I call this function it starts counting from the time I want. If I call the countdown method it will count to 0 before the second countdown works. What should I do to make it reusable?

This should let you instantiate multiple countdown instance functions.
const methods = {
countdown: (time) => {
let timeRemaining = time;
let timer;
timer = setInterval(() => {
if (timeRemaining > 0) {
timeRemaining--;
} else {
clearInterval(timer);
}
}, 1000)
}
}