Creative Coding with CSS Course 11: flexbox vertical centering, @media queries

creative-coding-with-css-course-11-flexbox-vertical-centering-media-queries.markdown

Creative Coding with CSS Course 11: flexbox vertical centering, @media queries

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

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

%vertically-center-content {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

// 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: "#{math($o, $x, $y)}";
      }
    }
  }
}

//
// interface

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

input[type="radio"] {
  margin-top: 36px;
}

section { background: hotpink; }
section div { background: lightgray; }

section {
  width: 95%;
  max-width: 800px;
  margin: 24px auto 0;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  // overidden values on larger screens
  flex-direction: column;
}
section div {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}
div label {
  display: block;
  cursor: pointer;
  text-align: center;
  color: white;
  background: black;
}

div.digits {
  height: 180px;
}

div.operators {
  height: 45px;
}
div.operators label {
  width: 25%;
}

div {
  order: 2;
}

div.result {
  order: 1;
  padding: 24px;
}
  

div.digits label {
  width: 33.333%;
  height: 25%;
}

label {
  margin: 4px;
}

div.digits label {
  width: calc(33.3333% - 8px);
  height: calc(25% - 8px);
}

div.operators label {
  width: calc(25% - 8px);
  height: calc(100% - 8px);
}

div.digits label:nth-child(1) {
  width: calc(100% - 8px);
}

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

section {
  background: white;
}
section div {
  background: transparent;
  &.result {
    background: black;
    color: white;
  }
}

// New code for Lesson 10

// vertically center label text
div label {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.result {
  // "text-align: center" will not work since div.result = flex
  // div.result's flex-direction is "row", so alignment is horizontal
  flex-direction: row;
  justify-content: center;
}

@media (min-width: 600px) {
  section {
    flex-direction: row;
    flex-wrap: wrap;
  }
  h1 {
    width: 100%;
  }
  div.result {
    width: 100%;
    margin: 4px;
    width: calc(100% - 8px);
    box-sizing: border-box;
  }
  div.digits,
  div.operators {
    height: 300px;
  }
  div.digits {
    flex: 3;
  }
  div.operators {
    flex: 2;
  }
  div.operators label {
    width: calc(50% - 8px);
    height: calc(50% - 8px);
  }
}


// Old code


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

%vertically-center-content {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

// 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: "#{math($o, $x, $y)}";
      }
    }
  }
}