To-do-app/index.html at main · Eghinner/To-do-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
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>To do App</title>
  <link rel="shortcut icon" href="images/punisher.png" type="image/x-icon">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <img src="images/bg-desktop-light.jpg" style="display: var(--day);" id="img_moon">
  <img src="images/bg-desktop-dark.jpg" style="display: var(--night);" id="img_sun">
  <div class="contain">
  <div class="contain_center">
    <div class="header">
    <h1>TODO</h1><svg id="switch" xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path id="sun" style="display: var(--day);" fill="#FFF" fill-rule="evenodd" d="M13 21a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-5.657-2.343a1 1 0 010 1.414l-2.121 2.121a1 1 0 01-1.414-1.414l2.12-2.121a1 1 0 011.415 0zm12.728 0l2.121 2.121a1 1 0 01-1.414 1.414l-2.121-2.12a1 1 0 011.414-1.415zM13 8a5 5 0 110 10 5 5 0 010-10zm12 4a1 1 0 110 2h-3a1 1 0 110-2h3zM4 12a1 1 0 110 2H1a1 1 0 110-2h3zm18.192-8.192a1 1 0 010 1.414l-2.12 2.121a1 1 0 01-1.415-1.414l2.121-2.121a1 1 0 011.414 0zm-16.97 0l2.121 2.12A1 1 0 015.93 7.344L3.808 5.222a1 1 0 011.414-1.414zM13 0a1 1 0 011 1v3a1 1 0 11-2 0V1a1 1 0 011-1z"/><path id="moon" style="display: var(--night);" fill="#FFF" fill-rule="evenodd" d="M13 0c.81 0 1.603.074 2.373.216C10.593 1.199 7 5.43 7 10.5 7 16.299 11.701 21 17.5 21c2.996 0 5.7-1.255 7.613-3.268C23.22 22.572 18.51 26 13 26 5.82 26 0 20.18 0 13S5.82 0 13 0z"/></svg>
  </div>
    <form>
      <input autocomplete="off" class="enter" id="item" type="text" placeholder="Create a new todo..">
    </form>

    <ul id="all"></ul>
    <ul id="active" style="display: none;"></ul>
    <ul id="complete" style="display: none;"></ul>

<div class="barra_display">
  <p>Items</p>
  <button id="clear">Clear All</button>
</div>
<form id="kawaii">

 <input type="radio" id="show_all" name="status" checked>
<label class="laurels" for="show_all">All</label>

 <input type="radio" id="show_active" name="status">
<label class="laurels" for="show_active">Active</label>

 <input type="radio" id="show_complete" name="status">
<label class="laurels" for="show_complete">Completed</label>
</form>
<footer>Omedeto! Now you can drag the tasks ... Enjoy</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>