系統功能

當課程變多的時候，就需要搜尋的功能，能很快的過濾出想看的課程，或者是想找的課程。目前系統具備的功能是在 Header 的部份有個搜尋列，可以輸入欲搜尋的項目，還有一個放大鏡icon的搜尋鈕。
在輸入列中輸入文字時，就會隨著輸入的文字，動態搜尋及過濾出含有關鍵字的主題或課程。

技術手法

在系統中，為了要把放大鏡 icon 放在搜尋列中，用了一個 margin-right: -3.25rem 的功能。
用了 focus 中，再把 width 由90%變成 10%, 達到輸入時，搜尋列會自動擴展的特殊效果

&__input {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
        background-color: var(--color-grey-light-2);
        border: none;
        padding: 0.7rem 2rem;
        border-radius: 100px;
        width: 90%;
        transition: all 0.2s;
        margin-right: -3.25rem;
        &:focus {
            outline: none;
            width: 100%;
            background-color: var(--color-grey-light-3);
        }

系統的實作手法，是如果有設定搜尋文字，且採用把課程的文字如果不包含搜尋文字的話，就不顯示課程
        if (search_input.value.length > 0) {
            if (
                topics[i].mid_explain
                    .toLowerCase()
                    .includes(search_input.value.toLowerCase()) > 0
            ) {
                midSearch = true;
            }
        }
「顯示一個搜尋成功的圖片」

系統保留功能

Header 搜尋列中，有個放大鏡icon的搜尋鈕。此處的放大鏡 icon 採用的是 SVG 圖型，此處的 icon 來源，是來自於擁有許多免費 icon 的網站 (https://icomoon.io), 進去網頁後，按下 icoMoon App 的按鈕, 此處在搜尋列中使用 magnify 字串可以搜尋到放大鏡的 icon. 可以選擇多個 icon 後一次下載，接著使用 SVG 檔案下載為 icomoon.zip, 解壓縮後，把 symbol-defs.svg 檔案改名為 sprite.svg 後，使用以下的方式做使用

<form action="#" class="search">
  <input type="text" class="search__input"  id="search__input" placeholder="搜尋主題" />
    <button class="search__button">
      <svg class="search__icon">
        <use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
      </svg>
    </button>
</form>

語文學習28-歷史與文化

	1. 你印象最深刻的歷史是什麼？我最喜歡三國演義。
	2. 你印象中的台灣文化是什麼？到處都是便利商店與小吃飲料店。
	3. 〖單字〗歷史故事
	4. 〖單字〗文化特色