新手 JS 地下城 1F — 9x9 乘法表

10 個月前(已編輯)紀錄

六角學院 JS 地下城 - 1F 9x9 乘法表

新手 JS 地下城 1F  —  9x9 乘法表#

新手 JS 地下城 1F  —  9x9 乘法表

六角學院 新手 JS 地下城 1F

這篇是六角學院的 JavaScript 題目篇- 🐲 新手 JS 地下城，1F Boss 關卡「9x9 乘法表」攻略過程心得。

在學習完 JS 必修篇 和 核心篇 後，決定來挑戰一下六角學院所推出的 JS 地下城，目前剛好將 Vue 實戰影音的課程 上到一半，所以儘量都使用 Vue 來完成挑戰。

BOSS 弱點#

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

解題思路#

  • 使用 Flex 完成畫面排版
  • 利用 Vue 元件概念將區塊做成元件
  • 利用 v-for 印出元件

以前在做作業時都有現成的 Html 架構跟 CSS 可以使用，雖然也有手刻網頁的經驗，但這真的是還是第一次切版XD，一開始拿到設計稿其實有點小呆住，心理OS(該不會要自己切版吧?)，不過想想也是給自己的一個挑戰，也很快想到解題思路就開始挑戰了。

CSS#

1F — 9x9 乘法表

Step 1 : 按照設計稿做出一個 1280px X 1372px 的畫面，然後在裡頭設定一個1110px X 1178px 的小畫面。

Step 2 : 由於在 container 中使用了 align-items: center ，會將裡頭的子元素垂直置中，讓左右的間距為 85px ( 1280px - 1110px = 170px )，接著將 wrap 的 margin 上下設為 80px ( 1372px - 1178px = 194px )接著扣掉 footer 的高度 34px ) ，到這裡基本的畫面就完成了~

Step 3 : 接著要處理 wrap 裡頭的 card*8 ，再設定完每一個 card 的大小為 350px X 366px 後 ，開始處理排序的問題，一樣使用 flex 讓元素自動分配空間，加上 flex-wrap: wrap 讓元素超出範圍時自動換行，再來使用 justify-content: space-between 來讓每個元素的間距拉出來。

/* 畫面大小 */

.container {
  width: 1280px;
  height: 1372px;
  background: #f0f0f0 0% 0% no-repeat padding-box;
  opacity: 1;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrap {
  width: 1110px;
  height: 1178px;
  margin: 80px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  width: 350px;
  height: 366px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 10px #d8d8d8;
  border-radius: 100px 0px 30px 0px;
  opacity: 1;
}

1F — 9x9 乘法表畫面 CSS

Step 4 : 最後處理小細節，由於畫面中中間排的 card 上下 margin 為 40px，而上下排則不用設定，因此這裡我使用 nth-child() 選擇器來調整 wrap 中第4、5、6 個 div。

.wrap div:nth-child(4),
.wrap div:nth-child(5),
.wrap div:nth-child(6) {
  margin: 40px 0;
}

1F — 9x9 乘法表畫面 CSS

接著處理 card 中的元素排列

Step 1 : 這裡我將 card 裡頭新增一個 box 設定大小為 270px X 268px ，設定 margin 左右為 auto 來讓兩邊間距為 ( 360px - 270px ) / 2 = 40px ，接著加上 Flex 的設定 flex-direction: column 、 flex-wrap: wrap 。

Step 2 : 新增文字大小、顏色等等的設定，這裡都是按照設計稿來設定。

Step 3 : card 的高度之所以設定 268px ，是因為在設計稿中，左邊會有一個 153px 高度的大數字，再來才是高度 33px 的算式，並且每行之間的距離為 8px ，因此可以得出 ( 153px + 33px _ 3 + 8px _ 2 = 268px ) ，為了讓每行的距離拉出來，在父層增加 justify-content: space-between ，這樣 8px 的間距就出來了，接著 h1標籤距離頂端的距離為 34px 所以加上 margin-top:34px 的設定。

Step 4 : 但是仔細看右邊會發現並沒有大數字，所以我們必須額外調整，右邊第一排與 card 頂端的距離為 64px ，扣除剛剛已經加上的 34px，利用 nth-child 選取器加上 margin-top: 30px ，這樣右邊的高度 ( 33px _ 6 + 30px + 8px _ 5 = 268px ) 也已經符合囉。

.card .box {
  width: 270px;
  height: 268px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 34px auto 0;
}

.card .box p:nth-child(5) {
  margin-top: 30px;
}

.card h1 {
  width: 71px;
  height: 153px;
  margin-left: 21px;
  font-size: 128px;
  letter-spacing: 0px;
  color: #2eb738;
  text-shadow: 4px 3px 0px #f0f0f0;
  opacity: 1;
}

.card p {
  width: 118px;
  height: 33px;
  margin-right: 34px;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 23.5px;
  letter-spacing: 0px;
  color: #2eb738;
  opacity: 1;
}

1F — 9x9 乘法表 Card CSS

基本上到這裡就完成了畫面的部分，接下來只剩下將數字塞進去就完成了!

題外話 : 一開始原本想使用 Grid 來切版，不過試了一下體會到自己對 Grid 的掌握度還不夠，只好默默地換成 Flex了.

如果對 Flex 和 Grid 都不了解的話，推薦觀看 Amos 老師的玩轉 CSS FLEX 以及 CSS GRID 的影片，觀念講得很詳細。

Vue#

Step 1 : 我將 card 做成元件後，使用 v-for 的方式印出 8 個元件，同時利用props 來接受每一次的 ++count 值。

<card v-for="count in 8" :i="++count" :key="++count"></card>

1F — 9x9 乘法表 Vue Components Code

Step 2 : 再次使用 v-for 來引出 p 標籤，然後將傳入的 i 跟 j 分別帶入算式就大功告成囉 。

app.component('card', {
  props: ['i'],
  template: `<div class="card">
		<div class="box">
			<h1>{{ i }}</h1>
			<p v-for='j in 9'>{{ i }} × {{ j }} ＝ {{ i*j }}</p>
		</div>
  </div>`,
})

1F — 9x9 乘法表 Vue Components Code

接著只要傳上 GigHub Page 就完成了挑戰了(灑花)

Demo > Repo

心得#

Photo by Samantha Gades on Unsplash

收穫還是蠻多的，難度比六角學院 JS 課程的作業更有挑戰性，除了畫面需要自己切版，卡關時也需要自己去找尋資料才有辦法完成，很適合來考驗自己的能力!

在這關中，深刻體會自己切版的能力需要加強，大部分時間都花在寫 CSS 上，真正 JS 的部分大概只花了不到 15 分鐘，開始懷疑這關是不是趁機考驗切版的能力...?