diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..01625912 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 60f55e53..fb0ea035 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,40 @@ -# Project Name +# Seafood Restaurant Chatbot Ordering System +This project is an interactive chatbot that allows users to order food from a fictional seafood restaurant. The chatbot guides users through the ordering process, helping them choose from a menu of seafood dishes, confirming their order, and providing a user-friendly chat interface. -Replace this readme with your own information about your project. +# Features: +Greeting & Interaction: The bot greets the user and asks if they are ready to start the order. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +User Name Collection: The chatbot asks for the user's name and stores it for personalized communication throughout the session. -## The problem +Food Type Selection: The bot offers the user the choice of different types of seafood dishes, such as Fish, Shellfish, and Mollusks. -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? +Dish Selection: Based on the chosen food type, the user can select specific dishes like Grilled Salmon, Fish and Chips, Shrimp, Lobster, Paella, and Calamari. -## View it live +Order Confirmation: Once a dish is selected, the bot confirms the order and asks the user if they are sure about their choice, simulating an order confirmation process. + +Chat UI: An intuitive and simple interface for the user to interact with the bot. It displays the chat in a "bubble" format with both user and bot messages, and the user can respond by selecting buttons. + +# Technologies Used +HTML5 for the basic page structure. + +CSS for styling the chat and page layout. + +JavaScript for managing user input, dynamic content updates, and chatbot logic. + +Control Chatbot Flow: Based on the userโ€™s input, the chatbot dynamically updates the conversation by adding new messages to the chat. JavaScript is responsible for triggering events, such as when a user clicks a button or enters their name. + +Event Handling: JavaScript listens for user interactions, like button clicks, and updates the chat UI accordingly. For example, when a user selects a type of seafood or a dish, the chatbot responds by showing new options. -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. +DOM Manipulation: JavaScript dynamically creates and appends new HTML elements (such as buttons, messages, and forms) into the chat area by manipulating the DOM (Document Object Model). This ensures that the page content updates without needing to reload the entire page. + +Order Flow Management: The botโ€™s logic handles the sequence of steps, guiding the user from the greeting phase to dish selection, order confirmation, and final messages. JavaScript ensures that the chatbot remembers the userโ€™s previous choices and asks follow-up questions accordingly. + +# Improvements +The chatbot could be enhanced to handle more complex interactions, such as adding multiple items to the cart, tracking orders, and providing delivery options. + +A backend API could be integrated to store and retrieve orders, making the system dynamic. + +Improved error handling and input validation to ensure a smooth user experience. + +## View it live +https://seafood-restaurant-order-bot.netlify.app/ \ No newline at end of file diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..21dc07c9 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/code/assets/.DS_Store differ diff --git a/code/assets/background-bubbles.jpg b/code/assets/background-bubbles.jpg new file mode 100644 index 00000000..2d499d06 Binary files /dev/null and b/code/assets/background-bubbles.jpg differ diff --git a/code/assets/bot-chat.png b/code/assets/bot-chat.png new file mode 100644 index 00000000..09318dbd Binary files /dev/null and b/code/assets/bot-chat.png differ diff --git a/code/assets/crab.png b/code/assets/crab.png new file mode 100644 index 00000000..dd64543c Binary files /dev/null and b/code/assets/crab.png differ diff --git a/code/assets/hero-bubbles.jpg b/code/assets/hero-bubbles.jpg new file mode 100644 index 00000000..c2194134 Binary files /dev/null and b/code/assets/hero-bubbles.jpg differ diff --git a/code/assets/user-chat.png b/code/assets/user-chat.png new file mode 100644 index 00000000..1383dfc8 Binary files /dev/null and b/code/assets/user-chat.png differ diff --git a/code/index.html b/code/index.html index 316eb187..09a18330 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,26 @@ - - - - - - Chatbot - + + + + + + Seafood Restaurant + - -

Welcome to my chatbot!

-
-
-
-
- - - -
-
-
+ + +
+
+
+
+
+ + - - - - + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 125d6904..b1e05d64 100644 --- a/code/script.js +++ b/code/script.js @@ -1,53 +1,237 @@ -// DOM selectors (variables that point to selected DOM elements) goes here ๐Ÿ‘‡ -const chat = document.getElementById('chat') +const chat = document.getElementById("chat") +const main = document.getElementById("main") -// 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') { + if (sender === "user") { chat.innerHTML += ` -
-
+
+

${message}

-
- User -
- ` - // 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') { +
+ user image +
+ ` + } else if (sender === "bot") { chat.innerHTML += ` -
- Bot -
-

${message}

-
-
- ` +
+ user image +
+

${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 } -// 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 +// 5. Confirm order with yes/no +// Confirm order shrimp +const confirmOrder = (username) => { + form.innerHTML += ` +
+ + +
+ ` + document + .getElementById("yes-button") + .addEventListener("click", () => { + showMessage("yes", "user") + showMessage(`Thank you, for your order, ${username}!`, "bot") + form.innerHTML = "" + }) + document + .getElementById("no-button") + .addEventListener("click", () => { + showMessage("no", "user") + showMessage("Maybe another time", "bot") + form.innerHTML = "" + }) +} + +// 4. Select dish and display message +// Select fish dish +const chooseFish = (username) => { + form.innerHTML += ` +
+ + +
+ ` + document + .getElementById("salmon-button") + .addEventListener("click", () => { + showMessage("salmon", "user") + showMessage(`The Salmon for you. That will be $15. Are you sure you want to order this?`, "bot") + form.innerHTML = "" + confirmOrder(username) + }) + document + .getElementById("fish-chips-button") + .addEventListener("click", () => { + showMessage("fish and chips", "user") + showMessage(`${username}, you like to order Fish and Chips. Great! That will be $15. Are you sure you want to order this?`, "bot") + form.innerHTML = "" + confirmOrder(username) + }) +} + + +// select shellfish dish + +const chooseShellfish = (username) => { + + form.innerHTML += ` +
+ + +
+ ` + + document + .getElementById("shrimp-button") + .addEventListener("click", () => { + showMessage("shrimp", "user") + showMessage(`${username}You like to order Shrimp. Great choice! That will be $15. Are you sure you want to order this?`, "bot") + form.innerHTML = "" + confirmOrder(username) + } + ) + + document + .getElementById("lobster-button") + .addEventListener("click", () => { + showMessage("lobster", "user") + showMessage(`Great choice, ${username}! That will be $15. Are you sure you want to order this?`, "bot") + form.innerHTML = "" + confirmOrder(username) + }) +} + +const chooseMollusks = (username) => { + + form.innerHTML += ` +
+ + +
+ ` + + document + .getElementById("paella-button") + .addEventListener("click", () => { + showMessage("paella", "user") + showMessage(`Great choice, ${username}! That will be $15. Are you sure you want to order this?`, "bot") + form.innerHTML = "" + confirmOrder(username) + } + ) + + document + .getElementById("calamari-button") + .addEventListener("click", () => { + showMessage("calamari", "user") + showMessage(`Great choice, ${username}! That will be $15. Are you sure you want to order this?`, "bot") + form.innerHTML = "" + confirmOrder(username) + }) } -// 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) +//3. Select Foodtype + +const selectFoodtype = (username) => { + showMessage(`Nice to meet you, ${username}! What type of food would you like to eat?`, "bot") + + // Buttons to select the food type + form.innerHTML += ` +
+ + + +
+` + // Buttons to select the dishes & message + + document + .getElementById("fish-button") + .addEventListener("click", () => { + showMessage("fish", "user") + showMessage("Great choice! Select something from the menu!", "bot") + form.innerHTML = "" + chooseFish(username) + }) + + document + .getElementById("shellfish-button") + .addEventListener("click", () => { + showMessage("shellfish", "user") + showMessage("Great choice! Select something from the menu!", "bot") + form.innerHTML = "" + chooseShellfish(username) + }) + + document + .getElementById("mollusks-button") + .addEventListener("click", () => { + showMessage("mollusks", "user") + showMessage(`${username}, you like to order mullusks. Please choose a dish!`, "bot") + form.innerHTML = "" + chooseMollusks(username) + }) +} + +//2. Asking for the users name, storing the name and display in chat + +const askName = () => { + showMessage("Wonderful! What is your name?", "bot") + + form.innerHTML += ` + + + ` + + const inputButton = document.getElementById("send-button") + const input = document.getElementById('name-input') + + + inputButton.addEventListener("click", (event) => { + event.preventDefault() + + const username = input.value + + if (username) { + showMessage(username, "user") + input.style.display = "none" + form.innerHTML = "" + selectFoodtype(username) + } + else { + showMessage("Please enter your name.", "bot") + } + } + ) +} + + +// 1. Greeting and displaying the button + +const greetUser = () => { + showMessage("Hello! Are you ready to start the order?", "bot") + + form.innerHTML += ` + + + ` + + const sendButton = document.getElementById("button") + //Event: when user clicks the button, 'ok' will be displayed in the chat and the button will be taken off the screene + + sendButton.addEventListener("click", () => { + showMessage("Yes!", "user") + form.innerHTML = "" + askName() + }) + +} +greetUser() \ No newline at end of file diff --git a/code/style.css b/code/style.css index a275402f..f0df2a54 100644 --- a/code/style.css +++ b/code/style.css @@ -6,145 +6,208 @@ body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; - background: #0026ff; + background-color: rgb(4, 38, 52); + min-height: 100vh; + max-width: 100%; } -h1 { - font-weight: bold; - font-size: 28px; - line-height: 34px; - color: #fff; - text-align: center; +/* header for mobile phones */ +header { + display: flex; + background: url(./assets/hero-bubbles.jpg); + background-size: cover; + background-position: center; + max-height: 20vh; + width: 100%; + justify-content: center; + align-items: center; + padding: 3%; } -h2 { +h1 { font-weight: bold; - font-size: 24px; - line-height: 34px; - color: #fff; + font-size: 30px; + color: yellow; text-align: center; - margin-bottom: 36px; -} - -p { - font-size: 18px; - font-weight: 600; - line-height: 28px; - margin: 0; -} - -input { - box-sizing: border-box; - border: none; - border-radius: 4px 0 0 4px; - background: #e5e9ff; - color: #0026ff; - padding: 16px; - font-size: 16px; - font-family: 'Montserrat'; - font-weight: 600; - line-height: 26px; - flex: 1; - width: 100%; + padding-top: 10%; } +/* main */ main { - margin: 0 auto; + background: rgb(5, 49, 68); width: 100%; + height: 80vh; max-width: 700px; - height: 600px; + max-height: 600px; + margin: 0 auto; border-radius: 30px; - background: #fff; - padding: 20px 24px; - padding-top: 0; + padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; + justify-content: space-between; +} + +.form { + width: 100%; + display: flex; + justify-content: center; } +/* everything belonging to the chat*/ .chat { flex: 1; display: flex; justify-content: flex-start; - overflow: scroll; + overflow-y: scroll; flex-direction: column; padding-bottom: 16px; } -.bot-msg { - display: flex; - margin: 16px 8px 0 0; - flex-shrink: 0; +.bubble { + font-weight: 600; + font-size: 16px; + line-height: 26px; + padding: 4px 4px; + color: #0c1546; + max-width: 50%; } -.user-msg { +.user-message { display: flex; justify-content: flex-end; margin: 16px 0 0 8px; flex-shrink: 0; } -.bot-msg img, -.user-msg img { - width: 60px; - height: 60px; +.user-message-img, +.bot-message-img { + width: 50px; + height: 50px; + margin: 3px; } -.bubble { - background: #e5e9ff; - font-weight: 600; - font-size: 16px; - line-height: 26px; - padding: 16px 24px; - color: #0026ff; - max-width: 40%; +.user-bubble { + border-radius: 26px 0 26px 26px; + margin-right: 8px; + background: #79aab5; +} + +.bot-message { + display: flex; + margin: 16px 8px 0 0; + flex-shrink: 0; + } .bot-bubble { border-radius: 0px 26px 26px 26px; margin-left: 8px; + background: yellow; } -.user-bubble { - border-radius: 26px 0 26px 26px; - margin-right: 8px; -} - -.input-wrapper { +/* In the following are the different forms listed:*/ +.form { display: flex; justify-content: center; + align-items: center; + width: 100%; } -.input-wrapper form { - width: 100%; - display: flex; - align-items: center; +/*The first button ("Yes!") to continue the conversation */ +.confirm-button { + background-color: rgb(4, 38, 52); + color: white; + font-weight: bold; + font-size: 30px; + width: 80%; + min-height: 50px; + border-radius: 10%; + cursor: pointer; + border: solid, white; + overflow: hidden; } -label { - font-size: 16px; - font-family: 'Montserrat'; - font-weight: 500; - color: #0026ff; - margin-right: 20px; +.confirm-button:hover { + background-color: #79aab5; } -button { - background-color: #0026ff; +/* Button to send in name */ +.input-button { + background-color: rgb(4, 38, 52); color: white; + font-weight: bold; + font-size: 20px; + width: 60px; + height: 40px; + border-radius: 10px; + cursor: pointer; + border: solid, white; + overflow: hidden; + margin: 10px; +} + +/* The input field to write the name */ +.input { + box-sizing: border-box; border: none; border-radius: 4px; - padding: 16px 20px; - margin-right: 4px; + background: white; + color: rgb(4, 38, 52); + padding: 18px; + font-family: 'Moneserrat', sans-serif; + font-weight: 600; + font-size: 18 px; + line-height: 10px; + margin: none; + flex: 1; +} + +/* buttons to choose the food category */ +.foodtype-container, +.dish-container, +.confirm-container { + display: flex; + flex-direction: column; + justify-content: center; +} + +.foodtype-button, +.dish-button, +.confirm-button { + font-family: 'Monesserat', sans-serif; + font-weight: 400; font-size: 16px; - line-height: 26px; - font-family: 'Montserrat'; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; + border-radius: 10px; + border: none; + padding: 5px; + margin: 3px; + width: 200px; + border: solid, white } -button:hover { - opacity: 0.9; - transition: all 0.2s ease; +.foodtype-button:hover, +.dish-button:hover, +.confirm-button:hover { + font-size: 20px; + background-color: #79aab5; +} + +/* Tablet and iPads */ +@media (min-width: 667px) { + h1 { + font-size: 50px; + ; + } +} + +/* Desktop */ +@media (min-width: 1024px) { + h1 { + padding-top: 5%; + } + + body { + background-image: url(./assets/background-bubbles.jpg) + } } \ No newline at end of file