# HW1 Html, CSS, 與 JavaScript
如想直接獲得起始程式碼並建立倉儲 (repository)，請點擊[此連結](https://classroom.github.com/a/UWW1sRob)

請在 **<font color="#f00">2023 年 03 月 26 日下午 23:59 (UTF+8)</font>** 之前將此文件連同程式碼提交至所開設的 repo。我們將以截止時間前最後一次提交的內容作為批改項目。

## 概述

請假想自己正任職於由設計師所主導的公司（例如蘋果公司），你的工作就是準確遵照獲得的設計稿與規範實作網頁。

在這堂課的所有作業中，請以題目描述作為規範，準確進行實作，不應偏離設計（評分標準為實作結果與規範的吻合程度）。

在第一個作業中，請使用 Html, CSS, 與 JavaScript 創建網站的一小部分。頁面內容為本機資料庫所儲存的資料，但在作業 6 中，將如同真實世界一般，改為從遠端資料庫中獲取資料。

在此作業中，你**不能使用任何 Javascrip 函式庫**（包含但不僅限於 React、Bootstrap、jQuery、Vue），請從頭開始構建網頁。

在助教版本中， 此作業需要在 main.js 中編寫大約 240 行 JavaScript，在 styles.css 中編寫 350 行 CSS，以及跨 4 個 html 文件編寫大約 275 行 html（總共 865 行）。

作業一網站為 "Scotty Shirts U Illustrate (SSUI)"，以下說明將提供設計稿與規範以供使用。因此，本次作業**不涉及設計網頁的外觀**，只需要實現提供的設計即可。請使用適當、設計良好的 html、CSS 和 JavaScript，以便使用者在普通桌面型電腦的的 Chrome 瀏覽器上正確瀏覽，並讓程式碼易於理解和維護。

## 作業規格與可用資源

該網站將有 4 個 html 頁面、1 個 JavaScript 文件、1 個 css 文件和一個資料庫文件（也是 JavaScript 文件）。

請編寫除資料庫文件之外的所有文件。我們將提供這些文件的起始程式碼，以及可在頁面上使用的若干張圖片。請參閱「使用 GitHub Repo 設定」章節獲取起始程式碼。

以下為起始程式碼包含檔案：

* `index.html` - 主要頁面。包含指向其他頁面的連結、文字訊息和圖片。
* `products.html` - 產品列表頁面。頁面主要內容請基於資料庫文件生成。產品頁面的頁首(header)和頁尾(footer)會有選單(menu)，例如返回首頁按鈕。此外，每個產品都會連結到一個產品詳細資訊頁面。
* `details.html` - 產品詳細資訊頁面。主要內容從上述之相同資料庫文件生成。
* `not_implemented.html` - 靜態的「尚未完成」頁面。用於呈現所有還未完成的頁面。連結到此頁面會使網站看起來更真實。
* `style.css` - 可在其中放置網站的所有 CSS。
* `main.js` - 可在此檔案中撰寫所有所需 JavaScript。
* `shirts.js` - 要在產品頁面上顯示的襯衫之資料庫。由於批改作業時，我們將使用具有相同格式的**不同**列表測試，因此請確保在使用不同值、數量（襯衫與顏色數量），以及具缺失資料（價格、圖片缺失）的列表時，網站依舊可正常運作。請製作此文件的多個版本以先行測試，並在繳交時一併附上。
* `shirt_images/` - 擺放資料庫中提及的襯衫圖片。如果此文件夾中沒有資料庫所提及的襯衫/顏色組合圖像，可使用文件夾中提供的 `not-found.png` 文件作為替代。
* `site_images/` - 其他會在頁面被使用的圖像，例如 `logo.png` 、首頁上的橫幅 `home.png`、購物車圖標 ` cart.png`，以及在 `not_implemented.html` 頁面的 `scotty.png`。

此外，請瀏覽以下圖片和影片，以了解具體規範：

* [HW1-example.mp4](https://www.cs.cmu.edu/~bam/uicourse/05631fall2022/HW1/HW1-example.mp4) - 展示作業外觀和行為的影片（3 分 36 秒），。
* [HW1-index.png](https://www.cs.cmu.edu/~bam/uicourse/05631fall2022/HW1/HW1-index.png) - 主頁頁面外觀。
* [HW1-products.png](https://www.cs.cmu.edu/~bam/uicourse/05631fall2022/HW1/HW1-products.png) - 產品列表頁面外觀。
* [HW1-products-quickview.png](https://www.cs.cmu.edu/~bam/uicourse/05631fall2022/HW1/HW1-products-quickview.png) -產品頁面底部的「快速查看圖片」外觀，在使用者選擇第二件襯衫時呈現（此功能為加分項目，詳細資訊如「加分項目」章節所示）。
* [HW1-details.png](https://www.cs.cmu.edu/~bam/uicourse/05631fall2022/HW1/HW1-details.png) - 產品詳細資訊頁面外觀。當游標懸停(hover)在藍色按鈕上時，文字顏色將從初始設定的黑色轉為白色。
* [HW1-not_implemented.png](https://www.cs.cmu.edu/~bam/uicourse/05631fall2022/HW1/HW1-not_implemented.png) - 所有尚未完成的頁面外觀。

## 詳細要求
請盡可能讓作業的外觀和功能符合上述範例影片與圖片，然而，你**不需要完全符合圖片上的字型、物件尺寸、顏色或間距**。花費時間在調整上述參數並**不會**讓你獲得額外分數，但在作業中可使用以下字型、顏色以接近範例圖片與影片。

* 字型
* 頁首: "Catamaran"
* 頁尾／按鈕： "Open Sans"
* 顏色
* 紅色：#c51230
* 購物車圖標之顏色：#993036 或 #ac2432

請在 CSS 文件中定義樣式，而非在 html 文件中定義樣式。當使用 JavaScript 動態生成頁面內容時，也請引用 CSS 文件中的 Class。（提示：但產品詳細資訊頁面上的彩色按鈕，則需根據 shirts.js 文件中定義的顏色生成）。

請在 `main.js` 文件中定義所有頁面中所需的 JavaScript 程式碼。

以下是網頁所需實作的行為：
* **頁首(header)**
* 每個頁面都應該包含一個**頁首(header)**，包含：公司 logo、公司名稱：Scotty Shirts U Illustrate (SSUI) ，以及紅色圓角矩形中的購物車 logo，購物車中的商品數量為 0。頁首下方為頂部選單(menu)，包含：T-SHIRTS, CREATE FROM PICTURE, CREATE YOUR OWN, ABOUT US, 與 LOG IN。點選公司 logo應連結到主要頁面(`index.html`)、T-SHIRTS 應連結到產品列表頁面(`products.html`)，其他連結（包括點選購物車圖標）應連結到 `not_implemented.png` 頁面。
* 上述資訊應在每個頁面的 html 中定義，並在 CSS 文件定義樣式。（順道一提，在作業 3 和 5 中，將須實作 "CREATE YOUR OWN" 頁面，在作業 4 中會實作購物車，而作業 6 中則會實作 "CREATE FROM PICTURE") 。
* 頁首(header)應固定在所有頁面內容頂部，所以如果內容太多，在滾動時會滾出瀏覽器視窗範圍。

* **頁尾(footer)**
* 每個頁面皆應呈現**頁尾(footer)**，其中包含：Contact Us, Site Map, Privacy Policy, Careers, Reviews，以及 "Designed by \<yourname>"。
* 除 "Designed by..."以外，上述連結皆應連結到 `not_implemented.png`。頁尾應該位於所有內容下方，而非瀏覽器視窗底部。
* **懸停(hover)**
* 所有**可點擊的元素**應該透過 **懸停(hover)** 後的外觀變化，讓使用者了解其可被點擊，如同範例影片所示。例如：在頂部選單選項懸停時結合動畫顯示紅色粗底線、在其他其他按鈕懸停時更改文字顏色。
* 提示：可以透過在css文件中選取適當的元素添加 `transition: 0.5s;` 以實作動畫。
* **主要頁面 (index.html)**
* 應包含 `home.png` 和兩個包含有趣內容的文字框。
* **產品列表頁面(product.html)**
* 除了頁首和頁尾資訊外，其餘內容應從 `shirts.js` 生成。請走訪 `shirts.js` 定義的列表，並為每個項目創建一個條目。產品列表頁面上的條目應至少列出圖片、名稱、有多少種顏色，以及查看詳細資訊的按鈕。單擊詳細資訊按鈕或圖片，可連結至產品詳細資訊頁面。（上個章節圖片與影片呈現的「快速查看 (Quick View)」為加分項目。如果沒有實作此功能，可刪除「快速查看」按鈕，或者令其連接到 `not_implemented.html` ）
* 請注意，條目的佈局(layout)應該適用於任何數量的襯衫（1~20件），以及任何合理的瀏覽器視窗寬度。
* 提示：可製作具有不同值、數量（襯衫與顏色數量），及缺失資料（價格、圖片缺失）列表的 shirts.js 文件，並確保產品列表頁面仍可正常使用。）
* **產品詳細資訊頁面(details.html)**
* 與產品列表頁面類似，除了頁首和頁尾信息外，其餘內容應由 `shirts.js` 文件中的資料生成。請將所選襯衫的所有可用選項顯示為可點擊元素，並根據用戶的選擇切換顯示的圖片。
* 每件襯衫可能有不同顏色可選，且每種顏色都有正面和背面，所以正面和背面的選擇和顏色的選擇應該是獨立的。此外，還應顯示襯衫的其他資訊，例如名稱、敘述和價格。
* 與在產品頁面中一樣，網站應該對缺失資料具有穩健性(Robustness)。
* 提示：你需要將使用者選擇的產品資訊從 `products.html` 上的程式碼傳到 `details.html` 頁面，以便產品詳細資訊頁面顯示正確資料。 每個 html 頁面都定義了自己的 JavaScript 位址空間 (address space)，所以你不能只使用一個全局變數。標準方式是使用如課程中所述的 JavaScript `localStorage` 功能（產品頁面程式碼中的 `setItem` 和產品詳細資訊頁面上的 `getItem` ）。或者也可以將產品資訊作為參數，傳遞到產品詳細資訊頁面的 URL。
* **尚未完成頁面(not_implemented.html)**
* 提醒使用者該頁面尚未完成，該頁面不需要任何頁首、頁尾或連結。使用者可以使用瀏覽器的回上一頁按鈕離開該頁面。如果連結頁面尚未完成，每個具有連結的元素都應在單擊後跳轉到此頁面。
* **視窗的大小變化**
* 當瀏覽器**視窗的大小發生改變**時，所有頁面都應該做一些合理變化。例如，頁首和頁尾的寬度可以變得更窄。請注意此作業不須實作響應式頁面(Responsive Web Page, RWD)，例如根據視窗寬度更改條目佈局(layout)或內容，但若實作 RWD 可獲得加分。

## 補充：作業所需資源
除起始程式碼中包含之檔案外，你可能還需要以下兩項檔案：
* `not-found.png`: 若文件夾中沒有資料庫所提及的襯衫/顏色組合圖像，可使用其圖片作為替代
* `shopping-carts.svg`: 購物車 logo

請[點擊此連結](https://github.com/yin1218/hw1-supplement)以獲得上述之檔案。

## 加分項目
* **「快速查看」按鈕**（最多在此作業中 +5分）
* 如範例所示，可針對產品列表頁面上的每件襯衫條目新增「快速查看」按鈕，以顯示部分位於產品詳細資訊頁面上的資訊。
* 顯示區塊可如同範例位於頁面底部，也可使用彈出式視窗(pop-up)呈現。
* 使用者應可關閉此區塊（如範例例中的「關閉」按鈕，若以彈出式視窗實作，也應該有一個 "X" 按鈕令其被關閉它），並且當在範例圖片中快速查看的圖片點擊時，它應該連結到詳細信息頁面。
* 如果你沒有實作此加分項目，請刪除「快速查看」按鈕，或連結到未實現的頁面。

* **響應式頁面 Responsive Web Page**（最多在此作業中 +5分）
* 請使作業中的頁面具有響應性，這代表著隨著視窗寬度的增減，頁面應重新排列並更改內容。例如，當網頁寬度為手機寬度時，請將頁首和頁尾選單改以可展開的漢堡圖標 (Hamburger button)呈現，就像在手機上使用 [NTU Cool](https://cool.ntu.edu.tw/) 時選單的呈現樣式
* 提示：在此作業中不可使用任何函式庫(包含 Bootstrap)，因此請使用 css 文件中的 `@media` ）。
* 當視窗較窄時，請同時更改產品頁面的佈局方式。
* 注意：在內容變窄時壓縮內容寬度，是基本作業要求的一部分。若希望可達成加分條件，請調整頁面結構。

## 使用 GitHub Repo 設定

* **請點擊[此連結](https://classroom.github.com/a/UWW1sRob)以獲得 HW1 起始程式碼並建立倉儲** (repository)
* 可下載 Github Desktop，以便在本機端輕鬆編輯程式碼並將更改提交到 Github

## 繳交規範

除了程式碼之外，請同時在 Repo 中新增 `README` 文件。該文件可以是純文字、Microsoft Word、markdown 或 pdf 格式。其中應包含：

* 姓名
* 你所實作的網站如何被測試，並描述你所繳交的任何額外 `shirts.js` 文件（若有）。
* 你所實作的加分作業項目，以及如何觸發它。
* 其他你所實作的網站的有趣之處

請在 **<font color="#f00">2023 年 03 月 26 日下午 23:59 (UTF+8)</font>** 之前將此文件連同程式碼提交至所開設的 repo。我們將以截止時間前最後一次提交的內容作為批改項目。

###### tags: `使用者介面程式設計` `Programming User Interface`