<h1>老爸的私房錢 專案分享</h1>

<!-- 要如何在jwt的驗證中，登入後(認證過可以登入後)把該登入user的 id一起傳到登入後的頁面，讓該頁面可以透過userid去找另一個資料表中他的資料，再渲染在畫面上 -->

<h2>icon選擇</h2>
<p>【google fonts 使用方式】</p>
<p>載入<link>，當成文字使用

<a href="https://fonts.google.com/icons">Google Font</a>

`<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0"/>`

<p>&nbsp;</p>

<p>【Fontawesome 使用方式】</p>
<p>載入script，修改class名稱，來顯示不同icon

<a href="https://fontawesome.com/search?s=solid&f=sharp&o=r">Fontawesome</a>

`<script src="https://kit.fontawesome.com/4b94391e0c.js" crossorigin="anonymous"></script>`

</p>

<h2>在handlebars檔案裡面使用script</h2>
<p>在實作下拉式選單時，為了讓功能可以實現，想到一個可行得方法，也才發現handlebars裡面可以直接寫入script，其中也遇到幾個問題：</p>

<ol>
<li>實作delete按鈕點擊後跳出警示，原作法為將警示modal放在e帳目的each渲染內，這樣就可以將modal的delete按鈕，綁到帳目的id
，但此做法不僅會造成each跑出太多modal，也在bootwatch的某些模板上並不適用，因此決定將modal拿到each外面，再寫script，處理modal綁住帳目id的問題。</li>

<li>為了先測試在delete button上寫onclick的效果如何，因此先寫了delete()當作function名稱，後來發現其為預設名稱不可用之，以後記得注意function或變數名稱不要打一些可能為系統預設的字。</li>

<li>以上解決後，function仍然不能執行，並顯示deleteBtn is not defined，原因發現為載入順序問題，瀏覽器拿到檔案，會先開始解析html，而script放在最下面，因此還沒有被解析到，因此deleteBtn is not defined，再將其分為scripr拉到檔案最上方，即可完成。</li>

</ol>

<h2>CSS小技巧</h2>

<p>作業需求中的framework，列表的樣式有將偶數列與基數列改為不同顏色，這只要修改css即可</p>

<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child">●偶數變色</a>(ＭＤＮ)</p>

`nth-child(oven)`

<!-- <li>How to pass variables to the next middleware using next() in Express.js ?</li>

<p>
A:set it in req
</p>

<p>postgreSQL prisma</p>

<p>get 跟post的取資料方法 不一樣</p> -->