Creative Coding with CSS Course 08: A Calculator.

creative-coding-with-css-course-08-a-calculator.markdown

Creative Coding with CSS Course 08: A Calculator.

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>
  <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";
  }
}

%selected-button {
  background: tomato;
  pointer-events: none;
}

// 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 digit input, highlight corresponding label
    #digits-1-#{$x}:checked ~ section div [for="digits-1-#{$x}"],
    #digits-2-#{$x}:checked ~ section div [for="digits-2-#{$x}"] {
      @extend %selected-button;
    }
    // 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: "#{$x + $y}";
        content: "#{math($o, $x, $y)}";
      }
    }
  }
}





.result {
  font-size: 40px;
  font-weight: bold;
}

.operators, .digits, .result {
  margin-top: 10px;
}

label {
  display: inline-block;
  background: black;
  color: white;
  padding: 12px;
}

body {
  text-align: center;
  padding-top: 20px;
  font-size: 20px;
}