---
tags: 六角課程
---
# 六角體驗營 - 每日任務
主要紀錄自己所學到的新東西，以及原本不太熟的地方變得更加熟悉

## 每日 JS 刷題任務
### 1. [5/5(四) 字串設計](https://codepen.io/ntjtcxpt-the-animator/pen/zYRGybR)
✿ [String.prototype.split()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split)：字串依照條件轉陣列
✿ [String.prototype.substring(indexStart[, indexEnd])](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substring)：切割字串

### 2. [5/6(五) 比較與邏輯運算子](https://codepen.io/ntjtcxpt-the-animator/pen/ExQVbVB)

### 3. [5/9(一) if 流程判斷 I](https://codepen.io/ntjtcxpt-the-animator/pen/jOZWgLR)

### 4. [5/10(二) if 流程判斷 II](https://codepen.io/ntjtcxpt-the-animator/pen/zYRqWbQ)

### 5. [5/11(三) if 流程判斷 III](https://codepen.io/ntjtcxpt-the-animator/pen/wvyWeBK)

### 6. [5/12(四) 字串再複習](https://codepen.io/ntjtcxpt-the-animator/pen/NWyRPoL)

### 7. [5/13(五) 正規表達式](https://codepen.io/ntjtcxpt-the-animator/pen/bGLwQaE)
另一篇筆記有比較詳細撰寫[正規表達式](https://hackmd.io/DYb1aOqlRK2g-AvqKPIA5Q)

### 8. [5/16(一) 陣列設計](https://codepen.io/ntjtcxpt-the-animator/pen/OJQbqPr)

### 9. [5/17(二) 陣列+物件](https://codepen.io/ntjtcxpt-the-animator/pen/poaRBrw)

### 10. [5/18(三) 混合題??????](https://codepen.io/ntjtcxpt-the-animator/pen/oNEZyNK)
[陣列轉為字串](https://ithelp.ithome.com.tw/articles/10219963)

// 題目三：陣列轉字串
function aryToString(ary) {
  console.log(ary.reverse().toString());
}
aryToString([7, 8, 9]);
aryToString(["black", "white", "red"]);
aryToString([true, false, true]);

// 題目四：進階題，不適合新手：雙 for 迴圈
// 有點像9*9乘法表
// 測試第一層
// function multiplication(num) {
//   let sum = "";
//   for (let i = 2; i <= num; i++) {
//     sum = `${i}x${i}=${i}`;
//     console.log(sum);
//   }
// }
// multiplication(3);

// ixj={i*j}
function multiplication(num) {
  let sum = "";
  for (let i = 2; i <= num; i++) {
    for (let j = 1; j <= i; j++) {
      sum = `${i}x${j}=${i * j}`;
      console.log(sum);
    }
  }
}
multiplication(3);
multiplication(5);

### 11. [5/19(四) 函式、陣列、物件讀取](https://codepen.io/ntjtcxpt-the-animator/pen/LYQyydY)
有魔王題尚未解出答案

### 12. [5/23(一) 陣列物件](https://codepen.io/ntjtcxpt-the-animator/pen/PoQKBwG)

### 13. [5/24(二) 從不同資料集，尋找規律性](https://codepen.io/ntjtcxpt-the-animator/pen/mdXBrWp)

// 題目三：兩個陣列尋找相同數字
const a = [1, 3, 4, 6, 8];
const b = [3, 6, 12];
function checkSame(a, b) {
  const sameAry = [];
  for (let i = 0; i < a.length; i++) {
    for (let j = 0; j < b.length; j++) {
      if (a[i] === b[j]) {
        sameAry.push(a[i]);
      }
    }
  }
  return sameAry;
}
checkSame(a, b);

### 14.[5/25(三) 陣列操作](https://codepen.io/ntjtcxpt-the-animator/pen/QWQqeGV)
✿ [Array.prototype.sort()
](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

// 題目二：陣列相乘
const doubleAry = [
  [1, 2, 3],
  [3, 5, 6],
  [2, 2, 2, 2]
];
function callAry(ary) {
  let finall = "";
  let result = 1;
  ary.forEach((item, index) => {
    let position = index + 1;
    result = 1; // 每跑完一圈就初始化，才不會一直往上乘
    item.forEach((i) => {
      result *= i;
    });
    finall += `第${position}個陣列相乘是${result}，`;
  });
  return finall;
}
callAry(doubleAry); // "第1個陣列相乘是6，第2個陣列相乘是90，第3個陣列相乘是16，"
console.log("---------");

// 題目三：陣列排序（正序、反序設計）
const a = [1, 3, 4, 6, 8];
const b = [3, 6, 12];
function sortAry(option, ary) {
  if (option === "從小到大") {
    ary.sort((a, b) => {
      return a - b;
    });
  } else if (option === "從大到小") {
    ary.sort((a, b) => {
      return b - a;
    });
  }
  console.log(ary);
}
sortAry("從小到大", [8, 3, 1, 7]);
sortAry("從小到大", [99, 22, 11, 33]);
sortAry("從大到小", [7, 2, 33, 4]);

### 15. [5/26(四) 混合題目](https://codepen.io/ntjtcxpt-the-animator/pen/RwQjYNR)

原本一直無法成功取出，直到參考同學的發現sort要指定在score，且要在宣告一個新的空陣列去存放sort出來的陣列

// 題目一：陣列與物件排序
// 依照物件中每個人的分數大小做排序
const scoreAry = [
  { name: "葉子", score: 99 },
  { name: "洧杰", score: 60 },
  { name: "卡斯伯", score: 80 }
];
function callAry(option, ary) {
  let newAry = [];    // 宣告新陣列來存放sort出來的值
  if (option === "正序") {
    newAry = ary.sort((a, b) => {
      return a.score - b.score;   // 指定score
    });
  } else {
    newAry = ary.sort((a, b) => {
      return b.score - a.score;
    });
  }
  return newAry;
}
callAry("正序", scoreAry);
callAry("反序", scoreAry);

// 我的寫法：
// 題目二：篩選資料
// 請篩選出第一個參數，並比對 `scoreAry2` 看有誰達到條件
const scoreAry2 = [
  { name: "葉子", score: 99 },
  { name: "洧杰", score: 60 },
  { name: "卡斯伯", score: 80 }
];
function callAry2(score) {
  let name = "";
  let str = "";
  scoreAry2.forEach((item) => {
    if (item.score >= score) {
      name += item.name; // 要寫name+item.name才會字串相加
      str = `${name}分數有在${score}分以上`;
    }
  });
  if (name === "") { // 指的是當名字等於空值就回傳
    str = `沒有人分數有在${score}分以上`;
  }
  return str;
}

// 同學的寫法：
function callAry2(num) {
  let name = "";
  scoreAry2.forEach((item) => {
    if (item.score >= num) {
      name = name + item.name;
    }
  });
  if (name.length) { // 指的是當名字有長度就回傳
    return `${name}分數有在${num}以上`;
  } else {
    return `沒人分數有在${num}以上`;
  }
}
callAry2(80);
callAry2(99);
callAry2(100);

// 題目三：選出從零到指定數字範圍裡面的質數
function prime(num) {
  let primeNum = "";
  let isPrime = true;
  for (let i = 2; i < num; i++) {
    isPrime = true;
    for (let j = 2; j < i; j++) {
      if (i % j === 0) {
        isPrime = false;
      }
    }
    if (isPrime) { // 如果是質數就加進去
      primeNum += `${i},`;
    }
  }
  return primeNum.substring(0,primeNum.length-1); 
  // 加 primeNum.substring(0,primeNum.length-1) 
  // 目的：為了讓最後一個不會有「,」
}
prime(13);
prime(30);
prime(24);
prime(44);

### 15. [5/27(五) 混合題目 II](https://codepen.io/ntjtcxpt-the-animator/pen/QWQagVv)：大樂透(不重複亂碼)
✿ [Array.prototype.slice()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)：回傳一個新陣列物件，寫法：`arr.slice(begin,end)`
✿ [Math.floor()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/floor#%E6%8F%8F%E8%BF%B0)：回傳最大整數
✿ [Math.random()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/random)：回傳一個偽隨機小數介於0到1之間(包含 0，不包含1)

function lotto() {
  let ary = []; // 存放所有數字
  let num = 0;  // 初始值
  for (let i = 0; i < 14; i++) {
    // * 49原因：Math.random是0~1之間的數字，所以要「乘上」想要取得的數字的最大碼
    // + 1原因 ：Math.random不論乘上多少，最第一個數字都是從「0」開始，若不+1數字會是0~48
    num = Math.floor(Math.random() * 49) + 1;
    if (ary.indexOf(num) === -1) {
      ary.push(num);
    } else {
      i--; // 為了防止重複會佔到i的數字，所以要扣掉重複的那一個
    }
  }
  // \n：正規表達式「斷行」
  return`第一組號碼：${ary.slice(0,6)}，特別號是 ${ary.slice(6,7)} 號 \n`+
    `第二組號碼：${ary.slice(7,13)} ，特別號是 ${ary.slice(13,14)} 號`
}
lotto();

---

## 每日切版任務
### 1. [5/5(四) flex 練習](https://codepen.io/ntjtcxpt-the-animator/pen/bGLdOmd)

### 2. [5/6(五) 甜點電商 - 卡片購物車練習](https://codepen.io/ntjtcxpt-the-animator/pen/RwQWjbR)

### 3. [5/9(一) position 練習](https://codepen.io/ntjtcxpt-the-animator/pen/oNEbKbY)

### 4. [5/10(二) flex 練習一](https://codepen.io/ntjtcxpt-the-animator/pen/mdXPxqP)

### 5. [5/11(三) flex 練習二](https://codepen.io/ntjtcxpt-the-animator/pen/zYRBwLd)

### 6. [5/12(四) RWD 練習 I](https://codepen.io/ntjtcxpt-the-animator/pen/poaEvpQ)

### 7. [5/13(五) RWD 練習 II](https://codepen.io/ntjtcxpt-the-animator/pen/QWQKJKy)

### 8. [5/17(二) position 趣味小練習](https://codepen.io/ntjtcxpt-the-animator/pen/ZErLPNe)
只想特別記錄，很好玩哈哈哈哈😂

### 9. [5/19 (四) 基本表單元素 label ＆ input](https://codepen.io/ntjtcxpt-the-animator/pen/GRQmmMq)
原本在練習時候，沒有加上name，導致還是呈現複選，參考其他同學的寫法之後發現是差在於name，因此加上之後就成功變成單選題了。
#### 🔥如果要使用**單選**選項，需要加上`name="同樣名字"`🔥

<form>
    <label for="men">男</label>
    <input type="radio" id="men" value="男" name="sex">
    <label for="women">女</label>
    <input type="radio" id="women" value="女" name="sex">
</form>

### 10. [5/20 (五) label ＆ input - list](https://codepen.io/ntjtcxpt-the-animator/pen/JjpJKqE)

### 11. [5/23 (一) SCSS color 練習](https://codepen.io/ntjtcxpt-the-animator/pen/dydzKgL)
使用 SCSS 中的顏色 `加亮(lighten)`、`加深(darken)` 方法，做出以色碼 #008899 為主的 1~9 階色階。
✿ [scss內置顏色調整](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/713468/)

### 12. [5/24 (二) background 練習](https://codepen.io/ntjtcxpt-the-animator/pen/LYQzRPN)
✿ [background](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background)：背景
✿ [background-reapeat](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat)：背景重複
✿ [background-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position)：背景位置

/* 背景屬性 */
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

/* 縮寫 */
background: #000 url("....") no-repeat top right;

/* 將背景設為一張居中放大圖片 */
background: no-repeat center/80% url("....");

p.s.並且使用==line-height使文字垂直置中==

### 13. [5/25 (三) SCSS / Sass 練習](https://codepen.io/ntjtcxpt-the-animator/pen/JjprQwg?editors=1100)
✿ 原本class名稱是`.listGroup` 、`.listGroup-item` 、`.listGroup-item a` 、`.listGroup-item a:hover`，利用 SCSS 的格式，且多使用「 & 」連結符號減少重複代碼


### 14. [5/26 (四) Flex 與 RWD 練習](https://codepen.io/ntjtcxpt-the-animator/pen/RwQjBYP)

### 15. [5/27 (五) position 練習](https://codepen.io/ntjtcxpt-the-animator/pen/WNMdONv)
:boom:新體驗！第一次知道box-shadow不只可以當陰影，還可以用做其他用處！
冰淇淋下面三個圈圈是透過==偽元素 ＆ box-shadow==做出來的！
木棒上面深咖啡色是透過==box-shadow==做出來的
:::success
box-shadow: offset-x | offset-y | blur-radius | spread-distance | color | inset;
:boom: 可以一次用很多個顏色，也可以不把它當作陰影來使用，就如同練習的第19行一樣
:::

$primary: #fff1cf;
$secondary: #fcd575;
.ice {
  position: relative;
  background-color: $primary;
  width: 100px;
  height: 150px;
  margin: 20px auto 0;
  border-radius: 50px 50px 15px 15px;
  &:after {
    content: "";
    width: 40px;
    height: 20px;
    position: absolute;
    top: 45px;
    left: 0;
    border-radius: 0 0 50px 50px;
    background-color: $secondary;
    box-shadow: 30px 0 $secondary, 60px 0 $secondary;
  }

  // 木棒
  .stick {
    height: 40px;
    width: 30px;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #bb5520;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 -10px #9a493f;
  }
}

### 16. [5/31 (二) SCSS @mixin & @include 練習](https://codepen.io/ntjtcxpt-the-animator/pen/NWyYaOE)
>寫CSS時都會有常用的語法重複寫的經驗，比如 UL LI的CSS一定會寫「float：left;」、「display:block」這些都常寫到，算是重複性的工作。
@mixin 幫忙把這些常用語法蒐集起來，需要該語法時再插入「@include+語法名稱」簡化重複性工作。
>:::spoiler
>
>:::
>>參考文件：[SASS：@mixin 建立專屬語法資料庫](https://ithelp.ithome.com.tw/articles/10193702)


#### 搭配變數使用<span style="color:gray; font-size:14px;">(練習範例寫法)</span>：

@mixin 自定義名稱($變數名稱, $變數名稱, .....) { 
    ...自定義css 
}
.要套用的class { 
    @include 自定義名稱(參數, 參數); 
}

@mixin icon($size, $color) {
  background-color: $color;
  width: $size;
  height: $size;
  ...自定義css
}
.fa-facebook-f {
  @include icon(40px, #c4e1ff);
}
.fa-heart {
  @include icon(60px, #ffb5b5);
}
.fa-copy {
  @include icon(80px, #d8d8eb);
}
.fa-user {
  @include icon(100px, #dab1d5);
}

> 參考連結：[新手也可以輕鬆玩轉 SASS - @mixin and @include](https://5xruby.tw/posts/play-sass-mixin-and-include)

### 17. [ 6/1 (三) class 命名優化](https://codepen.io/ntjtcxpt-the-animator/pen/oNEdLBe?editors=1100)
原本用＆-item 一直失敗，但把最外層product-list,改成product就可以了，所以意思是說當使用scss 「&」，最外層必須是與內層「＆」的意思，「＆」只是取代最外層名稱而已
:::info
※ 「 & 」 取代 「 product 」
:::

### 18. [6/2 (四) position 練習 病毒退散](https://codepen.io/ntjtcxpt-the-animator/pen/yLvjRvR)
使用到之前所學習到的==box-shadow==、==scss「＆」連結符號減少重複代碼==
`今天練習發現，雖然box-shadow可以使用非常多個，但他好像不能旋轉？，也不能代替主體，因為原本是打算垂直的那兩個stick用box-shadow，其他三個用before & after來解決`

### 19. [6/3 (五) background / position 練習](https://codepen.io/ntjtcxpt-the-animator/pen/MWQXpKj?editors=1100)