assignment-01-ZiqiangJS/index.html at master · Web-Advanced-Spring-2017/assignment-01-ZiqiangJS · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
  <!DOCTYPE html>
  <html>
    <head>

      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <link type="text/css" rel="stylesheet" href="css/style.css"/>

      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <div id="modal1" class="modal">
        <div class="modal-content pink-text" >
          <h8>NEW TASK</h8>
          <input id="task-content"></input>
        </div>
        <div class="modal-footer">
          <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" id="add">ADD</a>
          <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat" id="cancel">CANCEL</a>
        </div>
      </div>

      <div id="modal2" class="modal">
        <div class="modal-content pink-text">
          <h8>Task Content</h8>
          <input id="task-content2"></input>
        </div>
        <div class="modal-footer">
          <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" id="done">DONE</a>
          <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat" id="remove">REMOVE</a>
        </div>
      </div>

      <ul class="collection" id="list">
        <li class="collection-header pink-text" id="head"><h4>TO DO LIST</h4></li>

        <li class="collection-item">
            Do Some Javascript!!!!
            <a href="#!" class="secondary-content">
              <i class="material-icons waves-effect waves-green" id="edit" href="# modal2">edit</i>
            </a>

        </li>

      </ul>

       <img class="materialboxed" width="100%" src="image/penheader.jpg">


      <a class="btn-floating btn-large waves-effect waves-light pink" href="#modal1" id="button"><i class="material-icons">add</i></a>


      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script type="text/javascript" src="js/index.js"></script>
    </body>
  </html>