# T2-v1 code review
###### tags: `好想工作室`
2022.07.05（Tue.）（Rex）

HTML：
1. 用<hr>取代<div class="uderline">
2. 中間一條「free shipping world」改<P>
（也可使用偽元素）
> 原先用<span>，還得把他的display改成inline-block
> 且用<p>block屬性，可直接對他修改bgc
3. 「Must Have Items」換成<h3>或<p>
> 原因同2.
4. items三張圖更好的作法是圖文分開
> 利用<figure>＋<figcaption>
5. footer電話信箱可以改成用複製的方式
> 原先的tel、mailto已經沒人在使用了
> 但改掉後要記得會解釋為什麼要這樣改
6. footer「be our friend」的地方可用form的特性去做
7. fontawesome可加上fa-fw保持寬度一致
> 但要記得加上text-align: center;
> 因為會繼承到父層的text-align: justify;
（可參考T1-new-v4）
8. &copy; 後面要記得加上分號

CSS：
1. 購物袋的大小要再縮小一點
> 在a設置width去修改
2. nav a 加上font-size:0;把空格變不見
3. .header-container的地方：
給高度＋line-height＋vertical-align
> 取代用元素padding去撐開高度
4. .section__container--banner背景圖片：
可以在css利用background
> keywords: no-repeat、cover、center
> 因原先圖片大小過長，不符合需求
5. transform: translate(-50%, -50%)是去改變基準點
6. text-transform: uppercase;
> 因這個版很多大寫，故可用這行一次改
7. 透明度除了用hex color再加末兩位表透明度外，也可用rgba
8. .banner__content沒有設置width
> 裡面的button也可不要設置width
> 用相同方式（元素撐開）去設置保持一致性
9. .image__container--items的圖片width要一致
> 可以研究看看object-fit
10. .footer__container的padding可以寫在一起

其他：
1. .section__container--banner的<h2>：
畫面變小時，文字會從一行變兩行（不應該像這樣跑版）
2. 網頁上有文字的地方應該要可以複製

****

# <font color="#3881a1">HTML</font>
## 5. footer電話信箱可以改成用複製的方式
> 原先的tel、mailto已經沒人在使用了
> 但改掉後要記得會解釋為什麼要這樣改

但是有另外一個問題，使用者按了之後，要怎麼知道自己複製了訊息？

**想法：**
本來想用純css去製作lightbox（之前[2021F2E](https://noz915.github.io/2021F2E-week1_Taiwan-travel-guide/)有用過），但是返回時會再跑出lightbox一遍，不太適合跳出通知使用。

可是也不喜歡用alert，所以就找到了這篇文章：[[Day 12]toastr.js - 美化你的通知訊息](https://ithelp.ithome.com.tw/articles/10185737)

他是利用一個套件叫做toastr.js的去製作通知。

另外複製的方法原本找到「Document.execCommand()」這個方法，但是到mdn發現他已經過時了QQ

> 參考資料：[JavaScript: Clipboard API | 不用監聽鍵盤事件，還能複製非文字項目](https://z3388638.medium.com/javascript-clipboard-api-%E4%B8%8D%E7%94%A8%E7%9B%A3%E8%81%BD%E9%8D%B5%E7%9B%A4%E4%BA%8B%E4%BB%B6-%E9%82%84%E8%83%BD%E8%A4%87%E8%A3%BD%E9%9D%9E%E6%96%87%E5%AD%97%E9%A0%85%E7%9B%AE-b183b099636a)

後來參考上面的連結：

navigator.clipboard.readText();
navigator.clipboard.writeText($("#tel").text());

****

# <font color="#3881a1">CSS</font>

## 4. .section__container--banner背景圖片：
> 可以在css利用background
> keywords: no-repeat、cover、center
> 因原先圖片大小過長，不符合需求

**解決辦法：**

    display: inline-block;
    height: 550px;
    width: 100%;
    background: no-repeat center url("./img/cover.jpg");
    background-size: cover;

****

# <font color="#3881a1">OTHER</font>

## 1. .section__container--banner的`<h2>`
畫面變小時，文字會從一行變兩行（不應該像這樣跑版）

**解決辦法：**
在css上加上「white-space: nowrap;」即可。