Elina Eriksson Hult - Project Chatbot

[ElinaEH]

Netlify link

https://sprightly-gecko-87af32.netlify.app/

[HIPPIEKICK]

Hi Elina! You're on good way with this project, but there are a few things that I'd like you to work more with. Let's go through some feedback 👇

HTML/CSS

• Good idea changing the CSS a bit to make it more responsive 🥳

JavaScript

• Good job keeping consistency with double quotes and the usage of semicolons ⭐
• The conditional statements for checking user input (e.g., "Pizza" and "pizza") are case-sensitive and repetitive. Converting the input to lowercase using toLowerCase() can simplify these checks:

const showFoodOptions = (name) => {
  const lowerCaseName = name.toLowerCase();
  if (lowerCaseName === "pizza") {
    showMessage("You've ordered a Daily Surprise Pizza! It’ll be ready in 15 minutes...", "bot");
  } else if (lowerCaseName === "pasta") {
    showMessage("You've ordered a Daily Surprise Pasta! It’ll be ready in 15 minutes...", "bot");
  } else if (lowerCaseName === "salad") {
    showMessage("You've ordered a Daily Surprise Salad! It’ll be ready in 15 minutes...", "bot");
  } else {
    showMessage(`Hello ${name}, what type of food would you like today?`, "bot");
  }
};

• Think about naming your variables in a clear and descriptive way. The same goes for class names, IDs and functions. showFoodOptions is a very clear function name, but perhaps the form and inputs should have a more generic name than name-form and name-input since they are also handling the food choices?
• In step 4 in the instructions it says "Add a few more questions and answers to your bot.". I realise this is a bit vague, but I would like you to add at least one more question and answer to your bot. If you want to continue on the path your already on, maybe you can create a askForSize function where the user can pick between adult and child and then base your final confirmation on that?
• Lastly, this function both asks for what the user wants and handles the response from the user. Apart from that, the order confuses me a bit, since the "question" comes last and the "answers" comes before that. I'd consider splitting this up into different functions, maybe one askForFood function and another one called handleFoodChoice.

  const showFoodOptions = (name) => {
    if ((name === "Pizza") || (name === "pizza")) {
      showMessage("You've ordered a Daily Surprise Pizza! It'll be ready for pick up in 15 minutes, pay upon arrival😋<br> Adult size = 150SEK Child size = 100SEK", "bot");
    } else if ((name === "Pasta") || (name === "pasta")) {
      showMessage("You've ordered a Daily Surprise Pasta! It'll be ready for pick up in 15 minutes, pay upon arrival😋<br> Adult size = 130SEK Child size = 80SEK", "bot");
    } else if ((name === "Salad") || (name === "salad")) {
      showMessage("You've ordered a Daily Surprise Salad! It'll be ready for pick up in 15 minutes, pay upon arrival😋<br>Adult size = 120SEK Child size = 70SEK", "bot");
    } else {
      showMessage(`Hello ${name}, what type of food would you like today?<br>Please write your option: Pizza, Pasta or Salad 🍽️`, "bot");
    }
  }

Changes Requested

• Add at least one more question and answer to your bot. Preferably using another type of input than the one you already have, but this is up to you. Example flow based on all my feedback:

  - greetUser() //start convo & ask for input
  - handleNameInput() //handle input
  - askForFood() //ask for input
  - handleFoodChoice() //handle input
  - askForSize() //ask for input
  - (handleFoodSize() //handle input)
  - confirmOrder() //end convo (& handle input)

• Ensure the user is correctly guided throughout the flow:

PS. Please, reach out on Stack Overflow if you have any questions or need any guidance in updating your code. Especially since you said you struggled with this project, I want you to remember that we're here for you if you have any questions or need any clarifications 🫶

[HIPPIEKICK]

Sorry to hear about your struggles 🌺 Remember that we're here to help! Ask a question on Stack Overflow or in the Q&A form ☎️

[HIPPIEKICK]

This can be a const

[JennieDalgren]

⭐

fixed