todo-app/index.html at main · Frontend-Mentor-Projects-Daniel/todo-app · 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <!-- Favicon -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/src/assets/images/favicon-32x32.png"
    />
    <!-- CSS stylesheet -->
    <link rel="stylesheet" href="/src/css/Main.css" />
    <title>Frontend Mentor | Todo app</title>

    <!-- JS -->
    <script src="./src/js/bundle.js" defer></script>
  </head>
  <body id="light">
    <header class="header">
      <div class="todo-wrapper center">
        <h1>TODO</h1>
        <button class="theme-toggler" aria-label="toggles light and dark">
          <img
            src="/src/assets/images/icon-moon.svg"
            alt=""
            aria-hidden="true"
          />
        </button>
      </div>
      <form class="create-bar-form center">
        <label class="sr-only" for="create-bar">Create a task</label>
        <input
          required
          name="create-bar"
          id="create-bar"
          class="create-bar"
          type="text"
          placeholder="Create a new todo..."
          pattern="^(?=\S)[\S\s]*$"
        />
      </form>
    </header>
    <main class="center">
      <div class="status-bar">
        <div class="wrapper">
          <div class="items-left">
            <p>5 items left</p>
          </div>
          <button class="clear-btn">Clear Completed</button>
        </div>
        <div class="tabs" role="tablist">
          <button role="tab" id="all" class="tab all" aria-selected="true">
            All
          </button>
          <button role="tab" id="active" class="tab active">Active</button>
          <button role="tab" id="completed" class="tab completed">
            Completed
          </button>
        </div>

        <div class="alternate-status-bar">
          <div class="items-left">
            <p>5 items left</p>
          </div>
          <button class="clear-btn">Clear Completed</button>

          <div class="tabs" role="tablist">
            <button role="tab" id="tab1" class="tab all" aria-selected="true">
              All
            </button>
            <button role="tab" id="tab2" class="tab active">Active</button>
            <button role="tab" id="tab3" class="tab completed">
              Completed
            </button>
          </div>
        </div>
      </div>

      <div class="todo-list">
        <ul class="list" aria-live="polite">
          <template id="example-list-item">
            <li
              role="tabpanel"
              aria-labelledby="active"
              class="list-item draggable"
              data-id="001"
              draggable="true"
            >
              <button class="complete-btn">
                <img
                  src="/src/assets/images/icon-check.svg"
                  aria-hidden="true"
                  alt=""
                />
                <span class="sr-only">Mark Todo as complete</span>
              </button>
              <p class="list-item-text" contenteditable="true">
                This is an example todo. Click on the X to delete it, click on
                the circle to cross it out as complete. Double click on this
                text in order to edit it.
              </p>
              <button class="delete-btn">
                <img
                  src="/src/assets/images/icon-cross.svg"
                  alt=""
                  aria-hidden="true"
                />
                <span class="sr-only">Delete Todo</span>
              </button>
            </li>
          </template>
        </ul>
      </div>
    </main>
    <footer>
      <div class="attribution">
        Challenge by
        <a
          href="https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW/"
          target="_blank"
          >Frontend Mentor</a
        >. Coded by <a href="#">Ahmed & Daniel</a>.
      </div>
    </footer>
  </body>
</html>