A simple YouTube-like frontend with HTML, CSS and JavaScript.
- (5%) 這部影片底下目前有1則留言，但前端卻顯示總共有0則留言，請修改index.html把「0則留言」改成「1則留言」
- (10%) 在YouTube留言的輸入區下方應該要有兩個按鈕，「取消」和「留言」。請在id="comment-button-group"的<div>裡依序加入兩個按鈕：
- 第1個按鈕的id="cancel-button"，裡面包含文字"取消"
- 第2個按鈕的id="comment-button"，裡面包含文字"留言"
- (10%) 修改「取消」和「留言」按鈕的CSS，須符合以下要求：
- 無邊線
- 邊角要有2px的圓角
- 寬度72px
- 高度40px
- (5%) 「取消」按鈕背景顏色是#ffffff，字的顏色是#606060。
- (5%) 「留言」按鈕背景顏色是#cccccc，字的顏色是#ffffff。
- (5%) 在輸入欄打字，「留言」按鈕的背景色會變成#065fd4(藍色)。刪除輸入內容後，背景顏色變回#cccccc。
- (5%) 按下「留言」按鈕後，請清空輸入欄的內容，並讓「留言」按鈕背景顏色變回#cccccc。
- (10%) Youtube的留言區一開始是不會顯示「取消」和「留言」按鈕的，是按了輸入欄之後按鈕才會出現(在打字前就會出現)。請修改main.js，並以「不會移除DOM」的方式實作這個功能。
- (5%) 按下「取消」按鈕後，清除輸入欄的內容並隱藏(不要移除)「取消」和「留言」按鈕。
- (25%) 在輸入欄打字後，按下「留言」按鈕就會把留言新增到留言區。請參考index.html中class="comment"的物件寫法複製一個一樣的物件，並把該物件中<p>內的文字改成輸入欄裡面的內容後，將該物件新增到id="comment-group"的<div>裡面。請注意以下幾點：
- 輸入欄內「沒有內容」或「只有空白」時，「留言」按鈕顏色仍是#cccccc，不會變成#065fd4。
- 輸入欄內「沒有內容」或「只有空白」時，「留言」按鈕的disabled屬性必須是true，也無法新增留言。
- 在輸入欄內輸入的字串，被顯示在留言區時會自動把字串頭尾的所有空白刪除，但如果是在非空白字元中間的空白則不予刪除。
- 新增留言後，「留言」和「取消」按鈕不會被隱藏
- (15%) 在新增留言時，你會發現留言數量統計一直停在1則留言。請修改main.js使得新增留言時，留言數量統計會更新並顯示正確的留言數量。
- 我們在測試時會使用「留言」按鈕新增留言，要拿到這部分的分數請確保「留言」按鈕能夠運作。