LYGwwWQ

index.html

<div id="bar">
  <div id="patreon"></div>
  <div id="drivethru"></div>
  <div id="twitch"></div>
  <div id="dayjob"></div>
  <div id="unearned"></div>
</div>

lygwwwq.markdown

LYGwwWQ

A Pen by Lucille Blumire on CodePen.

License.

script.js

const target = 1500
const earnings = {
  twitch: 0,
  patreon: 20,
  drivethru: 0,
  dayjob: 500,
}
for (let k of Object.keys(earnings)) {
  document.getElementById(k).style.height = `${100 * (earnings[k]/target)}vh`;
}

style.css

* {
  margin: 0;
  padding: 0;
}
#bar {
  background-color: white;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#bar div {
  width: 100vw;
}
#patreon {
  background-color: #FF5722;
}
#twitch {
  background-color: #673AB7;
}
#unearned {
  background-color: #9E9E9E;
  flex-grow: 1;
}
#drivethru {
  background-color: #F44336;
}
#dayjob {
  background-color: #2196F3;
}