Haste's Code Tips

west Widgets

This is a page where I'll be sharing some of the widgets that I've made. I'm really happy with how they turned out, and I hope you like them too.

calendar_today Year Progress Viewer

CSS


              widget {
  display:block;
  border-radius:5px;
  overflow:hidden;
  position: relative;
}

widget-title {
  display:block;
  background:#32a852;
  color: #fff;
  padding:20px;
}

widget-body {
  display:block;
  background:#000;
  color:#fff;
  padding:20px;
}

widget-center {
  display:flex;
  justify-content:center;
  align-items:center;
  height:fit-content;
}

HTML


              <widget id="widget-year-progress" style="max-width:400px">
  <widget-title>
      Year Progress - Day <span id="year-progress-day">0</span> of 365
  </widget-title>
  <widget-body id="year-progress-bar">
    <widget-center>
      <span id="year-progress-bar-percent">0</span>%
      [<span id="year-progress-bar-fill"></span>]
    </widget-center>
  </widget-body>
</widget>

JavaScript


              var yearProgress = document.getElementById('widget-year-progress')
var yearProgressDay = document.getElementById('year-progress-day')
var yearProgressBar = document.getElementById('year-progress-bar')
var yearProgressBarFill = document.getElementById('year-progress-bar-fill')
var yearProgressBarPercent = document.getElementById('year-progress-bar-percent')

var now = new Date()
var start = new Date(now.getFullYear(), 0, 0)
var diff = now - start
var oneDay = 1000 * 60 * 60 * 24
var day = Math.floor(diff / oneDay)

yearProgressDay.innerText = day
yearProgressBarFill.innerText = '█'.repeat(day / 21) + '░'.repeat(365 / 21 - day / 21)
yearProgressBarPercent.innerText = Math.floor(day / 365 * 100)