My Virtual Challenge Percentage Bookmarklet

I did 1000 miles of exercise at the beginning of the year (I'm only £20 off my target if you want to follow that link and donate?) using My Virtual Mission and found myself at a loose end when I finished the challenge... so I signed up for a new one. This one is a lot longer (2,485.5 miles), and I've been assiduously adding my steps and cycle rides every morning since I started - but I don't know what percentage I've completed. So I wrote some code in a Snippet and converted it, once it was doing what I needed, into a Bookmarklet: Get Percentage. I've found it works well so feel free to copy it to your bookmarks should you also want to see your millage converted to a percentage.

Should you want to check the code, here it is:

const container = document.querySelector('.mission-container')
const target = container.querySelector('.mission-target')
const current = target.querySelector('#goal-mine .progress-bar-current')
const missionTarget = Number(target.querySelector('.totals .total-value').innerHTML.split(' ')[0].replace(/,/g, ''))
const current_text = current.innerHTML
const current_miles = Number(current_text.split(' ')[0].replace(/,/g, ''))
current.innerHTML = `${current_text} (${((current_miles / missionTarget) * 100).toFixed(2)}%)`

px 2 rem sass

I was working with a designer recently and so had to convert px measurements to REM. Given that I set the base font size to 16px, I figured the fastest way to develop some utility classes was using SASS. This script seems to generate enough utility classes and, should I need anything more for a class or id, I can use #{(1 / 16) * x}rem;, where x is the number of pixels from the designer.

@for $i from 1 through 32 {
    .f-s-#{$i}px {
        font-weight: #{(1 / 16) * $i}rem;
    }
    .l-h-#{$i}px {
        line-height: #{(1 / 16) * $i}rem;
    }
}

I was asked about extracting a subarray from an array of objects...

The function needed to be compliant with ES5, and the data was in this format:

const bob = [
  {
    "bob": {
      "1.1": 11,
      "1.2": [
        {
          "1.2.1": 121
        }, {
          "1.2.2": 122
        }
      ],
      "list": [
        {
          "bob.1.1": 121
        }, {
          "bob.1.2": 122
        }
      ]
    }
  }, {
    "bob": {
      "2.1": 11,
      "2.2": [
        {
          "2.2.1": 121
        }, {
          "2.2.2": 122
        }
      ],
      "list": [
        {
          "bob.2.1": 121
        }, {
          "bob.2.2": 122
        }
      ]
    }
  }, {
    "bob": {
      "3.1": 11,
      "3.2": [
        {
          "3.2.1": 121
        }, {
          "3.2.2": 122
        }
      ]
    }
  }, {
    "fred": {
      "4.1": 11,
      "4.2": [
        {
          "4.2.1": 121
        }, {
          "4.2.2": 122
        }
      ],
      "list": [
        {
          "bob.4.1": 121
        }, {
          "bob.4.2": 122
        }, {
          "bob.4.3": 122
        }
      ]
    }
  }, {
    "bob": {
      "5.1": 11,
      "5.2": [
        {
          "5.2.1": 121
        }, {
          "5.2.2": 122
        }
      ],
      "list": [
        {
          "bob.5.1": 121
        }, {
          "bob.5.2": 122
        }, {
          "bob.5.3": 122
        }, {
          "bob.5.4": 122
        }
      ]
    }
  }, {
    "bob": {
      "6.1": 11,
      "6.2": [
        {
          "6.2.1": 121
        }, {
          "6.2.2": 122
	      }
      ],
      "list": [
        {
          "bob.6.1": 121
        }
      ]
    }
  }
]

Only the `list` was required from objects called `bob`.

I was restricted to using ES5, so I came up with this:

const bobs = bob.reduce(function(a, c) {
  if (!!c.bob && !!c.bob.list) {
    Array.prototype.push.apply(a, c.bob.list)
  }
  return a
}, [])
console.log(bobs.length)