Sev bautista

CSS/style.css

@@ -0,0 +1,69 @@
+
+body {
+    background-image: url("Img/coffee.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    margin: 0;
+    padding: 0;
+    font-family: 'Merriweather Sans', sans-serif;
+
+}
+
+nav {
+    background-color: #FFDAB9;
+}
+
+/*HIDING SPECIFIC ID'S AND THE ID NUMBERS THEMSELVES HERE*/
+#coffees td:first-child {
+    display: none;
+}
+
+#coffee-id {
+    display: none;
+}
+
+
+.card {
+    max-block-size: max-content;
+}
+
+.card-body {
+    font-size: x-large;
+    background-color: blanchedalmond;
+    color: #EADDCA;
+    opacity: .7;
+
+}
+section {
+    color: black;
+}
+#coffee-pour {
+    bottom: 4px;
+    right: 4px;
+    position: fixed;
+    width: 30em;
+}
+
+form {
+    display: inline-table;
+}
+
+.roast-label {
+    font-size: x-large;
+}
+#roast-selection {
+    margin-bottom: 13px;
+}
+
+.mini-card-div {
+    min-height: 120px;
+}
+
+.mini-card-body {
+    width: 300px;
+    margin-left: 25px;
+}
+#coffee-pour {
+    z-index: -1;
+}

JS/main.js

@@ -0,0 +1,118 @@
+"use strict"
+// ADDED A COUNTER TO ALLOW INCREMENTING OF ID
+let counter = 15;
+
+function renderCoffee(coffee) {
+    let html = '<div class="coffee row col-6">';
+    // ADDED COUNTER TO INCREMENT ON NEW COFFEES, OR TO CALL EXISTING ID'S ON CURRENT COFFEES
+    html += `<p id="coffee-id">${coffee.id || counter++}</p>`;
+    html += `<p class="col-7">${coffee.name}</p>`;
+    html += `<p class="col-5">${coffee.roast}</p>`; //p tag
+    html += '</div>'; //div
+
+    return html;
+}
+
+function renderCoffees(coffees) {
+    let html = '';
+    for (let i = coffees.length - 1; i >= 0; i--) {
+        html += renderCoffee(coffees[i]);
+    }
+    return html;
+}
+
+
+// CHECKING IF AN OPTION IS ALL ROASTS, IF SO WILL DISPLAY ALL ROASTS
+// ADDED AN IF STATEMENT FOR CHECKING FOR ALL ROASTS FIRST THEN CONTINUE WITH THE FUNCTION
+// NOT SURE IF THERE'S A NICER WAY TO SHOW THIS
+function updateCoffees(e) {
+    e.preventDefault(); // don't submit the form, we just want to update the data
+    const selectedRoast = roastSelection.value;
+    if (selectedRoast === "All Roasts") {
+        section.innerHTML = renderCoffees(coffees);
+    } else {
+        const filteredCoffees = [];
+        coffees.forEach(coffee => {
+            if (coffee.roast === selectedRoast) {
+                filteredCoffees.push(coffee);
+                section.innerHTML = renderCoffees(filteredCoffees);
+            }
+        });
+        section.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'},
+];
+
+// SEARCH BAR CODE TO MAKE IT CASE INSENSITIVE WHEN LOOKING FOR A PARTICULAR BREW
+
+const searchBar = document.getElementById("coffee-name");
+
+searchBar.addEventListener("input", function () {
+    const searchTerm = this.value.toLowerCase();
+    const resultsList = coffees.filter(coffee => coffee.name.toLowerCase().includes(searchTerm));
+
+    section.innerHTML = renderCoffees(resultsList);
+});
+
+
+// Function to add a new coffee
+// FUNCTION IS CREATING A NEW ELEMENT AND APPENDING TO HTML, NEEDS TO PUSH NEW COFFEE TO EXISTING COFFEES LIST
+function addNewCoffee() {
+    // Get input values
+    const newCoffeeName = document.getElementById('newCoffeeName').value;
+    const newCoffeeRoast = document.getElementById('newCoffeeRoast').value;
+
+    // Validate input values
+    if (newCoffeeName === "" || newCoffeeRoast === "") {
+        alert("Please enter both coffee name and roast type.");
+        return;
+    }
+
+    // Create a new coffee object
+    const newCoffee = {
+        id: counter++,
+        name: newCoffeeName,
+        roast: newCoffeeRoast
+    };
+
+    // Add the new coffee to the coffees array
+    coffees.push(newCoffee);
+
+    // Render the updated list of coffees
+    section.innerHTML = renderCoffees(coffees);
+
+    // Clear input fields
+    document.getElementById('newCoffeeName').value = "";
+    document.getElementById('newCoffeeRoast').value = "";
+
+}
+
+
+const section = document.querySelector('#coffees');
+const submitButton = document.querySelector('#submit');
+const roastSelection = document.querySelector('#roast-selection');
+
+section.innerHTML = renderCoffees(coffees);
+
+submitButton.addEventListener('click', updateCoffees);
+
+//============================================================//
+

index.html

@@ -2,33 +2,125 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title></title>
-    <link rel="stylesheet" href="style.css">
+    <title>Black Bean Coffee</title>
+    <link rel="stylesheet" href="CSS/style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@500&family=Work+Sans:wght@100&display=swap"
+          rel="stylesheet">
 </head>
-<body>
-    <h1>Coffee!</h1>
+<body style="background-image: url('img/coffee.jpg'); background-size: cover; margin: 0; padding: 0;">
 
-    <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>
+<nav style="background-color: #FFDAB9;" class="navbar navbar-expand-lg bg-body-tertiary">
+    <div class="container-fluid">
+        <a class="navbar-brand fw-bolder fst-italic" href="#">Black Bean Coffee!</a>
+        <button class="navbar-toggler btn-success" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                aria-expanded="false"
+                aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Merch</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                       aria-expanded="false">
+                        Locations
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="#">Greater Dallas</a></li>
+                        <li><a class="dropdown-item" href="#">Forth Worth</a></li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li><a class="dropdown-item" href="#">Plano: Home Office</a></li>
+                    </ul>
+                </li>
+            </ul>
+            <form class="d-flex" role="search">
+                <input class="form-control me-2" type="search" placeholder="Subscribe to our Newsletter!"
+                       aria-label="Search">
+                <button class="btn btn-outline-success" type="submit">Subscribe</button>
+            </form>
+        </div>
+    </div>
+</nav>
+<div class="container">
+    <div class="row">
+        <div class="card col-md-7 card-body">
+            <h5 class="card-title"></h5>
+            <h3 class="card-subtitle mb-2 text-body-secondary text-center">Available Selection</h3>
+            <h5 class="card-text"></h5>
+            <section id="coffees" class="row">
+            </section>
+        </div>
+        <div class="col-md-5">
+            <form>
+                <label class="roast-label text-center" for="roast-selection">What Type of Roast Were You
+                    Looking For?</label>
+                <select id="roast-selection" class=" col-6 mx-auto btn-lg fs-4 dropdown-toggle">
+                    <option>Light</option>
+                    <option>Medium</option>
+                    <option>Dark</option>
+                    <!--                    ADDED AN OPTION TO SHOW ALL ROASTS-->
+                    <option>All Roasts</option>
+                </select>
+                <input id="submit" type="submit" class="btn btn-success  col-6 mx-auto"/>
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+            </form>
+            <p>
+                <button class="btn btn-primary btn-success" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#collapseWidthExample" aria-expanded="false"
+                        aria-controls="collapseWidthExample" style="margin-bottom: -10px">
+                    Choice not listed?
+                </button>
+            </p>
+            <div class="mini-card-div">
+                <div class="collapse collapse-horizontal" id="collapseWidthExample">
+                    <div class="card card-body mini-card-body">
+                        Perhaps there's a different option you were looking for, what might that be?
 
-    <script src="main.js"></script>
+                        <form id="addCoffeeForm" class="mt-4">
+                            <div class="form-group">
+                                <label for="newCoffeeName">Coffee Name:</label>
+                                <input type="text" class="form-control" id="newCoffeeName" required>
+                            </div>
+                            <div class="form-group">
+                                <label for="newCoffeeRoast">Select Roast Type:</label>
+                                <select class="form-control" id="newCoffeeRoast" required>
+                                    <option value="Light">Light</option>
+                                    <option value="Medium">Medium</option>
+                                    <option value="Dark">Dark</option>
+                                </select>
+                            </div>
+                            <button type="button" class="btn btn-success" onclick="addNewCoffee()">Add Coffee</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <label for="coffee-name">Which coffee were you looking for?</label>
+    <input name="coffee-name" type="text" id="coffee-name" placeholder="Coffee Name...">
+    <ul id="results"></ul>
+    <!-- GIF IMAGE ADDED IN-->
+    <img id="coffee-pour" src="Img/pouring-coffee.gif" alt="coffee pour"
+         class="border border-5 border-dark rounded col-md-3">
+
+</div>
+
+<script src="JS/main.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
 </body>
 </html>