CodeupClassroom · JacobGonzalez0 · Dec 14, 2020 · Dec 14, 2020 · Dec 14, 2020 · Dec 14, 2020
diff --git a/double-metaphone.js b/double-metaphone.js
diff --git a/img/backhill.png b/img/backhill.png
diff --git a/img/cloud0.png b/img/cloud0.png
diff --git a/img/cloud1.png b/img/cloud1.png
diff --git a/img/cloud2.png b/img/cloud2.png
diff --git a/img/cloud3.png b/img/cloud3.png
diff --git a/img/cloud4.png b/img/cloud4.png
diff --git a/img/fronthill.png b/img/fronthill.png
diff --git a/img/landscape.png b/img/landscape.png
diff --git a/img/moon.svg b/img/moon.svg
diff --git a/img/mountainback.png b/img/mountainback.png
diff --git a/img/mountainfront.png b/img/mountainfront.png
diff --git a/index.html b/index.html
@@ -2,33 +2,103 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title></title>
-    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Average Joe's Coffee!</title>
+    <link rel="stylesheet" href="style.css"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css'/>
 </head>
+
 <body>
-    <h1>Coffee!</h1>
-
-    <form>
-        <label for="roast-selection"></label>
-        <select id="roast-selection">
-            <option>light</option>
-            <option>medium</option>
-            <option>dark</option>
-        </select>
-        <input id="submit" type="submit" />
-    </form>
-
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+    <canvas id="myCanvas" ></canvas>
+    <div id="content" class="container text-light my-md-3 mt-lg-5 p-4 rounded-lg">
+
+        <div id="optionsButton" class="text-right">ⓘ</div>
+
+        <h1 class="text-center">Average Joe's Coffee Company</h1>
+
+        <hr>
+
+        <div class="row">
+
+            <div class="col-12 col-lg order-1">
+
+                <div id="coffees" class="row">
+
+
+                </div>
+
+            </div>
+
+            <div class="col order-2 order-lg-1">
+
+                <form >
+                    <div class="form-group">
+
+                        <label class="px-0 col font-weight-bold" for="roast-selection">Roast</label>
+                        <select id="roast-selection" class="my-1 form-control mode-menu">
+                            <option>All</option>
+                            <option>Light</option>
+                            <option>Medium</option>
+                            <option>Dark</option>
+                        </select>
+
+                        <label for="search" class="px-0 col font-weight-bold my-1"> Coffee Name</label>
+                        <input class="col form-control my-1 mode-menu" type="text" id="search" placeholder="Just start typing!">
+
+                    </div>
+                </form>
+
+
+
+
+
+
+                <form>
+                    <div class="form-group">
+
+                        <h2 class="col text-center" >Add a Coffee</h2>
+
+                        <label for="add-roast" class="px-0 col font-weight-bold my-1"> Roast</label>
+                        <select id="add-roast" class="col form-control my-1 mode-menu">
+                            <option>Light</option>
+                            <option>Medium</option>
+                            <option>Dark</option>
+                        </select>
+
+                        <label for="add-coffee" class="px-0 col font-weight-bold my-1"> Name</label>
+                        <input type="text" id="add-coffee" class="col form-control my-1 mode-menu" placeholder="What's the name of your new coffee?">
+
+                        <button class="col btn-blue my-2 p-2 font-weight-bold " id="submit-new-coffee" type="submit">Add your coffee</button>
+                    </div>
+                </form>
+
+            </div>
+
+        </div>
+
+
+
+
+
+
+    </div>
+
+    <div id="options" class="rounded container">
+        <div id="close-options" class="text-right mt-2">X</div>
+
+        <div class="container-fluid">
+            <div class="d-flex flex-column align-items-center justify-items-center">
+                <h2 class="text-center mt-4 mb-5" id="options-text">Options</h2>
+                <hr>
+                <button class="col btn-blue my-2 p-2 font-weight-bold " id="mode-button" type="submit">Turn on Dark Mode</button>
+                <button class="col btn-blue my-2 p-2 font-weight-bold " id="custom-delete" type="submit">Delete All Custom Coffees</button>
+            </div>
+        </div>
+
+    </div>
 
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js'></script>
+    <script src="double-metaphone.js"></script>
     <script src="main.js"></script>
 </body>
 </html>