gocodeup · rohleet · Oct 7, 2025 · Oct 7, 2025 · Oct 8, 2025 · Oct 10, 2025
diff --git a/data/coffees.js b/data/coffees.js
@@ -0,0 +1,68 @@
+export let coffees = [{
+    id : '1',
+    name : 'Light City',
+    roast : 'light'
+}, {
+    id : '2',
+    name : 'Half City',
+    roast : 'light'
+
+}, {
+    id : '3',
+    name : 'Cinnamon',
+    roast : 'light'
+
+}, {
+    id : '4',
+    name : 'City',
+    roast : 'medium'
+
+}, {
+    id : '5',
+    name : 'American',
+    roast : 'medium'
+
+}, {
+    id : '6',
+    name : 'Breakfast',
+    roast : 'medium'
+
+}, {
+    id : '7',
+    name : 'High',
+    roast : 'dark'
+}, {
+    id : '8',
+    name : 'Continental',
+    roast : 'dark'
+
+}, {
+    id : '9',
+    name : 'New Orleans',
+    roast : 'dark'
+
+}, {
+    id : '10',
+    name : 'European',
+    roast : 'dark'
+
+}, {
+    id : '11',
+    name : 'Espresso',
+    roast : 'dark'
+
+}, {
+    id : '12',
+    name : 'Viennese',
+    roast : 'dark'
+
+}, {
+    id : '13',
+    name : 'Italian',
+    roast : 'dark'
+
+}, {
+    id : '14',
+    name : 'French',
+    roast : 'dark'
+}]
diff --git a/index.html b/index.html
@@ -4,31 +4,82 @@
     <meta charset="UTF-8">
     <title></title>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="styles/header.css">
+    <link rel="stylesheet" href="styles/central.css">
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap" rel="stylesheet">
 </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>
-
-    <script src="main.js"></script>
+
+    <div class="main-container">
+
+        <div class="header">
+            <div id="left-section">
+                <button id="Home" class="left-section-buttons">Home</button>
+                <button id="About" class="left-section-buttons">About Us</button>
+                <a href="pages/addCoffee.html">
+                    <button id="Add" class="left-section-buttons">Add Coffee</button>
+                </a>
+            </div>
+
+            <div id="right-section">
+                Coffee Chronicles
+            </div>
+        </div>
+
+        <div class="central-container">
+            <div class="coffee-grid">
+                <!-- <div class="coffee">
+                    <div class="name">
+                        Light City
+                    </div>
+                    <div class="roast">
+                        Light
+                    </div>
+                </div>
+                <div class="coffee">
+                    Light City
+                </div>
+                <div class="coffee">
+                    Light City
+                </div>
+                <div class="coffee">
+                    Light City
+                </div>
+                <div class="coffee">
+                    Light City
+                </div>
+                <div class="coffee">
+                    Light City
+                </div>
+                <div class="coffee">
+                    Light City
+                </div>
+                <div class="coffee">
+                    Light City
+                </div> -->
+            </div>
+            <div class="coffee-selection">
+
+                <div class="search-for-name">
+                    <input type="text" placeholder="Search for coffee" id="search-input">
+                </div>
+
+                <div class="filter-roast">
+                    <select id="roast-filter-input" class="roast-selection-js">
+                        <option>light</option>
+                        <option>medium</option>
+                        <option>dark</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+
+
+
+
+    </div>
+
+    <script src="main.js" type="module"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,57 +1,72 @@
-"use strict"
-
-function renderCoffee(coffee) {
-    let html = '<tr class="coffee">';
-    html += `<td>${coffee.id}</td>`;
-    html += `<td>${coffee.name}</td>`;
-    html += `<td>${coffee.roast}</td>`;
-    html += '</tr>';
-
-    return html;
-}
-
-function renderCoffees(coffees) {
-    let html = '';
-    for(let i = coffees.length - 1; i >= 0; i--) {
-        html += renderCoffee(coffees[i]);
-    }
-    return html;
-}
-
-function updateCoffees(e) {
-    e.preventDefault(); // don't submit the form, we just want to update the data
-    const selectedRoast = roastSelection.value;
-    const filteredCoffees = [];
-    coffees.forEach( coffee => {
-        if (coffee.roast === selectedRoast) {
-            filteredCoffees.push(coffee);
-        }
+import { renderCoffee , searchAndFilter} from "./utils/searchFilter.js";
+
+document.querySelector('#Home').addEventListener('click', ()=> {
+    open('#top');
+})
+
+// "use strict"
+
+// function renderCoffee(coffee) {
+//     let html = '<tr class="coffee">';
+//     html += `<td>${coffee.id}</td>`;
+//     html += `<td>${coffee.name}</td>`;
+//     html += `<td>${coffee.roast}</td>`;
+//     html += '</tr>';
+
+//     return html;
+// }
+
+// function renderCoffees(coffees) {
+//     let html = '';
+//     for(let i = coffees.length - 1; i >= 0; i--) {
+//         html += renderCoffee(coffees[i]);
+//     }
+//     return html;
+// }
+
+// function updateCoffees(e) {
+//     e.preventDefault(); // don't submit the form, we just want to update the data
+//     const selectedRoast = roastSelection.value;
+//     const filteredCoffees = [];
+//     coffees.forEach( coffee => {
+//         if (coffee.roast === selectedRoast) {
+//             filteredCoffees.push(coffee);
+//         }
+//     });
+//     tbody.innerHTML = renderCoffees(filteredCoffees);
+// }
+
+// // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
+// const coffees = [
+//     {id: 1, name: 'Light City', roast: 'light'},
+//     {id: 2, name: 'Half City', roast: 'light'},
+//     {id: 3, name: 'Cinnamon', roast: 'light'},
+//     {id: 4, name: 'City', roast: 'medium'},
+//     {id: 5, name: 'American', roast: 'medium'},
+//     {id: 6, name: 'Breakfast', roast: 'medium'},
+//     {id: 7, name: 'High', roast: 'dark'},
+//     {id: 8, name: 'Continental', roast: 'dark'},
+//     {id: 9, name: 'New Orleans', roast: 'dark'},
+//     {id: 10, name: 'European', roast: 'dark'},
+//     {id: 11, name: 'Espresso', roast: 'dark'},
+//     {id: 12, name: 'Viennese', roast: 'dark'},
+//     {id: 13, name: 'Italian', roast: 'dark'},
+//     {id: 14, name: 'French', roast: 'dark'},
+// ];
+
+// const tbody = document.querySelector('#coffees');
+// const submitButton = document.querySelector('#submit');
+// const roastSelection = document.querySelector('#roast-selection');
+
+// tbody.innerHTML = renderCoffees(coffees);
+
+// submitButton.addEventListener('click', updateCoffees);
+
+document.addEventListener('DOMContentLoaded', () => {
+    renderCoffee(true);
+    searchAndFilter();
+
+    document.querySelector('#Home').addEventListener('click', ()=> {
+        open('#top');
     });
-    tbody.innerHTML = renderCoffees(filteredCoffees);
-}
-
-// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
-const coffees = [
-    {id: 1, name: 'Light City', roast: 'light'},
-    {id: 2, name: 'Half City', roast: 'light'},
-    {id: 3, name: 'Cinnamon', roast: 'light'},
-    {id: 4, name: 'City', roast: 'medium'},
-    {id: 5, name: 'American', roast: 'medium'},
-    {id: 6, name: 'Breakfast', roast: 'medium'},
-    {id: 7, name: 'High', roast: 'dark'},
-    {id: 8, name: 'Continental', roast: 'dark'},
-    {id: 9, name: 'New Orleans', roast: 'dark'},
-    {id: 10, name: 'European', roast: 'dark'},
-    {id: 11, name: 'Espresso', roast: 'dark'},
-    {id: 12, name: 'Viennese', roast: 'dark'},
-    {id: 13, name: 'Italian', roast: 'dark'},
-    {id: 14, name: 'French', roast: 'dark'},
-];
-
-const tbody = document.querySelector('#coffees');
-const submitButton = document.querySelector('#submit');
-const roastSelection = document.querySelector('#roast-selection');
-
-tbody.innerHTML = renderCoffees(coffees);
-
-submitButton.addEventListener('click', updateCoffees);
+});
diff --git a/pages/addCoffee.html b/pages/addCoffee.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../styles/addCoffee.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="main-container">
+        <div class="inner-main-container">
+
+        </div>
+    </div>
+</body>
+</html>
diff --git a/scripts/addCoffee.js b/scripts/addCoffee.js
diff --git a/src/Gemini_Generated_Image_c7ehlfc7ehlfc7eh.png b/src/Gemini_Generated_Image_c7ehlfc7ehlfc7eh.png
diff --git a/src/Gemini_Generated_Image_cxgmqlcxgmqlcxgm.png b/src/Gemini_Generated_Image_cxgmqlcxgmqlcxgm.png
diff --git a/src/Untitled_logo_2_free-file__1___1_-removebg-preview.png b/src/Untitled_logo_2_free-file__1___1_-removebg-preview.png
diff --git a/style.css b/style.css
@@ -1,9 +1,45 @@
-table {
+/* table {
     border-collapse: collapse;
     margin: 15px 0;
 }
 
 td, th {
     border: 1px solid black;
     padding: 5px 10px;
+} */
+
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    background: #cbc5bb;
+    width: 100%;
+    min-height: 100vh;
+    padding: 30px;
+    box-sizing: border-box; 
+}
+
+body::-webkit-scrollbar {
+  display: none;            
+}
+
+
+.main-container {
+    border-radius: 10px;
+    height: 92.5vh;
+    width: 100%;
+    background-color: #e6dfd3;
+    box-shadow: 5px 5px 15px #24170c;
+    position: relative;
+
+    padding: 0;
+    padding-top: 90px;
+
+    box-sizing: border-box;
 }
+
+/* #CDAA84 */
+
+/* #6a3e19 */
+
+/* #e6d9c2 */
diff --git a/styles/addCoffee.css b/styles/addCoffee.css
@@ -0,0 +1,16 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.main-container {
+    background-color: aqua;
+    width: 700px;
+    height: 600px;
+
+    border-radius: 10px;
+    background-color: #7d4211;
+    box-shadow: 2px 2px 20px #442206;
+}