To Do List

功能說明

  1. 在list中新增項目
  2. 編輯已新增之項目
  3. 刪除list中的項目
  4. 清空list

HTML重點

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<section class="section-center">
    <!-- form -->
    <form class="grocery-form">
    
        <!-- 警告訊息 -->
        <p class="alert"></p>
        
        <!-- 標題 -->
        <h3>grocery bud</h3>
        
        <!-- 搜尋欄 -->
        <div class="form-control">
        
            <!-- 輸入方格 -->
            <input type="text" id="grocery" placeholder="e.g. eggs" />
            
            <!-- 輸入按鈕 -->
            <button type="submit" class="submit-btn">submit</button>
        </div>
    </form>
    
    <!-- list區域 -->
    <div class="grocery-container">
    
        <!-- 項目list -->
        <div class="grocery-list"></div>
        
        <!-- 清空list按鈕 -->
        <button class="clear-btn">clear items</button>
    </div>
    
</section>