Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Jonas chatbot #286

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Jonas chatbot #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b7ad1b
adding console.log to see when things is being logged or not.
Jonash189 Sep 12, 2024
674d18a
Adding DOM selectors. Global variables for food and drink. Adding if …
Jonash189 Sep 15, 2024
513b147
Adding last changes to the copy and adding info in readmefile
Jonash189 Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Project Name

Replace this readme with your own information about your project.

Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
The task was to create an interactive chatbot.

## The problem

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?
Initially, I had trouble getting the JavaScript file to function correctly in the HTML file. Another challenge was managing the flow of user interactions, specifically making sure that the bot stopped responding when the user chose "No" for ordering food. I used JavaScript techniques such as conditionals and functions to address these issues. If I had more time, I would refine the conversation logic and add more complex food ordering options.

I struggled with adding line breaks in the chatbot's responses. I attempted different methods, but only the old <br> tag worked.

## View it live

Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
https://jonas-chatbot.netlify.app/
52 changes: 26 additions & 26 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<title>Chatbot</title>
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<title>Jonas cafe</title>
</head>

<body>
<h1>Welcome to my chatbot!</h1>
<main>
<section class="chat" id="chat"></section>
<div class="input-wrapper" id="input-wrapper">
<form id="name-form">
<label for="name-input">Name</label>
<input id="name-input" type="text" />
<button class="send-btn" type="submit">
Send
</button>
</form>
</div>
</main>
<body>
<h1>Welcome to jonas cafe!</h1>
<main>
<section class="chat" id="chat"></section>
<div class="input-wrapper" id="input-wrapper">
<form id="name-form">
<label for="name-input">Name</label>
<input id="name-input" type="text" />
<button id="send-btn" type="submit">
Send
</button>
</form>
</div>
</main>

<script src="./script.js"></script>
</body>
<script src="./script.js"></script>
</body>

</html>
</html>
211 changes: 158 additions & 53 deletions code/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,158 @@
// DOM selectors (variables that point to selected DOM elements) goes here 👇
const chat = document.getElementById('chat')

// Functions goes here 👇

// A function that will add a chat bubble in the correct place based on who the sender is
const showMessage = (message, sender) => {
// The if statement checks if the sender is the user and if that's the case it inserts
// an HTML section inside the chat with the posted message from the user
if (sender === 'user') {
chat.innerHTML += `
<section class="user-msg">
<div class="bubble user-bubble">
<p>${message}</p>
</div>
<img src="assets/user.png" alt="User" />
</section>
`
// The else if statement checks if the sender is the bot and if that's the case it inserts
// an HTML section inside the chat with the posted message from the bot
} else if (sender === 'bot') {
chat.innerHTML += `
<section class="bot-msg">
<img src="assets/bot.png" alt="Bot" />
<div class="bubble bot-bubble">
<p>${message}</p>
</div>
</section>
`
}

// This little thing makes the chat scroll to the last message when there are too many to
// be shown in the chat box
chat.scrollTop = chat.scrollHeight
}

// A function to start the conversation
const greetUser = () => {
// Here we call the function showMessage, that we declared earlier with the argument:
// "Hello there, what's your name?" for message, and the argument "bot" for sender
showMessage("Hello there, what's your name?", 'bot')
// Just to check it out, change 'bot' to 'user' here 👆 and see what happens
}

// Eventlisteners goes here 👇

// Here we invoke the first function to get the chatbot to ask the first question when
// the website is loaded. Normally we invoke functions like this: greeting()
// To add a little delay to it, we can wrap it in a setTimeout (a built in JavaScript function):
// and pass along two arguments:
// 1.) the function we want to delay, and 2.) the delay in milliseconds
// This means the greeting function will be called one second after the website is loaded.
setTimeout(greetUser, 1000)
document.addEventListener('DOMContentLoaded', () => {
// DOM selectors
const chat = document.getElementById('chat');
const nameInput = document.getElementById('name-input'); // The input field for the name
const sendButton = document.getElementById('send-btn'); // The send button
let userName = "";
let isAskingForDrink = false; // To track whether we're asking for a drink
let isAskingForFood = false; // To track whether we're asking for food
let isChoosingDish = false; // To track whether we're asking for a specific dish

// Declare global variables to store the chosen drink and food
let drink = ""; // Global variable to store drink choice
let food = ""; // Global variable to store food choice

// A function to display a message
const showMessage = (message, sender) => {
if (sender === 'user') {
chat.innerHTML += `
<section class="user-msg">
<div class="bubble user-bubble">
<p>${message}</p>
</div>
<img src="assets/user.png" alt="User" />
</section>
`;
} else if (sender === 'bot') {
chat.innerHTML += `
<section class="bot-msg">
<img src="assets/bot.png" alt="Bot" />
<div class="bubble bot-bubble">
<p>${message}</p>
</div>
</section>
`;
}

// Auto scroll to the latest message
chat.scrollTop = chat.scrollHeight;
};

// Greet the user
const greetUser = () => {
showMessage("Welcome to J.Cafe! What's your name?", 'bot');
};

// Handle the name input
const handleNameInput = (input) => {
// Check if input is not empty
if (input) {
userName = input; // Save the user's name
showMessage(userName, 'user'); // Show the user's message
nameInput.value = ""; // Clear the input field

// Bot responds after 1 second
setTimeout(() => {
showMessage(`Hi ${userName}🥰! What would you like to order?<br><br>1. Black Coffee <br>2. Latte <br>3. Tea <br>4. Soft Drink`, 'bot');
isAskingForDrink = true; // Now we are asking for a drink choice
}, 1000);
}
};

// Handle drink choice
const handleDrinkChoice = (choice) => {
if (choice === "1") {
drink = "Black Coffee";
} else if (choice === "2") {
drink = "Latte";
} else if (choice === "3") {
drink = "Tea";
} else if (choice === "4") {
drink = "Soft Drink";
} else {
// Handle invalid input but keep waiting for a valid choice
showMessage("Sorry, I didn't understand that. Please choose 1, 2, 3, or 4.", 'bot');
return; // Keep asking for a valid drink choice
}

// If the user chose a valid option, show the drink message and ask if they want food
showMessage(`You chose ${drink}.<br><br>Would you like to order some food as well, ${userName}?😋<br><br>1. Yes <br>2. No`, 'bot');

// Now waiting for food choice
isAskingForDrink = false; // Reset drink flag
isAskingForFood = true; // Now we're asking for food
};

// Handle food choice
const handleFoodChoice = (foodchoice) => {
if (foodchoice === "1") {
showMessage("Great! What would you like to eat?<br><br>1. Tacos <br>2. Cesar Salad <br>3. Tuna Sandwich <br>4. Pasta Carbonara", 'bot');

isAskingForFood = false; // Stop asking for Yes/No
isChoosingDish = true; // Now waiting for dish choice
return;
} else if (foodchoice === "2") {
showMessage("No problem, your drink will be deliverd in 15 min, enjoy!😍", 'bot');
isAskingForFood = false; // Stop asking for food
return; // Exit if user doesn't want to eat
} else {
showMessage("Sorry🙈, I didn't understand that. Please choose 1 or 2.", 'bot');
return; // Exit and wait for a valid choice
}
};

// Handle specific dish choice
const handleDishChoice = (dishChoice) => {
if (dishChoice === "1") {
food = "Tacos";
}
// User chooses Cesar Salad
else if (dishChoice === "2") {
food = "Cesar Salad";
}
// User chooses Tuna Sandwich
else if (dishChoice === "3") {
food = "Tuna Sandwich";
}
// User chooses Pasta Carbonara
else if (dishChoice === "4") {
food = "Pasta Carbonara";
}
// Handle invalid choice
else {
showMessage("Sorry🙈, I didn't understand that. Please choose 1, 2, 3, or 4.", 'bot');
return; // Wait for a valid dish choice
}

// Show summary of the user's order
showMessage(`You have chosen:<br> ${food} and ${drink}! What a fab combo😂!<br><br> Your order will be deliverd in 15 min, enjoy🥳`, 'bot');
isChoosingDish = false; // Stop asking for dishes after valid choice
};


const handleUserInput = (event) => {
event.preventDefault();
const input = nameInput.value; // Get input from user
nameInput.value = ""; // Clear input field

if (!isAskingForDrink && !isAskingForFood && !isChoosingDish) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hehe, couldn't this be isAskingForName 👀

// Handle name input
handleNameInput(input);
} else if (isAskingForDrink) {
// Handle drink choice input
handleDrinkChoice(input);
} else if (isAskingForFood) {
// Handle yes/no food choice input
handleFoodChoice(input);
} else if (isChoosingDish) {
// Handle specific dish choice input
handleDishChoice(input);
}
};

// Attach event listener to the send button
sendButton.addEventListener('click', handleUserInput);

// Start the conversation after 1 second
setTimeout(greetUser, 1000); // Start with greeting
});
4 changes: 4 additions & 0 deletions code/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,4 +147,8 @@ button {
button:hover {
opacity: 0.9;
transition: all 0.2s ease;
}

label {
display: none;
}