diff --git a/README.md b/README.md
index 60f55e53..3057f14f 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
-# Project Name
+# Project Chatbot
-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.
+A simple chatbot that interacts with the user and guides them through a fun, personalized conversation.
## 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?
+The problem was approached by breaking down the interaction flow into distinct steps: greeting the user, capturing inputs, and generating responses based on the input. Vanilla JavaScript was used for DOM manipulation and event handling, such as form submission. The UI was dynamically updated. Given more time, additional conversation options and design improvements would be implemented to enhance user experience.
## 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://holiday-bot.netlify.app/
diff --git a/code/assets/bot.png b/code/assets/bot.png
index 2c894b15..24cb9055 100644
Binary files a/code/assets/bot.png and b/code/assets/bot.png differ
diff --git a/code/assets/holiday.jpg b/code/assets/holiday.jpg
new file mode 100644
index 00000000..156a3813
Binary files /dev/null and b/code/assets/holiday.jpg differ
diff --git a/code/assets/user.png b/code/assets/user.png
index 6d95f08f..13cbeb44 100644
Binary files a/code/assets/user.png and b/code/assets/user.png differ
diff --git a/code/index.html b/code/index.html
index 316eb187..5ebffb44 100644
--- a/code/index.html
+++ b/code/index.html
@@ -1,32 +1,32 @@
-
- Chatbot
+ rel="stylesheet"
+ />
+
+
+ Holiday bot
-
-
Welcome to my chatbot!
+
Holiday bot
+
-
-
diff --git a/code/script.js b/code/script.js
index 125d6904..695ac073 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,13 +1,35 @@
-// DOM selectors (variables that point to selected DOM elements) goes here 👇
-const chat = document.getElementById('chat')
+// DOM selectors (variables that point to selected DOM elements) goes here
+const chat = document.getElementById("chat");
+const nameInput = document.getElementById("name-input");
+const form = document.getElementById("name-form");
+const submit = document.getElementById("send");
+const inputWrapper = document.getElementById("input-wrapper");
-// Functions goes here 👇
+// Variables
+let questionNumber = 1;
+let userName = "";
+
+// Destinations mapped by mood
+// Based on the mood selected by the user, the bot will suggest destinations
+const destinationsByMood = {
+ Adventure: ["🏔️ Mount Everest", "🌳 Amazon Rainforest", "🏜️ Sahara Desert"],
+ Relax: ["🛳️ Maldives", "🌴 Bora Bora", "🏖️ Bali"],
+ Cultural: ["🍝 Italy", "🏺 Greece", "🍣 Japan"],
+ Romantic: ["🌹 Paris", "🌅 Venice", "🌺 Santorini"],
+};
+
+// Function for bot to reply with a message after a delay
+// The delay is used to make the conversation feel more natural.
+const botReply = (msg) => {
+ setTimeout(() => showMessage(msg, "bot"), 500);
+};
+const userReply = (msg) => {
+ showMessage(msg, "user");
+};
// 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') {
+ if (sender === "user") {
chat.innerHTML += `
- `
- // 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') {
+ `;
+ } else if (sender === "bot") {
+ console.log("Bot message is being shown:", message); // This will log when the bot sends a message
chat.innerHTML += `
@@ -26,28 +47,221 @@ const showMessage = (message, sender) => {
${message}
- `
+ `;
}
-
- // 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
-}
+ 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)
+const greeting = () => {
+ botReply(
+ `Hi there! I'm your travel assistant, ready to help you pick the perfect destination.`
+ );
+ botReply(`Before we start, can I get your name?`);
+
+ // Show the name input field
+ inputWrapper.innerHTML = `
+
+
+ `;
+
+ document
+ .getElementById("submit-name")
+ .addEventListener("click", () => handleNameInput());
+};
+
+// Handle name input
+const handleNameInput = () => {
+ const nameInput = document.getElementById("name-input");
+ userName = nameInput.value.trim(); // Get the user's name
+
+ if (userName) {
+ userReply(userName);
+ botReply(
+ `Nice to meet you, ${userName}! Let's figure out what kind of trip you're in the mood for.`
+ );
+
+ showMoodOptions(); // Proceed to mood selection
+ } else {
+ botReply(`Oops, I didn't catch that! Please enter your name to continue.`);
+ }
+};
+
+const showMoodOptions = () => {
+ // Wait for the bot's message to be displayed first
+ setTimeout(() => {
+ inputWrapper.innerHTML = `
+
+ `;
+
+ document
+ .getElementById("moodSelect")
+ .addEventListener("change", (event) => nextQuestion(event.target.value));
+ }, 600); // 500ms delay
+};
+
+// Proceed to the next question based on the selected mood
+const nextQuestion = (mood) => {
+ botReply(`${mood}, exciting! Let's see which destinations match your mood.`);
+
+ showDestinationOptions(mood); // Pass the mood to showDestinationOptions
+};
+
+const showDestinationOptions = (mood) => {
+ const destinations = destinationsByMood[mood];
+
+ // Wait for the bot's message to be displayed first
+ setTimeout(() => {
+ inputWrapper.innerHTML = `
+
+ `;
+
+ const select = document.getElementById("select");
+ select.addEventListener("change", () => showMenu(select.value));
+ }, 600); // 500ms delay
+};
+
+// Ask about activities after selecting a destination
+const showMenu = (destination) => {
+ questionNumber++;
+
+ botReply(
+ `Great choice! ${destination} sounds like an amazing place. Would you like to plan some activities while you're there?`
+ );
+
+ // Delay the appearance of the Yes/No buttons
+ setTimeout(() => {
+ inputWrapper.innerHTML = `
+
+
+ `;
+
+ document.getElementById("theEnd").addEventListener("click", () => {
+ botReply("Alright, enjoy your trip!");
+ inputWrapper.innerHTML = ``;
+ showStartOverButton(); // Show the "Start Over" button
+ });
+
+ document.getElementById("confirm").addEventListener("click", () => {
+ showActivities();
+ });
+ }, 600); // Delay of 600ms
+};
+
+const showActivities = () => {
+ questionNumber++;
+
+ botReply(`Awesome! What activities would you like to do while you're there?`);
+
+ // Create a dropdown menu for activities
+ setTimeout(() => {
+ inputWrapper.innerHTML = `
+
+ `;
+
+ document
+ .getElementById("activitySelect")
+ .addEventListener("change", (event) => {
+ const selectedActivity = event.target.value;
+ if (selectedActivity) {
+ showChoice(selectedActivity);
+ }
+ });
+ }, 600); // 500ms delay
+};
+
+// Show the choice made by the user and prompt readiness
+const showChoice = (choice) => {
+ questionNumber++;
+
+ botReply(`${choice} sounds fun! Are you ready to start planning your trip?`);
+
+ // Add suggestions based on the selected activity
+ let suggestions = "";
+ if (choice === "Hiking") {
+ suggestions = `
+ Here are some hiking tips and guides:
+
@@ -26,28 +47,221 @@ const showMessage = (message, sender) => {