## chatGPT 10 題

學習[條件判斷](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else)，並且了解[邏輯運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators)。藉由包裝生活中常見的基礎算式來練習邏輯能力。

### 題目一：多重條件
一週有七天，請製作一個函式可輸入不同的星期日數，並回傳當天的心情小語，如下例：

// input 輸入
myThought(1)
myThought(7)
myThought(8)

// output 輸出
"星期一：穿新衣。"
"星期日：來考試。"
"一周只有七天，輸入錯囉"

**(心情小語內容可自訂、必須使用 [Switch](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/switch) 語法來達成。)**

在函式中，我們使用 switch 語法將輸入的星期日數對應到相應的心情小語，並將其存儲在 thought 變數中。最後，函式返回 thought 變數的值。如果輸入的星期日數不在 1 到 7 的範圍內，函式會返回一個錯誤訊息。

Ans：


<pre>
function getThought(dayOfWeek) {
let thought;
switch (dayOfWeek) {
case 1:
thought = "星期一，加油！";
break;
case 2:
thought = "星期二，继续努力！";
break;
case 3:
thought = "星期三，半周加油！";
break;
case 4:
thought = "星期四，快到周末了！";
break;
case 5:
thought = "星期五，放松一下！";
break;
case 6:
thought = "星期六，尽情享受！";
break;
case 7:
thought = "星期日，好好休息！";
break;
default:
thought = "输入错误，请输入 1-7 的数字";
break;
}
return thought;
}

// 调用函数并输出结果
console.log(getThought(1)); // 星期一，加油！

</pre>


### 題目二：飲酒測試
最低法定飲酒年齡為 18 歲，請撰寫一個函式來測驗輸入的年齡是否能飲酒。

// input 輸入
isDrinkable(7)
isDrinkable(18)

// output 輸出
false
true

**(必須使用[條件運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)來達成。)**

Ans：


### 題目三：發燒檢測
人的中心體溫通常會自動調節在 37 ℃ 左右，只要 ≥ 38度就代表可能發燒了！請製作一個探測人體溫度是否發燒的函式。

// input 輸入
isFever(37)
isFever(39)

// output 輸出
False
True

函式接收一個表示體溫的參數 temp，如果 temp 大於等於 38，就會回傳 true 代表發燒，否則就回傳 false。

Ans：

### 題目四：溫標轉換
目前常見的溫度標示有攝氏(°C)與華氏(°F)，請撰寫兩個函式可以轉換彼此四捨五入至小數第一位，如下範例。
* 攝氏轉華氏： (10°C x 9/5) + 32 = 50°F
* 華氏轉攝氏： (10°F − 32) × 5/9 = -12.2°C

// input 輸入
CtoF(10)
FtoC(10)

// output 輸出
50
-12.2

Ans：


### 題目五：餵食青蛙
請幫遊戲內的青蛙角色設計被餵食飼料時的反應，輸入不同種類單位大小的飼料，讓青蛙做出相對應的回饋，如下範例：
* 飼料太小(<=5) 回傳 "嘓！"
* 飼料太大(>=50) 回傳 "嘔"
* 如果以上都不是，回傳 "..."

// input 輸入
frogEat(1)
frogEat(100)
frogEat(10)

// output 輸出
"嘓！"
"嘔"
"..."

Ans：

### 題目六：計算球體體積
請製作一個球體積計算函式，參數為半徑，回傳計算後四捨五入取至第一位小數的結果。

球體積 = 4 / 3 x π x 球半徑³

// input 輸入
sphereVolume(1)
sphereVolume(10)
sphereVolume(20)

// output 輸出
4.2
4188.8
33510.3

可參考：[球體積計算機](https://www.google.com/search?client=firefox-b-d&q=sphereVolume+calc)

Ans：

### 題目七：BMI 計算
BMI 稱為身體質量指數（Body Mass Index，縮寫為BMI），是目前美國疾病管制局及世界衛生組織所認可，利用身高為基礎來測量體重是否符合標準。請套用以下公式製作一個 BMI 計算函式。

<div style="text-align: center; padding: 4rem">
BMI = 體重(公斤) / 身高的平方(公尺)
</div>


// input 輸入 bmi(cm,kg)
bmi(178,20)
bmi(178,65)
bmi(178,77)
bmi(178,89)
bmi(178,100)
bmi(178,200)
// BMI(身高,體重)

// output 輸出
"體重過輕"
"正常範圍"
"異常範圍"
"異常範圍"
"異常範圍"
"異常範圍"

延伸思考：可將過重、輕度肥胖、中度肥胖、重度肥胖、腰圍功能判斷也完成。

### 題目八：斜邊計算
直角三角形的斜邊長度公式為：x² + y² = z²，請製作一個輸入兩邊邊長並回傳四捨五入取至小數第一位斜邊的函式。

// input 輸入
calcHypotenuse(10, 10)

// output 輸出
14.1

Ans：

function calculateBMI(height, weight, waist) {
  const heightM = height / 100; // 身高換算成公尺
  const bmi = weight / (heightM * heightM); // 計算BMI
  const bmiRounded = Math.round(bmi * 10) / 10; // 四捨五入至小數第一位

  // 腰圍分類
  let waistDiagnosis = "";
  if (waist >= 90 && waist < 100) {
    waistDiagnosis = "腰圍過大";
  } else if (waist >= 100) {
    waistDiagnosis = "重度腰圍肥胖";
  }

  // BMI分類
  let bmiDiagnosis = "";
  if (bmiRounded < 18.5) {
    bmiDiagnosis = "體重過輕";
  } else if (bmiRounded >= 18.5 && bmiRounded < 24) {
    bmiDiagnosis = "正常範圍";
  } else if (bmiRounded >= 24 && bmiRounded < 27) {
    bmiDiagnosis = "過重";
  } else if (bmiRounded >= 27 && bmiRounded < 30) {
    bmiDiagnosis = "輕度肥胖";
  } else if (bmiRounded >= 30 && bmiRounded < 35) {
    bmiDiagnosis = "中度肥胖";
  } else {
    bmiDiagnosis = "重度肥胖";
  }

  return {
    bmi: bmiRounded,
    bmiDiagnosis: bmiDiagnosis,
    waistDiagnosis: waistDiagnosis,
  };
}


### 題目九：FizzBuzz
FizzBuzz 是一個簡單的小遊戲，給定一串從 1 到 100 的數字：
* 如果是 3 的倍數，就印出 “Fizz”
* 如果是 5 的倍數，就印出 “Buzz”
* 如果同時是 3 和 5 的倍數，就印出 “FizzBuzz”
* 將結果回傳為一個陣列。

// Todo 待完成
function fizzBuzz100(){
  let result = []
  let count = 1
  while (count <= 100) {
    //
    // 在此的程式將會被執行 100 次
    // 請撰寫判斷將 FizzBuzz 與數字放入 result 陣列之中
    //
    count ++
  }
  return result
}

// input 輸入
fizzBuzz100()

// output 輸出
["1","2","Fizz","4","Buzz","Fizz","7","8","Fizz","Buzz","11","Fizz","13","14","FizzBuzz"......後續省略]

Ans：

function FizzBuzz() {
  var result = [];
  for (var i = 1; i <= 100; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      result.push("FizzBuzz");
    } else if (i % 3 === 0) {
      result.push("Fizz");
    } else if (i % 5 === 0) {
      result.push("Buzz");
    } else {
      result.push(i);
    }
  }
  return result;
}


### 題目十：蜘蛛下網

蜘蛛在一個由四個支撐點構成，11x11 單位的正方形蜘蛛網上。請製作一個函式以蜘蛛的座標為參數並依循以下規則回傳結果：
* 計算出距離蜘蛛最近的點並回傳"哪裡是最近的支撐點 + 最短路徑距離"。
* 如果蜘蛛超出蜘蛛網外，回傳"蜘蛛不在網上了"。

// input 輸入
spiderLeaveWeb(8, 3)

spiderLeaveWeb(5, 5)
spiderLeaveWeb(6, 5)
spiderLeaveWeb(5, 6)
spiderLeaveWeb(6, 6)

spiderLeaveWeb(20, 20)

spiderLeaveWeb(0, 0)
spiderLeaveWeb(11, 0)
spiderLeaveWeb(0, 11)
spiderLeaveWeb(11, 11)

// output 輸出
"右上角為最近的支撐點，距離 4.2 單位"

"左上為最近的支撐點，距離 7.1 單位"
"右上角為最近的支撐點，距離 7.1 單位"
"左下角為最近的支撐點，距離 7.1 單位"
"右下角為最近的支撐點，距離 7.1 單位"

"蜘蛛不在網上了"

"左上為最近的支撐點，距離 0 單位"
"右上角為最近的支撐點，距離 0 單位"
"左下角為最近的支撐點，距離 0 單位"
"右下角為最近的支撐點，距離 0 單位"

延伸思考：可以將蜘蛛網的尺寸(最大x、最大y)作為參數帶入函式中，思考會遇到什麼樣的情境並撰寫判斷回應。

Ans：

function findNearestSupportPoint(spiderPosition) {
  // 確認蜘蛛是否在蜘蛛網範圍內
  if (spiderPosition.x < 0 || spiderPosition.x > 10 || spiderPosition.y < 0 || spiderPosition.y > 10) {
    return "蜘蛛不在網上了";
  }

  // 支撐點的位置
  const supportPoints = [
    {x: 0, y: 0},
    {x: 0, y: 10},
    {x: 10, y: 0},
    {x: 10, y: 10},
  ];

  // 計算距離最短的支撐點
  let shortestDistance = Infinity;
  let nearestSupportPoint = null;
  for (let i = 0; i < supportPoints.length; i++) {
    const supportPoint = supportPoints[i];
    const distance = Math.sqrt((supportPoint.x - spiderPosition.x) ** 2 + (supportPoint.y - spiderPosition.y) ** 2);
    if (distance < shortestDistance) {
      shortestDistance = distance;
      nearestSupportPoint = supportPoint;
    }
  }

  return `最近的支撐點是 (${nearestSupportPoint.x}, ${nearestSupportPoint.y})，距離為 ${shortestDistance}`;
}


## chatGPT 詠唱募資網站

<template>
  <div>
    <h1>最近的募資項目</h1>
    <ul>
      <li v-for="project in projects" :key="project.id">
        <h2>{{ project.title }}</h2>
        <img :src="project.image" alt="project image">
        <p>{{ project.description }}</p>
        <router-link :to="{ name: 'project', params: { id: project.id }}">查看詳情</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projects: [
        {
          id: 1,
          title: '愛心餐車計劃',
          image: 'https://picsum.photos/id/1015/400/300',
          description: '為流浪動物提供免費食物和水，幫助他們渡過難關。',
        },
        {
          id: 2,
          title: '女童教育基金',
          image: 'https://picsum.photos/id/1023/400/300',
          description: '為貧困地區的女童提供教育機會，讓她們擁有更美好的未來。',
        },
        // ...
      ],
    };
  },
};
</script>


<template>
  <div>
    <h1>{{ project.title }}</h1>
    <img :src="project.image" alt="project image">
    <p>{{ project.description }}</p>
    <p>目標：{{ project.goal }} 元</p>
    <p>已募集：{{ project.funded }} 元</p>
    <progress :max="project.goal" :value="project.funded"></progress>
    <h2>贊助方案</h2>
    <ul>
      <li v-for="reward in project.rewards" :key="reward.id">
        <p>{{ reward.title }} - {{ reward.amount }} 元</p>
        <p>{{ reward.description }}</p>
        <button @click="pledge(reward)">贊助</button>
      </li>
    </ul>
    <h2>贊助者列表</h2>
    <ul>
      <li v-for="backer in project.backers" :key="backer.id">{{ backer.name }}</li>
    </ul>
    <h2>評論</h2>
    <ul>
      <li


<template>
  <div class="project-detail">
    <h1>{{ project.title }}</h1>
    <p>{{ project.description }}</p>
    <div class="goal">
      <span class="label">目標金額:</span>
      <span class="value">{{ project.goal }}</span>
    </div>
    <div class="funds-raised">
      <span class="label">已募資金額:</span>
      <span class="value">{{ project.fundsRaised }}</span>
    </div>
    <div class="deadline">
      <span class="label">募資截止日期:</span>
      <span class="value">{{ project.deadline }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProjectDetail",
  data() {
    return {
      project: {
        title: "範例募資專案",
        description: "這是一個範例募資專案的說明",
        goal: 10000,
        fundsRaised: 5000,
        deadline: "2023-06-30"
      }
    }
  }
}
</script>

<style scoped>
/* 為了讓範例更加美觀，這裡添加了一些 CSS */
.project-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.goal, .funds-raised, .deadline {
  margin-top: 10px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
}

.value {
  font-weight: normal;
}
</style>


import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";
import ProjectDetail from "@/views/ProjectDetail.vue";

Vue.use(VueRouter);

const routes =


<template>
  <div>
    <div class="project-header">
      <img :src="project.image" alt="Project Image">
      <h1>{{ project.title }}</h1>
      <p>{{ project.description }}</p>
    </div>
    <div class="project-details">
      <div class="progress-bar">
        <div class="progress" :style="{ width: progress + '%' }"></div>
      </div>
      <div class="project-info">
        <div class="funding-details">
          <div>
            <span class="funding-label">目標</span>
            <span class="funding-amount">{{ project.goal | currency }}</span>
          </div>
          <div>
            <span class="funding-label">已募資</span>
            <span class="funding-amount">{{ project.funded | currency }}</span>
          </div>
          <div>
            <span class="funding-label">贊助人數</span>
            <span class="funding-amount">{{ project.backers }}</span>
          </div>
          <div>
            <span class="funding-label">剩餘天數</span>
            <span class="funding-amount">{{ daysRemaining }} 天</span>
          </div>
        </div>
        <div class="project-actions">
          <button class="button primary">贊助此專案</button>
          <button class="button secondary">分享此專案</button>
        </div>
      </div>
    </div>
    <div class="project-rewards">
      <h2>贊助方案</h2>
      <p>選擇一個方案來贊助此專案：</p>
      <ul>
        <li v-for="reward in project.rewards">
          <h3>{{ reward.title }}</h3>
          <p>{{ reward.description }}</p>
          <p class="reward-amount">{{ reward.amount | currency

## chatGPT 寫 todolist


### HTML

<div id="app">
  <h1>Todo List</h1>
  <form v-on:submit.prevent="addTodo">
    <input type="text" v-model="newTodoText">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos">
      <span v-bind:class="{ done: todo.done }">{{ todo.text }}</span>
      <button v-on:click="removeTodo">Delete</button>
    </li>
  </ul>
</div>

### VUE

new Vue({
  el: '#app',
  data: {
    newTodoText: '',
    todos: []
  },
  methods: {
    addTodo: function () {
      var text = this.newTodoText.trim();
      if (text) {
        this.todos.push({
          text: text,
          done: false
        });
        this.newTodoText = '';
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1);
    }
  }
});

### CSS

.done {
  text-decoration: line-through;
}