Story Points Calculator

Convert story points to time

by Kevin Pliester

HTML

<form class="story_points_calculator" action="" method="GET">
  <div class="inputs">
    <input type="number" name="story_points" min="1" placeholder="Story Points eingeben">
  </div>

  <div class="result">
  </div>
</form>

CSS

:root {
  --pxbt-spc-primary-color: red;
  --pxbt-spc-border-color: #ddd;
  --pxbt-spc-muted-background-color: #f5f5f5;
  --pxbt-spc-background-color: #fff;
}

.story_points_calculator {
  background: var(--pxbt-spc-background-color);
  border: 1px solid var(--pxbt-spc-border-color);
  border-radius: 3px;
  padding: 3rem;
  font-family: Arial, sans-serif;
}

.story_points_calculator .inputs {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.story_points_calculator .inputs input[type="number"] {
  height: 2rem;
  line-height: 2rem;
  padding: 0 1rem;
  border: 1px solid var(--pxbt-spc-border-color);
  border-radius: 3px;
  flex: 1;
}

.story_points_calculator .inputs input[type="submit"]:hover {
  opacity: 0.85;
}

.story_points_calculator .result div {
  padding: 1rem 1rem 0 1rem;
  background: var(--pxbt-spc-muted-background-color);
}

.story_points_calculator .result div:first-child {
  margin-top: 1rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.story_points_calculator .result div:last-child {
  padding-bottom: 1rem;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

JavaScript

(function($) {
  'use strict';

  let day_hours = 7;
  let week_days = 5;

  function isNumber(value) {
    return !isNaN(parseFloat(value)) && isFinite(value);
  }

  $('.story_points_calculator').on('submit input change', function(e) {
    e.preventDefault();
    let form = $(this);
    let story_points = form.find('[name="story_points"]').val();
    let results = form.find('.result');

    if (!isNumber(story_points)) {
      return results.html('');
    }

    let minutes = (story_points * 30) + (story_points * 15 * story_points)
    let hours = Math.ceil(minutes / 60);
    let days = Math.ceil(hours / day_hours);
    let weeks = Math.ceil(days / week_days);

    let result_html = '';
    result_html += '<div><strong>Minuten:</strong> <span>' + minutes + '</span></div>';
    result_html += '<div><strong>Stunden:</strong> <span>' + hours + '</span></div>';
    result_html += '<div><strong>Tage:</strong> <span>' + days + '</span></div>';
    result_html += '<div><strong>Wochen:</strong> <span>' + weeks + '</span></div>';

    return results.html(result_html);
  });
})(jQuery);