[前端練習] 1F 9x9乘法表

畫面

畫面的部分採用 flex 及搭配 SASS 的排版方式來進行，比較特別的是這次採用平時比較不常用到的 text-shadow 來製造有層次的陰影效果

text-shadow: 0 3px 0 #fff ,0 5px 0 #000

程式邏輯

1. 需使用巢狀 for 迴圈運算
2. 需判斷當大於 x5 時，需將運算結果塞到 .math-right
3. 需使用模板語言將資料塞入

執行過程

1. 透過運用 ES6 提供的模板語言，在第一次進入時就先設置標題的部分

let result = `
 <div class=”flex-item no-color”>
 <div class=”line”></div>
 <div class=”title”>九九乘法表</div>
 <div class=”txt”>MULTIPLICATION CHART</div>
 <div class=”line”></div>
 </div>
`;

2.使用巢狀迴圈運算 1~9 以及該數字乘到 9 的結果

for(let i = 1 ; i <= 9; i++){
 let inner = ‘’;
 let left = ‘’;
 let right = ‘’;
 inner += `<div class=”math-left”><div class=”number”>${i}</div>`;
 
 for(let r = 1; r <= 9; r++){
 if(r<=5){
 left+=`<span>${i} x ${r} = ${i*r}</span>`
 }
 if(r > 5){
 right+=`<span>${i} x ${r} = ${i*r}</span>`
 }
 }
}
inner+=`${left}</div><div class="math-right">${right}</div>`
 

3. 將最後結果傳入 result 的變數中並使用 innerHTML 得方式塞進畫面中

result += 
   `<div class="flex-item">
    ${inner}
   </div>
   `
mathContent.innerHTML = result;

遇到的困難點

因剛學會 ES6 的模板語言，剛開始還有點不太習慣拆分的方式。經過一陣子摸索後就領會到箇中道理，真的比 ES5 的方式還好用多了，而且程式碼也顯得一目瞭然。

未來期待

當然這一波使用 JS 來寫一些小作業以外，我會希望後續會回頭過來採用 Vue 的框架來完成它，希望能夠一直鑽研、精進攥寫程式的技巧！