<!-- Happy new Year! -->
<div id="container">
<div id="barcontainer">
<div id="title">Progress.</div>
<div id="yp">Year Progress: <span id="ypp"></span></div>
<div id="ygraph">
<div id="ybar"></div>
</div>
<div id="mp">Month Progress: <span id="mpp"></span></div>
<div id="mgraph">
<div id="mbar"></div>
</div>
<div id="dp">Day Progress: <span id="dpp"></span></div>
<div id="dgraph">
<div id="dbar"></div>
</div>
<div id="hp">Hour Progress: <span id="hpp"></span></div>
<div id="hgraph">
<div id="hbar"></div>
</div>
<div id="mip">Minute Progress: <span id="mipp"></span></div>
<div id="migraph">
<div id="mibar"></div>
</div>
</div>
<div id="abt">
<div id="dm">🌘</div>
<div id="txt">🎉 Happy 2020! 🎉<br>Made on the 31st of<br>Dezember 2019.<br><br>Previous years:<br><a href="https://codepen.io/nitnelav/pen/yGzxNv" target="_blank">2018</a><br><a href="https://codepen.io/nitnelav/pen/vpmQQq" target="_blank">2017</a></div>
</div>
<div id="settings">âš™</div>
</div>
/*Happy 2020! 🎉*/
:root {
--bright: #fff;
--dark: #000;
}
#container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: "IBM Plex Mono", monospace;
font-size: 2vh;
color: var(--dark);
overflow: hidden;
background: var(--bright);
}
#settings {
position: absolute;
top: 1vh;
right: 30vh;
font-size: 3vh;
color: var(--bright);
cursor: pointer;
transition: right 0.2s;
}
#abt {
position: absolute;
top: -40vh;
left: calc(100vw - 40vh);
height: 60vh;
width: 60vh;
border-radius: 100%;
background: var(--dark);
transition: all 0.5s cubic-bezier(0.87, -0.2, 0.19, 1.2);
}
#txt {
position: absolute;
top: 42vh;
left: 12vh;
height: 22vh;
width: 25vh;
font-size: 1.5vh;
text-align: center;
color: var(--bright);
background: none;
}
#dm {
position: absolute;
top: 42vh;
right: -1vh;
width: 25vh;
font-size: 2.2vh;
cursor: pointer;
}
#barcontainer {
position: absolute;
top: 18vh;
left: 0;
right: 0;
height: 75vh;
overflow: hidden;
}
#title {
font-size: 7vh;
margin-left: 10vw;
margin-bottom: 7vh;
font-weight: 700;
}
#yp,
#mp,
#dp,
#hp,
#mip {
margin-left: 10vw;
margin-bottom: 1vh;
}
#ygraph,
#mgraph,
#dgraph,
#hgraph,
#migraph {
height: 3vh;
width: 80vw;
border: 1px solid var(--dark);
overflow: hidden;
margin-bottom: 5vh;
margin-left: 10vw;
}
#ybar,
#mbar,
#dbar,
#hbar,
#mibar {
height: 3vh;
width: 0vw;
background: var(--dark);
transition: width 0.5s;
}
a,
a:link,
a:visited {
color: var(--bright);
}
@media (prefers-color-scheme: dark) {
:root {
--dark: #fff;
--bright: #000;
}
}
//Happy 2020! 🎉
///////////////////////////
//Defaults and Vars
let def_with = 80;
let exp = true;
let dm;
let set_btn = document.getElementById("settings");
let dm_btn = document.getElementById("dm");
let root = document.documentElement;
///////////////////////////
//Main Interval
setInterval(() => {
//Set start of year
let d = new Date();
d.setMonth(0);
d.setDate(1);
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
//calculate seconds since start of Year
let now = new Date();
let elapsedY = now - d;
//calculate percentage for year
let spy = secondsPerYear(now.getFullYear());
let yperc = elapsedY / 1000 / spy;
yperc = Math.round(yperc * 10000000) / 100000;
ypp.innerHTML = yperc + "%";
ybar.style.width = def_with * yperc / 100 + "vw";
//calculate percentage for month
let startOfMonth = new Date();
startOfMonth.setDate(1);
startOfMonth.setHours(0);
startOfMonth.setMinutes(0);
startOfMonth.setSeconds(0);
startOfMonth.setMilliseconds(0);
let elapsedM = now - startOfMonth;
let spm = secondsPerMonth(now.getFullYear(), now.getMonth() + 1);
let mperc = elapsedM / 1000 / spm;
mperc = Math.round(mperc * 1000000) / 10000;
mpp.innerHTML = mperc + "%";
mbar.style.width = def_with * mperc / 100 + "vw";
//calculate percentage for day
let startOfDay = new Date();
startOfDay.setHours(0);
startOfDay.setMinutes(0);
startOfDay.setSeconds(0);
startOfDay.setMilliseconds(0);
let elapsedD = now - startOfDay;
let dperc = elapsedD / 1000 / 86400;
dperc = Math.round(dperc * 100000) / 1000;
dpp.innerHTML = dperc + "%";
dbar.style.width = def_with * dperc / 100 + "vw";
//calculate percentage for hour
let startOfHour = new Date();
startOfHour.setMinutes(0);
startOfHour.setSeconds(0);
startOfHour.setMilliseconds(0);
let elapsedH = now - startOfHour;
let hperc = elapsedH / 1000 / 3600;
hperc = Math.round(hperc * 10000) / 100;
hpp.innerHTML = hperc + "%";
hbar.style.width = def_with * hperc / 100 + "vw";
//calculate percentage for minute
let startOfMinute = new Date();
startOfMinute.setSeconds(0);
startOfMinute.setMilliseconds(0);
let elapsedMi = now - startOfMinute;
let miperc = elapsedMi / 1000 / 60;
miperc = Math.round(miperc * 1000) / 10;
mipp.innerHTML = miperc + "%";
mibar.style.width = def_with * miperc / 100 + "vw";
}, 1000);
///////////////////////////
//Settings
set_btn.addEventListener("click", e => {
if (exp) {
set_btn.style.right = "1vh";
set_btn.style.color = "var(--dark)";
abt.style.left = "120vw";
abt.style.top = "-100vh";
exp = false;
} else {
set_btn.style.right = "30vh";
set_btn.style.color = "var(--bright)";
abt.style.left = "calc(100vw - 40vh)";
abt.style.top = "-40vh";
exp = true;
}
});
///////////////////////////
//Darkmode
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
root.style.setProperty("--bright", "#000");
root.style.setProperty("--dark", "#fff");
dm_btn.innerHTML = "🌖";
dm = false;
} else {
root.style.setProperty("--bright", "#fff");
root.style.setProperty("--dark", "#000");
dm_btn.innerHTML = "🌘";
dm = true;
}
dm_btn.addEventListener("click", e => {
if (dm) {
root.style.setProperty("--bright", "#000");
root.style.setProperty("--dark", "#fff");
dm_btn.innerHTML = "🌖";
dm = false;
} else {
root.style.setProperty("--bright", "#fff");
root.style.setProperty("--dark", "#000");
dm_btn.innerHTML = "🌘";
dm = true;
}
});
///////////////////////////
//Helper Functions
function secondsPerYear(year) {
if (leapYear(year)) {
return 31622400;
} else {
return 31536000;
}
}
function leapYear(year) {
return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
}
function secondsPerMonth(y, m) {
let spm = new Date(y, m, 0).getDate() * 24 * 3600;
return spm;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.