---
layout: page
---

<a target="_blank" style="position:absolute; top:10px; padding-left:400px; padding-bottom:10px" href="https://github.com/{{ page.title }}/">{{ page.title }}</a>

<a style="position:absolute; top:10px; padding-left:10px; padding-bottom:10px" href="{{ site.baseurl }}/cfa/">< back</a>
<a style="position:absolute; top:10px; padding-left:200px; padding-bottom:10px" href="{{ site.baseurl }}/cfa/">About the CFA</a>

<div id="app">

<br />

<svg id="svg" class="svg" xmlns="http://www.w3.org/2000/svg" width="200" height="35" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200.58699 34.999">
  <path d="M 0,0 H 146.01893 V 35 H 0 Z" fill="#333" style="color:#000" stroke-width="1.46415269" />
  <text y="22" x="65.093933" font-size="13" font-family="ITCGothicBold.ttf" text-anchor="middle" fill="#ffffff">software checklist</text>
  <path id="svg-color" d="m 146.01893,0 h 55.57 v 35 h -55.57 z" />
  <text id="svg-score" font-size="13" y="22" x="173.22897" font-family="ITCGothicBold.ttf" text-anchor="middle" fill="#ffffff">0</text>

{{ content }}

<h2>Badge</h2>

Want to include this badge with your project?

<blockquote class="markdown" style="display:none; overflow:hidden">
</blockquote>


</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {

    // Current user score
    score: 0,
    points: 0,
    total: 0,
    title: "{{ page.title }}",
    color: null,
    
    // Must be same length as number of points
    colors: ["#B43C3C","#BB473E","#BF5340","#BF6240","#BF6F40","#BF7540","#BF7D40","#BF8440","#BF8E40","#BF9740","#BF9F40","#BFAA40","#BFB540","#BFBB40","#AEBF40","#9FBF40","#80BF40","#59BF40"]
  },
  // The view will trigger these methods on click

  methods: {

    populateScore: function() {
      // Get all of the unique ids
      var checked = document.querySelectorAll('input.task-list-item-checkbox[type="checkbox"]:checked')

      // Don't continue if no points checked!
      if (checked.length == 0) {
      $(".markdown").text("This project does not have enough criteria checked to create a badge.");
      $(".markdown").show();
       return
      }

      console.log(this.colors);
      console.log(this.points)

      // Need to scale points from 1-18
      var color_index = parseInt((this.points / this.total) * 18)

      // Prepare badge images
      var badgeColor = this.colors[color_index];
      this.color = badgeColor;
      var badgeScore = Math.round(this.score) + "%25"
      var badgeUrl = "https://img.shields.io/badge/software%20checklist-" + badgeScore + "-" + badgeColor.replace("#", "");

      // Prepare badge link (summary page with badge and ids
      var badgeLink = "{{ site.url }}{{ site.baseurl }}/{{ page.url }}"

      var result = "[![" + badgeUrl + "](" + badgeUrl + ")](" + badgeLink + ")"
      $(".markdown").text(result);
      $(".markdown").show();

    },

    generateBadge:function() {
      // Update the svg score
      console.log("Updating score to " + this.points + "/" + this.total);
      $("#svg-score").text(this.points + "/" + this.total);
      $("#svg-color").attr("fill", this.color);
    },
    countPoints: function() {
      this.total = document.querySelectorAll('input.task-list-item-checkbox[type="checkbox"]').length;
      this.points = document.querySelectorAll('input.task-list-item-checkbox[type="checkbox"]:checked').length;
      this.score = (100 * (this.points / document.querySelectorAll('input.task-list-item-checkbox[type="checkbox"]').length)).toFixed(2);
      $('#svg-score').text(Math.round(this.score) + "%")
      $('#svg-color').attr("fill", this.colors[this.points - 1])
    }
  },
  mounted(){
    this.countPoints();
    this.populateScore();
    this.generateBadge();
  },
});
</script>

