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

# JS地下城1F - 9x9 乘法表

## 資源
[UI設計稿](https://xd.adobe.com/spec/256981fc-ef65-4d9b-773c-45d8ef0353c6-5358/screen/50fba855-bde7-4771-b73c-3fd839418cf0/)
[CodePen程式碼](https://codepen.io/CoolizzLuo/pen/XWjWRyg)


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

## 心得
* 這關 JS 部分難度比較小, 自己花費比較多的時間在設計UI上面
* 1. 每張 Card 裡面的數字利用 Flex 排版, 並使數字對齊
* 2. 九九乘法表標題上下面的設計有參考別人的作法, 自己沒這麼直覺想出來

### Card設計

<div class="card">
    <ul>
        <li><h2>2</h2></li>
        <li>2 x 1 = 2</li>
        <li>2 x 2 = 4</li>
        <li>2 x 3 = 6</li>
        <li>2 x 4 = 8</li>
        <li>2 x 5 = 10</li>
        <li>2 x 6 = 12</li>
        <li>2 x 7 = 14</li>
        <li>2 x 8 = 16</li>
        <li>2 x 9 = 18</li>
    </ul>
</div>

.card {
    width: 350px;
    height: 350px;
    margin: 20px;
    padding: 35px 45px;

    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 10px #D8D8D8;
    border-radius: 100px 0px 30px 0px;

}
.card ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.card h2 {
    text-align: center;
    height: 127px;
    font-size: 128px;
    color: #2EB738;
    text-shadow: 4px 3px 0px #F0F0F0;
}
.card li {
    margin: 5px 0px;
    list-style-type: none;
    font-size: 24px;
    color: #2EB738;
}

### Title設計

<div class="title">
    <div class="decoration">
        <span>x</span>
        <div class="line"></div>
        <span>x</span>
    </div>
    <h1>九九乘法表<br><span>MULTIPLICATION CHART</span></h1>
    <div class="decoration">
        <span>x</span>
        <div class="line"></div>
        <span>x</span>
    </div>
</div>

.title{
    width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
}

.title h1{
    color: #2EB738;
    font-weight: bold;
    text-align: center;
    font-size: 56px;
}
.title h1 span{
    font-size: 24px;
}

### 主要 JS

let content = '';
    for (let i = 2; i <= 9; i++) {
        content += `<div class="card"><ul><li><h2>${i}</h2></li>`;
        for (let j = 1; j <= 9; j++) content += `<li>${i} x ${j} = ${i*j}</li>`
        content += `</ul></div>`;
    }
document.querySelector('#wrapper').innerHTML += content;