From 57d7df6997ebd856da78e2f64f36e7a722713937 Mon Sep 17 00:00:00 2001 From: Cholpon Date: Wed, 11 Sep 2024 16:38:06 +0200 Subject: [PATCH 1/4] added Cholpon --- code/index.html | 52 ++++++++++++++++++++++++------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/code/index.html b/code/index.html index 316eb187..d37cdd92 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,32 @@ - - - - - - Chatbot - + + + + + + Chatbot + - -

Welcome to my chatbot!

-
-
-
-
- - - -
-
-
+ +

Welcome to my chatbot Cholpon!

+
+
+
+
+ + + +
+
+
- - + + - + \ No newline at end of file From 17fd3cb7d7f27d4f95a1ba6e7a9a3b98c43f3985 Mon Sep 17 00:00:00 2001 From: Cholpon Date: Wed, 11 Sep 2024 17:29:47 +0200 Subject: [PATCH 2/4] changed the name and the title of the bot --- code/index.html | 4 ++-- code/script.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index d37cdd92..4f15e832 100644 --- a/code/index.html +++ b/code/index.html @@ -8,11 +8,11 @@ - Chatbot + Navat Bot -

Welcome to my chatbot Cholpon!

+

NAVAT Teahouse

diff --git a/code/script.js b/code/script.js index 125d6904..0e4db068 100644 --- a/code/script.js +++ b/code/script.js @@ -8,6 +8,7 @@ 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 += `
@@ -19,6 +20,7 @@ const showMessage = (message, sender) => { // 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') { + console.log(sender) chat.innerHTML += `
Bot @@ -50,4 +52,4 @@ const greetUser = () => { // 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) +setTimeout(greetUser, 100) From b09f72c14b26256babb04661faf1d9f828e9e837 Mon Sep 17 00:00:00 2001 From: Cholpon Date: Thu, 12 Sep 2024 23:44:16 +0200 Subject: [PATCH 3/4] user is able to answer and bot is capturing the response --- code/index.html | 14 +++++++------- code/script.js | 44 ++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 47 insertions(+), 11 deletions(-) diff --git a/code/index.html b/code/index.html index 4f15e832..e842bb77 100644 --- a/code/index.html +++ b/code/index.html @@ -6,22 +6,22 @@ - Navat Bot + Navat chatbot -

NAVAT Teahouse

+

Navat Cafe!

+
+
+
- - +
diff --git a/code/script.js b/code/script.js index 0e4db068..3d529ab6 100644 --- a/code/script.js +++ b/code/script.js @@ -1,14 +1,41 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') +const form = document.getElementById('name-form') +const nameInput = document.getElementById('name-input') // Functions goes here 👇 + +const handleNameInput = (event) => { + event.preventDefault(); + // Store the value in a variable so we can access it after we + // clear it from the input + const name = nameInput.value; + + showMessage(name, 'user'); + nameInput.value = ''; + + // After 1 second, show the next question by invoking the next function. + // passing the name into it to have access to the user's name if we want + // to use it in the next question from the bot. + setTimeout(() => showFoodOptions(name), 1000); +}; + + +const showFoodOptions = (name) => { + // 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 ${name}, welcome to Navat cafe! What would you like to order today?`, 'bot') + // Just to check it out, change 'bot' to 'user' here 👆 and see what happens +} + + + // 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 += `
@@ -20,7 +47,6 @@ const showMessage = (message, sender) => { // 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') { - console.log(sender) chat.innerHTML += `
Bot @@ -40,16 +66,26 @@ const showMessage = (message, sender) => { 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') + showMessage("Hello there, welcome to Navat cafe! What's your name?", 'bot') // Just to check it out, change 'bot' to 'user' here 👆 and see what happens } // Eventlisteners goes here 👇 +form.addEventListener('submit', handleNameInput); + + // 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, 100) +setTimeout(greetUser, 1000) + + + + + + + From 107dcafb586a6aa3290b2bdc764fb58e3c26a18f Mon Sep 17 00:00:00 2001 From: Cholpon Date: Sun, 15 Sep 2024 22:49:56 +0200 Subject: [PATCH 4/4] added button for menu options, update the images, styling etc --- code/example.js | 0 code/index.html | 8 +- code/script.js | 219 ++++++++++++++++++++++++++++++++++++------------ code/style.css | 91 ++++++++++++++------ 4 files changed, 234 insertions(+), 84 deletions(-) create mode 100644 code/example.js diff --git a/code/example.js b/code/example.js new file mode 100644 index 00000000..e69de29b diff --git a/code/index.html b/code/index.html index e842bb77..b820afad 100644 --- a/code/index.html +++ b/code/index.html @@ -8,11 +8,11 @@ - Navat chatbot + Weverse chatbot -

Navat Cafe!

+

Weverse chatbot: Order your BTS album!

@@ -21,6 +21,10 @@

Navat Cafe!

+ + + +
diff --git a/code/script.js b/code/script.js index 3d529ab6..c8418978 100644 --- a/code/script.js +++ b/code/script.js @@ -1,91 +1,200 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') -const form = document.getElementById('name-form') -const nameInput = document.getElementById('name-input') +const chat = document.getElementById('chat'); +const form = document.getElementById('name-form'); +const nameInput = document.getElementById('name-input'); +const inputWrapper = document.querySelector('.input-wrapper'); // Wrapper for the input field + +// Show album options function +const showAlbumOptions = (name) => { + showMessage(`Hello ${name}, welcome to Weverse! Which BTS album would you like to order?`, 'bot'); + + // Hide the input form and show the album options + form.style.display = 'none'; // Hide the input field and send button + + // Add album option buttons + chat.innerHTML += ` +
+
+ + + +
+
+ `; + + // Add event listeners to album option buttons + document.getElementById('golden-btn').addEventListener('click', () => showSubtypes('Golden')); + document.getElementById('muse-btn').addEventListener('click', () => showSubtypes('Muse')); + document.getElementById('layover-btn').addEventListener('click', () => showSubtypes('Layover')); + + chat.scrollTop = chat.scrollHeight; +}; -// Functions goes here 👇 +// Show subtypes based on album selection +const showSubtypes = (album) => { + let subtypes = ''; + + // Subtypes for each album category + if (album === 'Golden') { + subtypes = ` + + + + `; + } else if (album === 'Muse') { + subtypes = ` + + + + `; + } else if (album === 'Layover') { + subtypes = ` + + + + `; + } + // Display the subtypes + showMessage(`Which ${album} would you like to order?`, 'bot'); + chat.innerHTML += ` +
+
+ ${subtypes} +
+
+ `; + + // Add event listeners to the subtype buttons + if (album === 'Golden') { + document.getElementById('golden-special-btn').addEventListener('click', () => askRandomOrSet('Special edition')); + document.getElementById('golden-vynil-btn').addEventListener('click', () => askRandomOrSet('Vynil')); + document.getElementById('golden-limited-btn').addEventListener('click', () => askRandomOrSet('Limited edition')); + } else if (album === 'Muse') { + document.getElementById('muse-weverse-btn').addEventListener('click', () => askRandomOrSet('Weverse edition')); + document.getElementById('muse-limited-btn').addEventListener('click', () => askRandomOrSet('Limited edition')); + document.getElementById('muse-vynil-btn').addEventListener('click', () => askRandomOrSet('Vynil')); + } else if (album === 'Layover') { + document.getElementById('layover-vynil-btn').addEventListener('click', () => askRandomOrSet('Vynil')); + document.getElementById('layover-special-btn').addEventListener('click', () => askRandomOrSet('Special edition')); + document.getElementById('layover-limited-btn').addEventListener('click', () => askRandomOrSet('Limited edition')); + } -const handleNameInput = (event) => { + chat.scrollTop = chat.scrollHeight; +}; + +// Ask if the order is for a Random or Set +const askRandomOrSet = (album) => { + showMessage(`Do you want the random or set collection of the ${album} album?`, 'bot'); + + chat.innerHTML += ` +
+
+ + +
+
+ `; + + document.getElementById('random-btn').addEventListener('click', () => finalizeOrder(album, 'Random', 150)); + document.getElementById('set-btn').addEventListener('click', () => finalizeOrder(album, 'Set', 200)); + + chat.scrollTop = chat.scrollHeight; +}; + +// Finalize the order with the selected album and if it's for a Random or Set, and show the price +const finalizeOrder = (album, person, price) => { + showMessage(`I'd like to order ${person} collection of the ${album}. Thank you!`, 'user'); + + + setTimeout(() => { + showMessage(`You chose ${album} and ${person} option. The price is ${price} SEK.`, 'bot'); + askForDeliveryAddress(); // Ask for the delivery address after confirming the price + }, 1000); +}; + +// Ask for the delivery address +const askForDeliveryAddress = () => { + showMessage("Please enter your delivery address.", 'bot'); + + // Show the input form to collect the address + form.style.display = 'flex'; + nameInput.placeholder = 'Enter delivery address'; // Change the placeholder for address input + nameInput.value = ''; // Clear the input field + + // Change the form submission handler to collect the address + form.removeEventListener('submit', handleNameInput); // Remove the name input handler + form.addEventListener('submit', handleAddressInput); // Add address input handler +}; + +// Handle delivery address input +const handleAddressInput = (event) => { event.preventDefault(); - // Store the value in a variable so we can access it after we - // clear it from the input - const name = nameInput.value; - showMessage(name, 'user'); + const address = nameInput.value; // Capture the address + showMessage(`My delivery address is: ${address}`, 'user'); + + // Clear the input field after the user submits the address nameInput.value = ''; - // After 1 second, show the next question by invoking the next function. - // passing the name into it to have access to the user's name if we want - // to use it in the next question from the bot. - setTimeout(() => showFoodOptions(name), 1000); + setTimeout(() => { + showMessage(`Thank you! Your order will be delivered to ${address}.`, 'bot'); + displayContactInfo(); // Show contact info and hide the input bar after confirming the address + }, 1000); }; +// Display contact information and hide the input bar +const displayContactInfo = () => { + setTimeout(() => { + showMessage("If you have any questions, reach out to questions@weverse.com", 'bot'); + form.style.display = 'none'; // Hide the input field and send button + }, 1000); +}; -const showFoodOptions = (name) => { - // 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 ${name}, welcome to Navat cafe! What would you like to order today?`, 'bot') - // Just to check it out, change 'bot' to 'user' here 👆 and see what happens -} +// Handle name input submission +const handleNameInput = (event) => { + event.preventDefault(); + const name = nameInput.value; + showMessage(name, 'user'); + nameInput.value = ''; + // Show album options after 1 second delay + setTimeout(() => showAlbumOptions(name), 1000); +}; -// A function that will add a chat bubble in the correct place based on who the sender is +// Show message function 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 += `

${message}

- User + 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') { chat.innerHTML += `
- Bot + Bot

${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 +// Greet the user at the start 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, welcome to Navat cafe! What's your name?", 'bot') - // Just to check it out, change 'bot' to 'user' here 👆 and see what happens -} - -// Eventlisteners goes here 👇 + showMessage("Hello BTS ARMY, welcome to Weverse! What's your name?", 'bot'); +}; +// Add event listener to the form submission form.addEventListener('submit', handleNameInput); - -// 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) - - - - - - - +// Initial greeting on page load +setTimeout(greetUser, 1000); diff --git a/code/style.css b/code/style.css index a275402f..d13ece22 100644 --- a/code/style.css +++ b/code/style.css @@ -6,23 +6,25 @@ body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; - background: #0026ff; + background: #6A0DAD; + /* BTS Purple */ } -h1 { +h1, +h2 { font-weight: bold; - font-size: 28px; - line-height: 34px; color: #fff; text-align: center; } +h1 { + font-size: 28px; + line-height: 34px; +} + h2 { - font-weight: bold; font-size: 24px; line-height: 34px; - color: #fff; - text-align: center; margin-bottom: 36px; } @@ -37,8 +39,10 @@ input { box-sizing: border-box; border: none; border-radius: 4px 0 0 4px; - background: #e5e9ff; - color: #0026ff; + background: #D3CCE3; + /* Light lavender */ + color: #6A0DAD; + /* BTS Purple */ padding: 16px; font-size: 16px; font-family: 'Montserrat'; @@ -46,15 +50,17 @@ input { line-height: 26px; flex: 1; width: 100%; + align-items: center; } main { margin: 0 auto; width: 100%; - max-width: 700px; - height: 600px; + max-width: 900px; + height: 800px; border-radius: 30px; - background: #fff; + background: #FFFFFF; + /* White background */ padding: 20px 24px; padding-top: 0; box-sizing: border-box; @@ -74,30 +80,35 @@ main { .bot-msg { display: flex; margin: 16px 8px 0 0; - flex-shrink: 0; } .user-msg { display: flex; justify-content: flex-end; margin: 16px 0 0 8px; - flex-shrink: 0; } .bot-msg img, .user-msg img { width: 60px; height: 60px; + border-radius: 50%; + /* Circle profile images */ } .bubble { - background: #e5e9ff; + background: #D3CCE3; + /* Light lavender for bubbles */ font-weight: 600; font-size: 16px; line-height: 26px; padding: 16px 24px; - color: #0026ff; + color: #6A0DAD; + /* BTS Purple text */ max-width: 40%; + display: flex; + justify-content: center; + flex-wrap: wrap; } .bot-bubble { @@ -108,6 +119,10 @@ main { .user-bubble { border-radius: 26px 0 26px 26px; margin-right: 8px; + background-color: #6A0DAD; + /* Purple for user bubbles */ + color: #fff; + /* White text for user bubbles */ } .input-wrapper { @@ -125,26 +140,48 @@ label { font-size: 16px; font-family: 'Montserrat'; font-weight: 500; - color: #0026ff; + color: #6A0DAD; + /* Purple for text */ margin-right: 20px; } button { - background-color: #0026ff; + background-color: #6A0DAD; + /* Purple buttons */ color: white; border: none; - border-radius: 4px; - padding: 16px 20px; - margin-right: 4px; + border-radius: 26px; + padding: 12px 24px; + margin: 10px 5px; font-size: 16px; - line-height: 26px; - font-family: 'Montserrat'; - font-weight: 500; + font-family: 'Montserrat', sans-serif; + font-weight: 600; cursor: pointer; - transition: all 0.3s ease; + transition: background-color 0.3s ease, transform 0.3s ease; + width: 100px; } button:hover { - opacity: 0.9; - transition: all 0.2s ease; + background-color: #4A0077; + /* Darker purple on hover */ + transform: translateY(-2px); + /* Lift effect */ +} + +.bubble button:hover { + background-color: #4A0077; + /* Darker purple for hover */ + transform: translateY(-2px); + /* Lift effect */ +} + +form.hidden { + display: none; +} + +img { + border-radius: 50%; + margin-right: 10px; + border: 1px solid #6A0DAD; + /* Purple border around images */ } \ No newline at end of file