appTodo/index.html at master · fadelun/appTodo · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./src/images/favicon-32x32.png"
    />

    <link rel="stylesheet" href="public/tailwind.css" />

    <title>Frontend Mentor | Todo app</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      body {
        background-image: url(./src/images/bg-desktop-light.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: 6%;
      }

      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body
    class="dark:bg-darkTheme-100 bg-lightTheme-200 font-body overflow-x-hidden w-screen font-normal"
    onload="loadAllData()"
  >
    <div class="container mx-auto relative">
      <header
        class="flex md:justify-around justify-between mt-20 uppercase mx-5"
      >
        <h3 class="text-5xl text-white font-bold tracking-widessst">Todo</h3>
        <button id="mode-btn" class="p-2 w-10">
          <img src="./src/images/icon-moon.svg" class="w-full" />
        </button>
      </header>
      <main
        class="dark:text-darkTheme-300 text-lightTheme-500 absolute top-20 left-4 right-4 md:left-20 md:right-20 xl:left-44 xl:right-44"
      >
        <!-- input -->
        <input
          type="text"
          placeholder="Create a new tooo..."
          id="myInput"
          class="dark:bg-darkTheme-200 dark:text-darkTheme-300 bg-lightTheme-100 text-lightTheme-400 p-4 mb-6 rounded w-full"
        />
        <!--  -->
        <section
          class="dark:bg-darkTheme-200 bg-lightTheme-100 rounded shadow-x"
        >
          <ul class="todo-list"></ul>
          <div class="info p-3 pl-3 flex justify-between text-lightTheme-400">
            <span id="item-length" class="hover:text-darkTheme-400">
              0 items length
            </span>
            <!-- media querry -->
            <ul
              class="md:flex md:justify-between md:w-48 md:p-0 md:static dark:bg-darkTheme-200 bg-lightTheme-100 rounded p-3 flex justify-center w-full shadow-x absolute -bottom-20 left-0 right-0"
            >
              <li
                id="all-btn"
                class="hover:text-primary-100 cursor-pointer mx-2"
              >
                All
              </li>
              <li
                id="active-btn"
                class="hover:text-primary-100 cursor-pointer mx-2"
              >
                Active
              </li>
              <li
                id="complt-btn"
                class="hover:text-primary-100 cursor-pointer mx-2"
              >
                Completed
              </li>
            </ul>
            <!--  -->
            <span id="clear-btn" class="hover:text-darkTheme-400 cursor-pointer"
              >Clear Completed</span
            >
          </div>
        </section>
      </main>
    </div>

    <div class="attribution hidden">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Your Name Here</a>.
    </div>
    <script src="public/script.js"></script>
  </body>
</html>