-
Notifications
You must be signed in to change notification settings - Fork 411
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Project Chatbot #285
base: main
Are you sure you want to change the base?
Project Chatbot #285
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job creating this chatbot! 🥳 Let's go through some feedback.
JavaScript
- You've structured the code by grouping similar blocks together (e.g., DOM selectors, functions). This is a solid approach and helps readability. 🧹
- Great conditionals, I like that you used .includes() to match more options
Clean Code
- Naming conventions are consistent and descriptive (locationForm, locationInput, showMessage). This makes your code easy to read and understand. Well done! 🎯 Some could maybe be even more descriptive, for example - how do I know the difference between the functions handleOccasonInput and occasionInputHandler 👀 And change OutfitSuggestion to camelCase (and maybe verb form as well) -> suggestOutfit
- Be consistent with if you're using single or double quotes
Keep up the good work! 🤖
chat.innerHTML += ` | ||
<section class="bot-msg clothing-options"> | ||
<img src="assets/bot.png" alt="Bot" /> | ||
<div class="bubble bot-bubble"> | ||
<p>Would you prefer casual or formal clothing?</p> | ||
<button class="clothing-choice" data-choice="casual">Casual</button> | ||
<button class="clothing-choice" data-choice="formal">Formal</button> | ||
</div> | ||
</section> | ||
` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You already have the showMessage to handle this! If you want buttons, use the input wrapper instead.
|
||
// Eevent listeners to the buttons to handle the user's choice | ||
const buttons = document.querySelectorAll('.clothing-choice'); | ||
buttons.forEach(button => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
https://rococo-stroopwafel-4da0eb.netlify.app/