Broken icons

[d-torrance]

I've figured out the broken icon issue. You've set the BOT_IMG variable to be Leo's face, but it's only used for the responses. You'd also want to set it for the initial question, which is pointing to an image with a broken link:

https://github.com/LauraDy/multipurpose_chatbot/blob/873895089f75e5e3689fdc1bd83c0c802f4fd9d5/templates/index_uni.html#L25

A few suggestions for after Symposium:

• Save the images into your repository (somewhere in the static directory, say in an img subdirectory) so you don't have to worry about broken links.
• Don't specify the image files in the HTML or JavaScript code itself, but use CSS. Drop the style attribute from the <div> tag in appendMessage, and add another class, maybe using the name variable. So something like:

   <div class="msg-img icon-${name.toLowerCase()}"></div>

  And then in static/styles/style.css, add something like:

  .icon-leo {
      background-image: url("img/leo.jpg");
  }
  .icon-you {
      background-image: url("img/you.jpg");
  }
  .icon-chatbot {
      background-image: url("img/chatbot.jpg");
   }

  See https://stackoverflow.com/questions/15170261/why-is-using-the-style-attribute-in-html-bad.

• Call appendMessage to print the initial "Hi!" message before the user has asked any questions. You currently have mess of <div> code in multiple places. It would be much easier to maintain if it's just in the one place.
• Also, there's lots of repeated JavaScript code between the two HTML files. Just put that stuff in a single .js file (maybe under static/js or something) and call it with <script> tags in the HTML files.

[LauraDy]

Thank you! I have fixed the broken image icons, which should be showing correctly now. I won't completely close this issue until I've made the changes to the CSS and HTML files that you suggested.