# JS 99乘法表

### **撰寫程式：HTML ｜ CSS（SASS） ｜ 原生JS**
###### codepen：https://codepen.io/liu_0821/pen/yLExgLR?editors=0010


## HTML
> ###### 原生HTML撰寫

<div class="box-container">
  <div class="box box-head">
    <div class = "box-span">
      <span>×</span>
      <span>×</span>
    </div>
    <div class = "box-center">
      <h1>九九乘法表</h1>
      <h4>MULTIPLICATION CHART</h4>
    </div>
    <div class = "box-span">
      <span>×</span>
      <span>×</span>
    </div>
  </div>
</div>

****
## CSS（SASS）
> ###### 與原生CSS不同之處，原生CSS使用大括弧{}套用CSS特性，SASS則利用縮排區分HTML之間的層級關係。

html,body
  background-color: #F0F0F0
  margin: 25px
  padding: 0
  font-style: "微軟正黑體"

.box-container
  display: flex
  flex-wrap: wrap
  justify-content: center
  width: 100%
  padding: 25px
  
  .box
    margin: 15px
    height: 350px
    overflow: hidden
  .box-head
    width: 30%
    border-top: 1px solid #2EB738
    border-bottom: 1px solid #2EB738
    .box-center
      height: 80%
      width: 100%
      position: relative
      top: 55%
      left: 40%
      transform: translate(-40%, -45%)
      h1,h4
        color:#2EB738
        margin: 0 auto
        text-align: justify
      h1
        font-size: 66px
      h4
        font-size: 26px
    .box-span
      height: 10%
      width: 100%
      display: flex
      justify-content: space-between
      span
        font-size: 24px 
        color: #2EB738
  .box-content
    width: 30%
    background-color: #FFFFFF
    box-shadow: 0px 3px 10px #D8D8D8
    border-radius: 100px 0px 30px 0px
    .inbox-content
      height: 320px
      display: flex
      flex-wrap: wrap
      flex-direction: column
      justify-content: flex-start
      align-content: center
      margin: 25px 0 25px 0 
      h1
        font-size: 128px
        color: #2EB738
        letter-spacing: 0
        text-shadow: 4px 3px 0px #F0F0F0
        margin: 0 auto          
      li
        list-style-type: none
        font-weight: 500
        span
          color: #2EB738
          font-size: 30px 
          line-height:48px
          letter-spacing: 0
          margin-left: 12px

****
## JS（原生JS）
> ###### 用for迴圈表現99乘法中的數字內容。
> ###### 用原生JS語法去抓取要放置的div，利用for迴圈先跑出主要數字，再以appendChild()將內容放置到網頁上。

function run(){
  let Tbox = document.querySelector('.box-container');
  for(var i = 2 ; i <=9 ; i++){
    let box = document.createElement('div');
    box.className = "box box-content";
    let inbox = document.createElement('div');
    inbox.className = "inbox-content";
    var mun = document.createElement("h1");
    mun.innerText = i ;
    
    inbox.appendChild(mun)
    for(var a = 1 ; a <= 9 ; a++){
      var formula_li = document.createElement('li');
      var formula_span = document.createElement('span');
      var ans = i*a;
      formula_span.innerText = i + " × " + a + " = " + ans;
      formula_li.appendChild(formula_span)
      inbox.appendChild(formula_li)
    }
    box.appendChild(inbox)
    Tbox.appendChild(box)
  }
}
run()

## 補充：
#### 還有需要修改的地方，先留者到時候再回來看(因為不太熟悉嗚嗚嗚)
1. #### 偽元素
2. #### RWD
3. #### 標題稱滿
4. #### 公式之間的間隔

##### ヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果註解哪裡有錯誤或有問題，歡迎提出來一起討論~~~~