Birthday Paradox [SCSS]

birthday-paradox-scss.markdown

Birthday Paradox [SCSS]

Birthday Paradox: How many people would have to be in a group so that the probability of at least 2 people having birthday at the same day is greater than 50%?

A Pen by Vandré Leal Cândido on CodePen.

License.

index.haml

%body
  %h1.title Birthday Paradox
  %p.headline How many people would have to be in a group so that the probability of at least 2 people having birthday at the same day is greater than 50%?
  
  %div.probability
    - (1..50).each do |i|
      %span.group

style.scss

// Functions
@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function group_probability($number) {
  $p: 1.0;
  @for $i from 1 through ($number) {
    $p: $p * (365 - $i + 1) / 365;
  }
  @return (1 - $p) * 100;
}

// Styles
$body-color: #222;
$text-color: #999;
$group-color-1: #FFE082;
$group-color-2: #66BB6A;
$group-height: 30px;
$group-spacing: 8px;

body {
  background-color: $body-color;
  color: $text-color;
  font-size: 20px;
  margin: 20px 60px;
}

.headline {
  max-width: 650px;
  margin-bottom: 40px;
  color: darken($text-color, 20%);
  line-height: 30px;
  font-style: italic;
}

.probability {
  margin-right: 80px;
  
  .group {
    @for $i from 1 through 50 {
      &:nth-child(#{$i}) {
        display: block;
        height: $group-height;
        margin: $group-spacing 0;
        background-color: $group-color-1;
        width: unquote((#{group_probability($i)}) + '%');

        @if(group_probability($i) > 50%) {
          background-color: $group-color-2;
        }

        &:before, &:after {
          display: block;
          height: $group-height;
          margin: ($group-spacing/2) 0;
        }

        &:before {
          content: "#{$i}";
          position: absolute;
          left: 20px;
        }

        &:after {
          content: "#{group_probability($i)}%";
          position: absolute;
          right: 20px;
        }
      }
    }
  }
}