# Jquery實戰:todo list--心得筆記

## 課程：
[To Do List App Using HTML - CSS - JQUERY | [ Beginner ]
](https://www.youtube.com/watch?v=u4p6x-QH_vI)

## 完成品：

https://codepen.io/flwrtykd-the-scripter/pen/dyjWWzJ

## 原理：

版面：
一個container裡面放input、button、ul。
ul裡面放很多li，是代辦事項。

JS：
新增事項、隱藏事項、給事項加入已完成的樣式。

## 筆記心得：

### 物件想「align-items」，必須先調整body大小

要置中的時候「align-items: center」失效，

因為沒有在body加入：
`「min-height: 100vh」`

若body沒撐開，看起來物件就沒有在中間。
所以必須讓他最小的長寬也要是佔比100%的螢幕，

##### 相關資料包：
[利用 CSS View Height (vh) 製作置底 Footer](https://myapollo.com.tw/zh-tw/css-viewport-height/)

[Stretching body to full viewport height: the missing way](https://dev.to/fenok/stretching-body-to-full-viewport-height-the-missing-way-2ghd#:~:text=Applying%20min%2Dheight%3A%20100vh%20to,grow%20even%20more%20if%20necessary.)

[w3h:CSS min-height Property](https://www.w3schools.com/cssref/pr_dim_min-height.php)

### margin:置中技巧

應用方法：把東西丟中間，排版好用。
> margin: 0 auto;
>
是「0 auto 0 auto」 的簡寫，表示上下邊界為0 ，左右為auto 表示自己均分。

margin 會去判斷 .container 的寬度以及螢幕的寬度，相減之後除以二就是左右邊界的數值了。

##### 相關資料包：
[[30 道難解的CSS排版] 第 2 道：認識對齊 II](https://ithelp.ithome.com.tw/articles/10213643#:~:text=%E7%84%B6%E5%BE%8C%E7%89%88%E9%9D%A2%E5%B0%B1%E5%8F%AF%E4%BB%A5%E7%BD%AE,%E5%B7%A6%E5%8F%B3%E9%82%8A%E7%95%8C%E7%9A%84%E6%95%B8%E5%80%BC%E4%BA%86%E3%80%82)

[CSS垂直置中技巧，我只會23個，你會幾個](http://csscoke.com/2018/08/21/css-vertical-align/)

[camel 's blog/水平置中與垂直置中(傳統作法)](https://blog.camel2243.com/2016/11/13/css-%E6%B0%B4%E5%B9%B3%E7%BD%AE%E4%B8%AD%E8%88%87%E5%9E%82%E7%9B%B4%E7%BD%AE%E4%B8%AD%E5%82%B3%E7%B5%B1%E4%BD%9C%E6%B3%95/)

### box-shadow的範例

應用方法：讓卡片變成立體。

box-shadow: 10px 5px 5px red;
/* offset-x | offset-y | blur-radius | color */

##### 相關資料包：
[MDN/box-shadow
](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)

[Beautiful CSS box-shadow examples](https://getcssscan.com/css-box-shadow-examples)

### background的線性用法

應用方法：弄個酷酷的線性彩色背景，看起來狠潮、酷。
`background:linear-gradient(45deg,rgb(18, 119, 4) 50%,#333 50%);`

##### 相關資料包：
[MDN/linear-gradient()
](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)

[w3h/CSS Gradients](https://www.w3schools.com/css/css3_gradients.asp)

[CSS Gradient調整器](https://cssgradient.io/)

### 用CSS去除li的點點

透過CSS改寫：
`list-style-type:none`

### font awesome的link使用

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

[cdnjs](https://cdnjs.com/libraries/font-awesome)