Creative Coding with CSS Course 12: Final Calculator

creative-coding-with-css-course-12-final-calculator.markdown

Creative Coding with CSS Course 12: Final Calculator

The final product of my Skillshare course "Creative Coding with CSS". Watch or signup for the class on Skillshare here.

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<input type="radio" id="operators-0" name="operators" value="+" checked/>
<input type="radio" id="operators-1" name="operators" value="-"/>
<input type="radio" id="operators-2" name="operators" value="*"/>
<input type="radio" id="operators-3" name="operators" value="/"/>
&nbsp;
<input type="radio" id="digits-1-0" name="digits-1" value="0"/>
<input type="radio" id="digits-1-1" name="digits-1" value="1" checked/>
<input type="radio" id="digits-1-2" name="digits-1" value="2"/>
<input type="radio" id="digits-1-3" name="digits-1" value="3"/>
<input type="radio" id="digits-1-4" name="digits-1" value="4"/>
<input type="radio" id="digits-1-5" name="digits-1" value="5"/>
<input type="radio" id="digits-1-6" name="digits-1" value="6"/>
<input type="radio" id="digits-1-7" name="digits-1" value="7"/>
<input type="radio" id="digits-1-8" name="digits-1" value="8"/>
<input type="radio" id="digits-1-9" name="digits-1" value="9"/>
&nbsp;
<input type="radio" id="digits-2-0" name="digits-2" value="0"/>
<input type="radio" id="digits-2-1" name="digits-2" value="1" checked/>
<input type="radio" id="digits-2-2" name="digits-2" value="2"/>
<input type="radio" id="digits-2-3" name="digits-2" value="3"/>
<input type="radio" id="digits-2-4" name="digits-2" value="4"/>
<input type="radio" id="digits-2-5" name="digits-2" value="5"/>
<input type="radio" id="digits-2-6" name="digits-2" value="6"/>
<input type="radio" id="digits-2-7" name="digits-2" value="7"/>
<input type="radio" id="digits-2-8" name="digits-2" value="8"/>
<input type="radio" id="digits-2-9" name="digits-2" value="9"/>

<section>
  <h1>CSS Calculator</h1>
  <div class="digits">
    <label for="digits-1-0">0</label>
    <label for="digits-1-1">1</label>
    <label for="digits-1-2">2</label>
    <label for="digits-1-3">3</label>
    <label for="digits-1-4">4</label>
    <label for="digits-1-5">5</label>
    <label for="digits-1-6">6</label>
    <label for="digits-1-7">7</label>
    <label for="digits-1-8">8</label>
    <label for="digits-1-9">9</label>
  </div>

  <div class="operators">
    <label for="operators-0">+</label>
    <label for="operators-1">-</label>
    <label for="operators-2">×</label>
    <label for="operators-3">÷</label>
  </div>

  <div class="digits">
    <label for="digits-2-0">0</label>
    <label for="digits-2-1">1</label>
    <label for="digits-2-2">2</label>
    <label for="digits-2-3">3</label>
    <label for="digits-2-4">4</label>
    <label for="digits-2-5">5</label>
    <label for="digits-2-6">6</label>
    <label for="digits-2-7">7</label>
    <label for="digits-2-8">8</label>
    <label for="digits-2-9">9</label>
  </div>

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

style.scss

// do the math
// 0 = +, 1 = -, 2 = *, 3 = /
@function math($operator, $x, $y) {
  @if $operator == 0 {
    @return $x + $y;
  }
  @elseif $operator == 1 {
    @return $x - $y;
  }
  @elseif $operator == 2 {
    @return $x * $y;
  }
  @elseif $operator == 3 {
    @if $y == 0 {
      @return "∞";
    } @else {
      @return $x / $y;
    }
  } @else {
    @return "WUT";
  }
}

//
// variables

$color-teal: #17c4d3;
$color-tomato: tomato;
$color-gray: #999;

//
// Mixins

@mixin button($color) {
  background: $color;
  color: white;
  font-family: Menlo, Andale Mono, monospace;
  font-size: 24px;
  border-radius: 4px;
  box-shadow: 0px 2px 0px 1px darken($color, 3%);
  
  &:hover {
    background: darken($color, 5%);
    box-shadow: 0px 2px 0px 1px darken($color, 8%);
  }
  &:active {
    background: darken($color, 5%);
    box-shadow: 0px 0px 0px 1px darken($color, 8%);
    transform: translateY(2px);
  }
}

@mixin body-style() {
  background: darken($color-teal, 15%);
  box-shadow: 0px 4px 0px 4px darken($color-teal, 20%);
  border-radius: 8px;
}

@mixin title-style() {
  font-style: italic;
  color: white;
  text-transform: uppercase;
  text-shadow: -2px -2px 0px $color-teal,
    2px 2px 0px $color-tomato;
  font-size: 40px;
  border-bottom: 4px solid $color-teal;
}

@mixin result-style() {
  background: darken($color-teal, 20%);
  color: white;
  font-size: 30px;
  font-family: Menlo, Andale Mono, monospace;
  box-shadow: inset 0px 0px 0px 4px darken($color-teal, 22%);
  border-radius: 4px;
}


//
// Extended classes

%selected-button {
  @include button($color-tomato);
}

%digit-button {
  @include button($color-teal);
}

%operator-button {
  @include button($color-gray);
}

//
// for each operation
@for $o from 0 through 3 {
  // $o = 0, 1, 2, 3
  // for each op input, highlight corresponding label
  #operators-#{$o}:checked ~ section div [for="operators-#{$o}"] {
    @extend %selected-button;
  }
  
  // for each x
  @for $x from 0 through 9 {
    // for each y
    @for $y from 0 through 9 {
      // The result content
      #operators-#{$o}:checked ~ #digits-1-#{$x}:checked ~ #digits-2-#{$y}:checked ~ section .result:after {
        content: "#{math($o, $x, $y)}";
      }
    }
  }
}

// We do this here so that it doesnt run 3 extra times inside our
//  operator @for loop.
@for $i from 0 through 9 {
  // for each digit input, highlight corresponding label
  #digits-1-#{$i}:checked ~ section div [for="digits-1-#{$i}"],
  #digits-2-#{$i}:checked ~ section div [for="digits-2-#{$i}"] {
    @extend %selected-button;
  }
}

//
// interface

body {
  text-align: center;
  background: #f0f0f0;
}

input[type="checkbox"],
input[type="radio"] {
  opacity: 0.8;
  margin-top: 24px;
}

h1 {
  width: calc(100% - 8px);
  margin: 0 auto 0;
  padding-bottom: 0.5rem;
  text-align: center;
  @include title-style();
}

section {
  display: flex;
  width: 95%;
  max-width: 800px;
  margin: 18px auto 0;
  flex-wrap: wrap;
  padding: 24px;
  box-sizing: border-box;
  @include body-style();
  
  // overidden values on larger screens
  flex-direction: column;
  div {
    margin-top: 0.5rem;
    &:first-child {
      margin-top: 12px;
    }
  }
  div.digits {
    height: 200px;
  }
  div.operators {
    height: 65px;
    label {
      width: calc(25% - 8px);
      height: calc(100% - 8px);
    }
  }
  
  // larger screen
  @media (min-width: 600px) {
    flex-direction: row;
    div.digits,
    div.operators {
      height: 300px;
    }
    div.operators {
      label {
        width: calc(50% - 8px);
        height: calc(50% - 8px);
      }
    }
    div {
      margin-top: 12px;
    }
  }
  

  div {
    display: flex;
    flex-wrap: wrap;
    order: 2;

    label {
      padding: 0;
      border: none;
      margin: 4px;
      cursor: pointer;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    &.digits {
      flex: 3;

      label {
        width: calc(33.33% - 8px);
        height: calc(25% - 8px);
        @extend %digit-button;

        // our zero
        &:first-child {
          width: calc(100% - 8px);
        }

        /*
        $digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9; */
        $orders: 9, 6, 7, 8, 3, 4, 5, 0, 1, 2;
        @for $i from 1 through 10 {
          &:nth-child(#{$i}) { order: nth($orders, $i); }
        }
      }
    }

    &.operators {
      flex: 2;

      label {
        @extend %operator-button;
      }
    }

    &.result {
      order: 1;
      width: calc(100% - 8px);
      margin: 12px 4px 0;
      padding: 12px;
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      @include result-style();
    }
  }
}