Johannas Chatbot

[joheri1]

Netlify link

Add your Netlify link here.
PS. Don't forget to add it in your readme as well.

[HIPPIEKICK]

Good job on creating this project, and handing in so early (?!) 💪 There are some things I'd like you to update, but let's go through all the feedback first.

HTML/CSS

• You kept most of the starter code as it was, but updated IDs to fit your project better. Nice! Also, nice touch with the start button. Just be mindful when using abbreviation, maybe start-button is OK instead of start-btn?
• Have a look at how your chat looks on small mobiles. You have some long words in the chatbot responses that make it look cramped (text is overflowing the message box).
• The footer should be moved within the body tag

JavaScript

• Good use of let for global variables (userName, coffeeChoice, etc.), as their values change during the chat flow.
• Functions are broken down into manageable pieces, each handling a specific part of the chat flow (e.g., handleUserInput, selectCoffee). This modularity is a great practice!
• Consider organizing functions in a more logical sequence, e.g., placing utility functions (showMessage, etc.) before those that rely on them (greetUser, handleUserInput). See more about order in the link I posted as a standalone comment.

Clean Code

• Remember to be consistent with whether you use single or double quotes
• Remember to remove all console.logs before handing in. They are great for developing but are not needed in production mode
• The CSS has some repeated styles for buttons (e.g., .size-btn and .btns). These could be refactored into a shared class to avoid repetition.
• Variable and function names are generally descriptive, making the code easy to understand (showMessage, handleUserInput, etc.). Maybe userAnswer can follow this same practice, and be called handleSelectedCoffeShop or something?
• Be consistent with whether or not you're using semicolons. We don't want to see a mix 👀
• It's OK to have different type of input fields for different questions, but for questions where you expect one option out of a set of specific answers, such as the type of coffee question, it would be better to use buttons, select or a group of radios. Right now it appears buggy if I write something that doesn't exist.
  
• Plus, something's wrong with the order of the answers there ☝️
• Remove the name input after it's used and replace it with the new user interactions, such as the button. Right now the buttons appear within the chat window, but you can't see them unless you scroll down.

Requested Changes

• Clean up the code: remove console.logs, be consistent with whether or not you're using single/double quotes and semicolons
• Clean up the user flow: don't show the user name input before the user should write their name + remove the user name input after the user has written their name. If we're not doing this, we're allowing the user to mess with the flow and the chatbot appears buggy. Keep the user interaction elements outside of the chat to avoid confusion

Overall, you've done an impressive job and I like that you made this project your own and didn't "copy" the Technigo example. However, with these requested changes, it's gonna be even more impressive and user-friendly.

PS. Please, reach out on Stack Overflow if you have any questions or need any guidance in updating your code. I know feedback like this can feel overwhelming, so remember we're here for you if you have any questions or need any clarifications 🫶

[HIPPIEKICK]

That's a good approach! Have a look at the notes from last week's Thursday session to learn more

[HIPPIEKICK]

Thank you for sharing your progress Johanna! In this project it's important to guide the user on what they need to be doing, so I would like you to actually look into this. It shouldn't be possible for the user to write their name:

• before clicking the Start button
• after submitting their name once already

[joheri1]

Hi Matilda, Thank you so much for your feedback! I really appreciate it. I believe I’ve fixed all the errors and issues in my code, and I’ve removed unnecessary semicolons, console.logs, and the like. Would you please take a second look at it? P.S. I didn’t actually submit it early—I submitted it two minutes before midnight on Sunday! During the first project, I ran into major issues with the pull request and creating the Netlify link. So from then on, I decided to start my projects by completing those steps first to avoid the last-minute stress on Sunday evenings, lol! :) Thanks again! Kindest regards / Med vänlig hälsning, *====================* *Johanna Eriksson* Schibsted Enterprise Tech Västra Järnvägsgatan 21 105 17 Stockholm Phone: +46 (0) 8-5142 4213 Schibsted switchboard: +46 (0) 8-725 2700 ***@***.*** ***@***.***>

…

On Wed, 18 Sept 2024 at 10:36, Matilda Brunemalm ***@***.***> wrote: ***@***.**** requested changes on this pull request. Good job on creating this project, and handing in so early (?!) 💪 There are some things I'd like you to update, but let's go through all the feedback first. *HTML/CSS* - You kept most of the starter code as it was, but updated IDs to fit your project better. Nice! Also, nice touch with the start button. Just be mindful when using abbreviation, maybe start-button is OK instead of start-btn? - Have a look at how your chat looks on small mobiles. You have some long words in the chatbot responses that make it look cramped (text is overflowing the message box). - The footer should be moved within the body tag *JavaScript* - Good use of let for global variables (userName, coffeeChoice, etc.), as their values change during the chat flow. - Functions are broken down into manageable pieces, each handling a specific part of the chat flow (e.g., handleUserInput, selectCoffee). This modularity is a great practice! - Consider organizing functions in a more logical sequence, e.g., placing utility functions (showMessage, etc.) before those that rely on them (greetUser, handleUserInput). See more about order in the link I posted as a standalone comment. *Clean Code* - Remember to be consistent with whether you use single or double quotes - Remember to remove all console.logs before handing in. They are great for developing but are not needed in production mode - The CSS has some repeated styles for buttons (e.g., .size-btn and .btns). These could be refactored into a shared class to avoid repetition. - Variable and function names are generally descriptive, making the code easy to understand (showMessage, handleUserInput, etc.). Maybe userAnswer can follow this same practice, and be called handleSelectedCoffeShop or something? - Be consistent with whether or not you're using semicolons. We don't want to see a mix 👀 - It's OK to have different type of input fields for different questions, but for questions where you expect one option out of a set of specific answers, such as the type of coffee question, it would be better to use buttons, select or a group of radios. Right now it appears buggy if I write something that doesn't exist. Skarmavbild.2024-09-18.kl.10.28.03.png (view on web) <https://github.com/user-attachments/assets/c459e4a9-b8e0-4ce3-8372-3a8315e535e9> - Plus, something's wrong with the order of the answers there ☝️ - Remove the name input after it's used and replace it with the new user interactions, such as the button. Right now the buttons appear within the chat window, but you can't see them unless you scroll down. *Requested Changes* - Clean up the code: remove console.logs, be consistent with whether or not you're using single/double quotes and semicolons - Clean up the user flow: don't show the user name input before the user should write their name + remove the user name input after the user has written their name. If we're not doing this, we're allowing the user to mess with the flow and the chatbot appears buggy. Keep the user interaction elements outside of the chat to avoid confusion Overall, you've done an impressive job and I like that you made this project your own and didn't "copy" the Technigo example. However, with these requested changes, it's gonna be even more impressive and user-friendly. PS. Please, reach out on Stack Overflow if you have any questions or need *any* guidance in updating your code. I know feedback like this can feel overwhelming, so remember we're here for you if you have any questions or need any clarifications 🫶 ------------------------------ In README.md <#277 (comment)> : > -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +**2. Attention to details issues** +I was a bit hasty and made several spelling mistakes, forgot to delete parts of the code and variables when I renamed/replaced/stopped using things in the code, which led to unnecessary (and time consuming) issues that could have been avoided. + +## If you had more time, what would be next? + +**1.** Figure out a way to move line 17-27 further down in the script. It looks awkward to me to have "Handle user name input" above the "Start conversation", but the code broke when I moved it so I didn't dare to continue since time was running out. That's a good approach! Have a look at the notes from last week's Thursday session <https://technigo.disco.co/p/web-development-bootcamp/collection/Q29sbGVjdGlvbjo5MzU5?u=f1107535-b13f-454f-a5b1-79f934c867b3> to learn more ------------------------------ In README.md <#277 (comment)> : > +**3.** I used `nameForm.removeEventListener("submit", handleUserInput)` because I wanted the "Start conversation" button to be the only visible option in the chat, forcing the user to click it to begin, but the event listener for the name form is still active. If I had more time, I would address this issue. + +**4.** The buttons seem to have a life of their own, and the input field remains visible in the background (likely related to the previous issue). If I had more time, I would fix this, but at this point, I'm just glad they're working. I struggled with this earlier in the project and almost abandoned the idea altogether. Thank you for sharing your progress Johanna! In this project it's important to guide the user on what they need to be doing, so I would like you to actually look into this. It shouldn't be possible for the user to write their name: - before clicking the Start button - after submitting their name once already — Reply to this email directly, view it on GitHub <#277 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKKOL7LDW3W3Z5ZKIYPMIELZXE3PRAVCNFSM6AAAAABNYNIXRSVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDGMJRHEZDENJTHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[JoyceKuode]

Thank you for leaving a lot of comments throughout your JavaScript file. This helped make it easy to navigate through the steps and follow the flow ☺️ Overall, I think your chatbot works as intended, your code is very well-organized, and I was happy to be able to order a pumpkin spice latte in Gothenburg ☕ 🎃 😋

[JoyceKuode]

Thank you for sharing your approach, I found this very relatable - especially the creativity going wild and attention to detail issues 😅

[JoyceKuode]

I noticed that you use append += with innerHTML frequently throughout your code. (I just used innerHTML = (without the +)) I also noticed that you frequently used .remove() .. I wonder if these are related. If you took out the append with innerHTML would you need to use remove() ? Because I think innerHTML = automatically replaces whatever was there previously, and therefore you could probably simplify a lot of the code.

[JennieDalgren]

⭐ ☕

fixed now ! 🎉