todo-oop-react/index.html at main · forgerlil/todo-oop-react · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-do List App</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav class="d-flex text-light">
      <h1 class="text-light">My To-Do List</h1>
      <form class="d-flex todo-search">
        <input class="form-control todo-search-input" type="search" placeholder="Search To-Dos" aria-label="Search">
        <button class="btn btn-outline-light my-0 todo-search-btn" type="submit">Search</button>
      </form>
    </nav>
  </header>
  <main class="container overflow-hidden">
    <div class="row mb-3 to-do-input-section">
      <div class="input-group todo-input-wrapper">
        <input type="text" class="form-control to-do-input" placeholder="Type in To-Do here" aria-label="To-Do input">
        <button class="btn btn-secondary add-todo-btn" type="button">Add To-Do</button>
      </div>
      <div class="error-msg"></div>
    </div>
    <div class="row">
      <div class="filter-wrapper p-0" aria-label="Filter to-dos">
        <button type="button" class="btn btn-outline-secondary filter-btn current active">Active</button>
        <button type="button" class="btn btn-outline-secondary filter-btn complete">Complete</button>
        <button type="button" class="btn btn-outline-secondary filter-btn all-todos">All To-Dos</button>
      </div>
    </div>
    <div class="to-do-grid mt-5 row">
      <div class="to-do-card-wrapper col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
        <div class="card to-do-card px-2 py-1" id="card1">
          <div class="card-body">
            <input type="checkbox" name="to-do-checkbox" id="to-do-checkbox1" class="to-do-checkbox">
            <label for="to-do-checkbox1" class="card-body">Lorem ipsum dolor sit amet</label>
          </div>
        </div>
      </div>
      <div class="to-do-card-wrapper col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
        <div class="card to-do-card px-2 py-1" id="card2">
          <div class="card-body">
            <input type="checkbox" name="to-do-checkbox" id="to-do-checkbox2" class="to-do-checkbox">
            <label for="to-do-checkbox2" class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</label>
          </div>
        </div>
      </div>
      <div class="to-do-card-wrapper col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
        <div class="card to-do-card px-2 py-1" id="card3">
          <div class="card-body">
            <input type="checkbox" name="to-do-checkbox" id="to-do-checkbox3" class="to-do-checkbox">
            <label for="to-do-checkbox3" class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet</label>
          </div>
        </div>
      </div>
      <div class="to-do-card-wrapper col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
        <div class="card to-do-card px-2 py-1" id="card4">
          <div class="card-body">
            <input type="checkbox" name="to-do-checkbox" id="to-do-checkbox4" class="to-do-checkbox">
            <label for="to-do-checkbox4" class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit</label>
          </div>
        </div>
      </div>
      <div class="to-do-card-wrapper col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
        <div class="card to-do-card px-2 py-1" id="card5">
          <div class="card-body">
            <input type="checkbox" name="to-do-checkbox" id="to-do-checkbox5" class="to-do-checkbox">
            <label for="to-do-checkbox5" class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</label>
          </div>
        </div>
      </div>
      <div class="to-do-card-wrapper col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
        <div class="card to-do-card px-2 py-1" id="card6">
          <div class="card-body">
            <input type="checkbox" name="to-do-checkbox" id="to-do-checkbox6" class="to-do-checkbox">
            <label for="to-do-checkbox6" class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit</label>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="text-light">
    <p>Check the code on our repository on Github:</p>
    <a class="mb-4" href="https://github.com/forgerlil/todo-oop-react" class="mb-2">
      <img src="pictures/github.svg" alt="Github Logo"/>
    </a>
    <p>© 2022 Copyright:</p>
    <div class="mb-2 collabs">
      <img src="https://avatars.githubusercontent.com/u/81853712?v=4" alt="Collaborator Lilian Forger" title="Collaborator Lilian Forger"/>
      <img src="https://avatars.githubusercontent.com/u/99274158?v=4" alt="Collaborator Maria Blanco" title="Collaborator Maria Blanco"/>
      <img src="https://avatars.githubusercontent.com/u/101398734?v=4" alt="Collaborator Nina Schmidt" title="Collaborator Nina Schmidt"/>
      <img src="https://avatars.githubusercontent.com/u/100858519?v=4" alt="Collaborator Uma Harish" title="Collaborator Uma Harish"/>
    </div>
  </footer>
  <script src="main.js"></script>
</body>
</html>