MealPlanner/index.html at main · rsowald/MealPlanner · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!--html-->
<!DOCTYPE html>
<html lang="en">

<!-- webpage meta data, title, links -->

<head>
  <!-- metadata -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- title -->
  <title>What Am I Eating Today?</title>
  <!-- materialize css link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!-- google font/icon link -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- jquery link -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">
  </script>
  <!-- materialize js link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">
  </script>
  <!-- link for local css -->
  <link rel="stylesheet" href="assets/style.css">
</head>

<!-- main body -->

<body>
  <!-- webpage header -->
  <header class="center amber">
    <h1>What Am I Eating Today?</h1>
  </header>
  <!-- main container -->
  <div class="container">

    <!-- top row for input/buttons -->
    <div class="row">
      <div class="col s12 m3 inline">
        <p id="plannerDate" class="planner"></p>
      </div>
      <!-- input form -->
      <form class="col s12 m4 input-field center inline">
        <!-- user input -->
        <input id="user-search" type="text">
        <label class="active" for="user-search">Search by Dish Name</label>
        <button type="submit" class="waves-effect waves-light btn prefix" id="search-btn"><i
            class="material-icons">search</i></button>
      </form>
      <!-- column for drink button -->
      <div class="col s12 m4 right">
        <h5>Random Cocktail?</h5>
        <button class="waves-effect waves-light btn" id="random-btn"><i class="material-icons">search</i></button>
      </div>
    </div>

    <!-- main row -->
    <div class="row">
      <!-- column for aside -->
      <aside class="col s12 m3">

        <!-- card for calendar -->
        <div class="card">
          <!-- calendar image -->
          <div class="card-image">
            <img src="assets/eric-rothermel-FoKO4DpXamQ-unsplash.jpg">
            <span class="card-title">Calendar</span>
          </div>
          <!-- open calendar button -->
          <div class="card-action">
            <button class="waves-effect waves-light btn modal-trigger" href="#modal1">Open</button>
          </div>
      </aside>

      <!-- column for search results -->
      <div class="col s12 m9">
        <div class="row">
          <div class="col s12 m6">
            <!-- empty div for recipes -->
            <div id="recipesResults"></div>
          </div>
          <!-- empty div for drink -->
          <div class="col s12 m6" id="drinkResult"></div>
        </div>
      </div>

    </div>
  </div>

  <!-- main modal -->
  <div id="modal1" class="modal modal-fixed-footer grey lighten-4">

    <div class="modal-content">
      <!-- top row  -->
      <div class="row center">
        <h4>Meal Schedule</h4>
      </div>
      <!-- Sunday textarea input -->
      <div class="input-field row">
        <h6>Sunday</h6>
        <div class="links" id="links-Sun"></div>
        <textarea placeholder="Add notes here..." id="day-Sun" class="materialize-textarea"></textarea>
      </div>
      <!-- Monday textarea input -->
      <div class="input-field row">
        <h6>Monday</h6>
        <div class="links" id="links-M"></div>
        <textarea placeholder="Add notes here..." id="day-M" class="materialize-textarea"></textarea>
      </div>
      <!-- Tuesday textarea input -->
      <div class="input-field row">
        <h6>Tuesday</h6>
        <div class="links" id="links-T"></div>
        <textarea placeholder="Add notes here..." id="day-T" class="materialize-textarea"></textarea>
      </div>
      <!-- Wednesday textarea input -->
      <div class="input-field row">
        <h6>Wednesday</h6>
        <div class="links" id="links-W"></div>
        <textarea placeholder="Add notes here..." id="day-W" class="materialize-textarea"></textarea>
      </div>
      <!-- Thursday textarea input -->
      <div class="input-field row">
        <h6>Thursday</h6>
        <div class="links" id="links-Th"></div>
        <textarea placeholder="Add notes here..." id="day-Th" class="materialize-textarea"></textarea>
      </div>
      <!-- Friday textarea input -->
      <div class="input-field row">
        <h6>Friday</h6>
        <div class="links" id="links-F"></div>
        <textarea placeholder="Add notes here..." id="day-F" class="materialize-textarea"></textarea>
      </div>
      <!-- Saturday textarea input -->
      <div class="input-field row">
        <h6>Saturday</h6>
        <div class="links" id="links-S"></div>
        <textarea placeholder="Add notes here..." id="day-S" class="materialize-textarea"></textarea>
      </div>
    </div>
    <!-- modal footer -->
    <div class="modal-footer">
      <!-- save & close button and clear button-->
      <button class="modal-close waves-effect waves-green btn" id="close-button">Save and Close</button>
      <button class="waves-effect waves-green btn" id="clear-button">Clear</button>

    </div>
  </div>

  <script src="assets/luxon.js"></script>

  <!-- script source for local js -->

  <script src="assets/script.js"></script>
</body>

</html>