# 1F - 9x9 乘法表
[竹白記事本](https://chupainotebook.blogspot.com/)，筆記紀錄。

###### tags: `JS 地下城`


## BOSS 弱點
1. 【特定技術】需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印出。
2. 需使用 HTML、CSS、JS 技術
3. 介面需與設計稿一致

## 下載資源
>[UI 線上設計稿](https://xd.adobe.com/spec/256981fc-ef65-4d9b-773c-45d8ef0353c6-5358/screen/50fba855-bde7-4771-b73c-3fd839418cf0/multiplication-chart/)

## 排版
- Bootstrap 4 格線系統
- flex
- BEM 命名規範

<div class="container h-mt-80 h-mb-40">
  <div class="row">
    <div class="col-md-6 col-xl-4 h-mb-40">
      <div class="titleBlock">
        <h1 class="titleBlock__title">九九乘法表</h1>
        <span class="titleBlock__subTitle">MULTIPLICATION CHART</span>
        <div class="titleBlock__decos">
          <div class="titleBlock__deco"><span></span></div>
          <div class="titleBlock__deco"><span></span></div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-4 h-mb-40">
      <div class="numBlock">
        <ul class="numBlock__list">
          <li class="numBlock__item"><h2 class="numBlock__listTitle">2</h2></li>
          <li class="numBlock__item"><p class="numBlock__number">2 × 1 ＝ 2</p></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<footer class="footer">
  <div class="container">
    Copyright © 2019 HexSchool. All rights reserved.
  </div>
</footer>

[CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');

// variables
$primary: #2eb738;
$secondary: #f0f0f0;
$light: white;

// mixin
@mixin full {
  width: 100%;
  height: 100%;
}

// reboot
*,
*::after,
*::before {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: $primary;
}

body {
  background-color: $secondary;
  min-width: 500px;
  color: $primary;
  font-family: Helvetica, 'Noto Sans TC', sans-serif;
}

// h
.h-mt-80 {
  margin-top: 80px !important;
}

.h-mb-40 {
  margin-bottom: 40px !important;
}

// m
.titleBlock {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  max-width: 350px;
  height: 366px;

  &__title {
    font-size: 56px;
    line-height: 84px;
    font-weight: 600;
  }
  &__subTitle {
    font-size: 24px;
    line-height: 36px;
  }

  &__decos {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  &__deco {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    > span {
      width: 280px;
      border: 0.5px solid $primary;
    }
    &::after,
    &::before {
      content: 'x';
    }
  }
}

.numBlock {
  border-radius: 100px 0px 30px 0px;
  box-shadow: 0px 3px 10px #d8d8d8;
  background-color: $light;
  margin: 0 auto;
  padding: 64px 40px;
  max-width: 350px;
  height: 366px;

  &__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  &__item {
    display: flex;
    align-items: center;
    height: (100%/6);
    &:nth-child(1) {
      justify-content: center;
      height: (100%/6 * 3);
    }
  }

  &__listTitle {
    font-size: 128px;
    text-align: center;
    font-weight: bold;
    text-shadow: 4px 3px 0 #f0f0f0;
  }

  &__number {
    font-size: 24px;
  }
}

.footer {
  background-color: $primary;
  color: $light;
  text-align: right;
  padding: 8px 0;
}

## 攻略 1
原生 JS
<iframe height="600" style="width: 100%;" scrolling="no" title="1F - 9x9 乘法表（原生 JS）" src="//codepen.io/chupai/embed/YmQLGe/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/YmQLGe/'>1F - 9x9 乘法表（原生 JS）</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 攻略 2
使用 Vue.js

<iframe height="600" style="width: 100%;" scrolling="no" title="1F - 9x9 乘法表（Vue.js）" src="//codepen.io/chupai/embed/JgJNXa/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/JgJNXa/'>1F - 9x9 乘法表（Vue.js）</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 攻略 3

## CodePen
[CodePen](https://codepen.io/chupai/pen/BMQvvJ)