安安，今天是day21，剛過完連假的心情(´ﾟдﾟ`)，延續昨天的筆記來跟著練習做一個習題，那話不多說就直接開始囉！如果看不懂的話也可以回顧一下昨日的筆記:P
文字有概略說明一下如何做的順序，但程式碼的註解比較詳細～所以建議看不懂的地方可以看一下註解:)

1.先建立ul#board，讓他來放置待會要設置的格子li。

ul#board

2.把格子建立出來，在js寫第一段程式碼建立7*7的格子，再回到css li撰寫樣式，設置完flex及height/border後會全部在同一行，但我們希望他能夠每行7格，所以在ul#board要使用flex-wrap使格子往下換行，會有個問題產生，只看見6個格子，是因為border本身也佔了寬度，所以要讓border的寬度也包含在本體寬度內，故在li加上box-sizing: border-box。

3.在html,body設置樣式，讓ul#board置中，撐滿整個網頁，接續去設定其他基本樣式。

//讓他置中，撐滿整個網頁
html,body
  width: 100%
  height: 100%
  display: flex
  background-color: #555
  justify-content: center
  align-items: center

ul#board
  width: 400px
  height: 400px
  display: flex
  // 讓原本一排的格子往下掉
  flex-wrap: wrap
  list-style: none
  padding: 0
  li
    flex: calc(100% / 7)
    height: calc(100% / 7)
    border: 1px solid #000
    box-sizing: border-box
    background-color: #eee
    font-size: 15px
    // 方法2
    &.black
      color: white
      background-color: #222
	// 讓圖片佔寬度80%，否則會超出
img
  width: 80%

4.要讓格子裡面有數字排序，故使用第二段程式碼，並且讓格子黑白相間（使用偶數選擇器），可以看到註解掉的方法1會導致程式碼過長，所以使用方法2，新增一個class名black，再去css新增樣式。

5.接下來把西洋棋的圖片放入指定位置（每七個週期裡面的第三個且黑色格子），可以看以下程式碼的註解。

6.最後做一個hide加上setTimeout的小測試。

// 第一段----------
$(function(){
  for(var i=0;i<7*7;i++){
// li給他一個$字號會自動幫轉換成li的物件
    $('#board').append($('<li>'))
  }
// -----------------

// 第二段--------------------------------
// 讓格子裡面有數字，使用函數
    $('#board li').text(function(index){
      return index
    })
// 要讓格子黑白相間,文字有顏色,但會導致程式碼很長,所以建議使用方法2
  // 方法1 
  //$('#board li:even').css('background-color','#222').css('color','white')
  
// 方法2,jquery新增一個class,再css上面新增樣式
  $('#board li:even').addClass('black')
// -------------------------------------

// 把旗子放入格子中
  var imgurl = "<img src='https://flutterawesome.com/content/images/2019/10/chess512x512.png'>"
  // 每七個週期裡面的第三個加上棋子
  $('#board li:nth-child(7n+3)').html(function(index){
    var isBlack = $(this).hasClass('black')
    // 只要是黑色格子就加上西洋棋imgurl
    if(isBlack){
      return imgurl
    }
   // 現在要來確認是否有black這個class
   // 為了讓程式碼乾淨，所以改寫成上面var isBlack
  //console.log(index+':'+$(this).hasClass('black'))
  })
  // 可以來試試看hide隱藏
  $('img:first').hide(1000,function(){
    // 設定一個計時器
    setTimeout(function(){
      $('img:last').hide(1000)},1000)
    // 第一秒鐘時隱藏第一個，再計時一秒鐘消失下一個
  })
  })

那今天的練習題就到這邊結束囉~今日練習題是資源參考hahow課程的，在此附上codepen連結可以做練習：https://codepen.io/cinj/pen/yLOmWXW