fix: generalization countdown for any year

This commit is contained in:
Nicola Zambello 2021-01-01 00:00:39 +01:00
parent 8f0f843ddd
commit 1d38a9b2b7

View file

@ -1,45 +1,54 @@
import React, { Component } from 'react';
import './index.scss';
import React, { Component } from 'react'
import './index.scss'
const _second = 1000;
const _minute = _second * 60;
const _hour = _minute * 60;
const _day = _hour * 24;
const _second = 1000
const _minute = _second * 60
const _hour = _minute * 60
const _day = _hour * 24
class App extends Component {
constructor() {
super();
super()
const now = new Date();
let imWaitingForDrinking = true; // of course default to true
let year = now.getFullYear() + 1;
const now = new Date()
let imWaitingForDrinking = true // of course default to true
let year = now.getFullYear() + 1
let countdownData = {}
if (now.getMonth() === 0 && now.getDate() === 1) {
imWaitingForDrinking = false;
year = now.getFullYear();
}
else {
countdownData = this.getMissingTime(now);
imWaitingForDrinking = false
year = now.getFullYear()
} else {
countdownData = this.getMissingTime(now)
}
this.state = {
isNewYear: !imWaitingForDrinking,
newYear: year,
countdownID: null,
countdownData: countdownData,
};
countdownData: countdownData
}
}
getMissingTime = now => {
const midnight = new Date('2019-01-01 00:00');
const delta = midnight - now;
getMissingTime = (now) => {
const newYear = now.getFullYear() + 1
return {
days: Math.floor(delta / _day),
hours: Math.floor((delta % _day) / _hour),
minutes: Math.floor((delta % _hour) / _minute),
seconds: Math.floor((delta % _minute) / _second),
if (this.state && this.state.newYear && this.state.newYear === now.getFullYear()) {
this.setState({
isNewYear: true
})
return this.state.countdownData
} else {
const midnight = new Date(`${newYear}-01-01 00:00`)
const delta = midnight - now
return {
days: Math.floor(delta / _day),
hours: Math.floor((delta % _day) / _hour),
minutes: Math.floor((delta % _hour) / _minute),
seconds: Math.floor((delta % _minute) / _second)
}
}
}
@ -90,8 +99,8 @@ class App extends Component {
</p>
</div>
<div className="pyro">
<div className="before"></div>
<div className="after"></div>
<div className="before" />
<div className="after" />
</div>
</React.Fragment>
)}
@ -99,7 +108,7 @@ class App extends Component {
<div className="text-wrapper">
<p>Countdown to {newYear}</p>
<div className="countdown">
{getCountdownMarkup(countdownData['days'], 's')}
{getCountdownMarkup(countdownData['days'], 'd')}
{getCountdownMarkup(countdownData['hours'], 'h')}
{getCountdownMarkup(countdownData['minutes'], 'm')}
{getCountdownMarkup(countdownData['seconds'], 's')}
@ -107,8 +116,8 @@ class App extends Component {
</div>
)}
</div>
);
)
}
}
export default App;
export default App