Basic AI functionality

3 files changed, 57 insertions, 10 deletions

diff --git a/static/images/bars.svg b/static/images/bars.svg
index 64dd5a8..8ce0f06 100644
--- a/static/images/bars.svg
+++ b/static/images/bars.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#1d1f27">
     <rect y="10" width="15" height="120" rx="6">
         <animate attributeName="height"
              begin="0.5s" dur="1s"
diff --git a/static/scripts/index.js b/static/scripts/index.js
index 65c3c12..b1b006d 100644
--- a/static/scripts/index.js
+++ b/static/scripts/index.js
@@ -1,11 +1,50 @@
-const modal = document.querySelector("dialog");
-const showModalBtn = document.querySelector("#show-modal");
-const closeModalBtn = document.querySelector("#close-modal");
+// const modal = document.querySelector("dialog");
+const showModalBtns = document.querySelectorAll(".show-modal");
+const closeModalBtns = document.querySelectorAll(".close-modal");
+const clipboard = document.querySelector("#copy-ingredients");
 
-showModalBtn.addEventListener("click", () => {
-  modal.showModal();
-});
+if(clipboard) {
+  clipboard.addEventListener("click", () => {
+
+    // Copy data to clipboard
+    const ingredientsContent = document.querySelector("#ingredients").textContent.trim();
+    const contentArr = ingredientsContent.split("\n");
+    const ingredientsString = contentArr.map((el) => {
+       if(el.trim() == "") return;
+       else return el.trim();
+    }).join("\n")
+    navigator.clipboard.writeText(ingredientsString);
+
+    // Show success message momentarily
+    clipboard.parentElement.insertAdjacentHTML("afterend", "<span id='copied-message'> ingredients copied!</span>");
+  
+    setTimeout(() => {
+       document.querySelector("#copied-message").remove(); 
+    }, 2000)
+  })
+}
+
+
+// Open and close modals on /account page
+if(showModalBtns){
+  showModalBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+
+      // Open dialog box
+      btn.nextElementSibling.showModal();
+
+    })
+  })
+}
+
+if(closeModalBtns){
+  closeModalBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+
+      // Open dialog box
+      btn.parentNode.close();
+
+    })
+  })
+}
 
-closeModalBtn.addEventListener("click", () => {
-  modal.close();
-});
diff --git a/static/style/style.css b/static/style/style.css
index 748e8dd..9f92d77 100644
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -16,6 +16,14 @@
   color: var(--success);
 }
 
+.cursor {
+  cursor: pointer;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
 body,
 html {
   min-height: 100%;