Merge pull request fac29b#47 from fac29b/dynamically-add-event-listeners

Dynamically add event listeners

Author: samscupoftea

package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "nodemon server.js",
+    "watch": "nodemon server.js",
     "devStart": "nodemon server.js"
   },
   "dependencies": {

public/index.css

@@ -80,6 +80,16 @@ main {
   transform: translate(-50%,-50%);
 }
 
+
+
+/* .fa-paper-plane {
+  background-color: white;
+  border-radius: 5%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+} */
+
 .fa-microphone {
   height: 30px;
   width: 30px;
@@ -143,6 +153,16 @@ button {
   transition: background-color 0.5s ease;
 }
 
+.send-to-user-inbox-btn {
+  text-transform: uppercase;
+  height: 20px;
+  margin-right: 10px;
+  margin-left: 0px;
+  border-radius: 5px;
+  background-color: var(--green);
+  transition: background-color 0.5s ease;
+}
+
 .send-recipe-to-user-inbox,
 .want-another-recipe {
   width: 170px;
@@ -151,12 +171,10 @@ button {
 }
 
 .email-section {
-  width: 200px;
+  width: 170px;
   display: none;
   grid-template-columns: 2fr 1fr;
-  gap: 1rem;
-  margin:auto
- 
+  margin:auto;
 }
 
 

public/index.html

@@ -123,7 +123,8 @@ <h3 id="loading-text">Creating Recipe...</h3>
             name="user_email_address"
             placeholder="sophie@example.com"
           />
-          <i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i>
+          <button class="send-to-user-inbox-btn">send</button>
+          <!-- <i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i> -->
           <!-- <button class="send-email-btn">send</button> -->
         </section>
       </div>

public/index.js

@@ -18,6 +18,9 @@ const userEmail = document.querySelector("#user-email");
 const sendEmailButton = document.querySelector(".send-email-btn");
 const emailSection = document.querySelector(".email-section");
 const paperPlane = document.querySelector(".fa-paper-plane");
+const sendToUserInboxBtn = document.querySelector(".send-to-user-inbox-btn");
+console.log(sendToUserInboxBtn);
+
 const dietaryRequirements = Array.from(
   document.querySelectorAll(".dietary-requirements")
 );
@@ -29,7 +32,8 @@ let textContent;
 let imageUrl;
 let isLactoseIntolerant;
 let dishOriginCountry;
-let currentChar
+let currentChar;
+
 const defaultRecipe = `
 Apologies, but our AI Recipe-Making expert is unavailable. Please try again later. In the meantime, please find one of our favourite recipes below.
 
@@ -170,7 +174,7 @@ darkLightButton.addEventListener("change", () => {
   });
 });
 
-paperPlane.addEventListener("click", () => {
+sendToUserInboxBtn.addEventListener("click", () => {
   let emailOBject = {
     [userEmail.name]: userEmail.value,
   };
@@ -264,9 +268,9 @@ recipeButtons.forEach((button) => {
             textContent = data.text.choices[0].message.content;
             gptResponseElement.innerHTML = `
             <div class="recording">
-              <i class="fa-solid fa-microphone"></i>
-              <i class="fa-solid fa-pause"></i>
-              <i class="fa-solid fa-stop"></i>
+              <i class="fa-solid fa-microphone" name="microphone"></i>
+              <i class="fa-solid fa-pause" name="pause"></i>
+              <i class="fa-solid fa-stop" name="stop"></i>
               <div class="speed-wrapper">
               <label for="speed">Speed</label>
               <input type="number" name="speed" id="speed" min="0.25" max="2" step="0.25" value="1">
@@ -282,11 +286,18 @@ recipeButtons.forEach((button) => {
 
             const utterance = new SpeechSynthesisUtterance();
 
+            const speechBtns = Array.from(
+              document.querySelectorAll(".fa-solid")
+            );
+            const speedBtn = document.querySelector("#speed");
+
+            console.log(speechBtns);
+
             function readRecipe(recipe) {
-              if(speechSynthesis.paused && speechSynthesis.speaking) {
+              if (speechSynthesis.paused && speechSynthesis.speaking) {
                 return speechSynthesis.resume();
               }
-              if(speechSynthesis.speaking) return
+              if (speechSynthesis.speaking) return;
               utterance.text = recipe;
               utterance.rate = speedBtn.value || 1;
               speechSynthesis.speak(utterance);
@@ -300,32 +311,18 @@ recipeButtons.forEach((button) => {
               speechSynthesis.cancel();
             }
 
-            const microphoneBtn = document.querySelector(".fa-microphone");
-            const pauseBtn = document.querySelector(".fa-pause");
-            const stopBtn = document.querySelector(".fa-stop");
-            const speedBtn = document.querySelector("#speed");
-
-          console.log(speedBtn);
-
-          // speedBtn.addEventListener("input", () => {
-          //   stopREeading();
-          //   readRecipe(utterance.text.substring(currentChar));
-
-          //   console.log("speed has been incremented")
-          // })
-
-          // utterance.addEventListener("boundary", (e) => {
-          //   currentChar = e.charIndex;
-          // })
-
-            stopBtn.addEventListener("click",  stopREeading);
-
-            pauseBtn.addEventListener("click", pauseReading);
-
- 
-
-            microphoneBtn.addEventListener("click", () => {
-              readRecipe(`${textContent}`);
+            speechBtns.forEach((speechBtn) => {
+              speechBtn.addEventListener("click", () => {
+                const btnName = speechBtn.getAttribute("name");
+                if (btnName === "microphone") {
+                  console.log(btnName);
+                  readRecipe(`${textContent}`);
+                } else if (btnName === "pause") {
+                  pauseReading();
+                } else if (btnName === "stop") {
+                  stopREeading();
+                }
+              });
             });
           })
           .catch((error) => {

server.js

@@ -50,28 +50,26 @@ app.get("/email", async (req, res) => {
 
 
 app.get("/openai", async (req, res) => {
-  console.log(req.query);
+  
+  const {recipe_country_of_origin, is_lactose_intolerant, is_vegan, what_are_user_other_dietary_requirements } = req.query
   try {
     console.log(
-      { country: req.query.recipe_country_of_origin },
-      { lactose_intolerant: req.query.is_lactose_intolerant },
-      { is_vegan: req.query.is_vegan },
-      {
-        user_otherdietary_requirements:
-          req.query.what_are_user_other_dietary_requirements,
-      }
+      { recipe_country_of_origin },
+      { is_lactose_intolerant },
+      { is_vegan },
+      {what_are_user_other_dietary_requirements}
     );
 
     const prompt = `Provide a recipe for a dish from ${
-      req.query.recipe_country_of_origin
+      recipe_country_of_origin
     }, taking into account the fact that I'm ${
-      req.query.is_lactose_intolerant === "true"
+      is_lactose_intolerant === "true"
         ? "lactose intolerant"
         : "not lactose intolerant"
-    } ${req.query.is_vegan === "true" ? "vegan" : "not vegan"} and ${
-      req.query.what_are_user_other_dietary_requirements === ""
+    } ${is_vegan === "true" ? "vegan" : "not vegan"} and ${
+      what_are_user_other_dietary_requirements === ""
         ? "I have no other dietary requirements"
-        : req.query.what_are_user_other_dietary_requirements
+        : what_are_user_other_dietary_requirements
     } `;
 
     console.log(prompt);