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 316eb187..b820afad 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,36 @@ - - - - - - Chatbot - - - -

Welcome to my chatbot!

-
-
-
-
- - - -
-
-
- - - - - + + + + + + Weverse chatbot + + + +

Weverse chatbot: Order your BTS album!

+ +
+
+ +
+ +
+ + + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 125d6904..c8418978 100644 --- a/code/script.js +++ b/code/script.js @@ -1,53 +1,200 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') +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 -// Functions goes here 👇 +// Show album options function +const showAlbumOptions = (name) => { + showMessage(`Hello ${name}, welcome to Weverse! Which BTS album would you like to order?`, 'bot'); -// A function that will add a chat bubble in the correct place based on who the sender is + // 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; +}; + +// 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')); + } + + 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(); + + 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 = ''; + + 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); +}; + +// 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); +}; + +// 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, 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) + showMessage("Hello BTS ARMY, welcome to Weverse! What's your name?", 'bot'); +}; + +// Add event listener to the form submission +form.addEventListener('submit', handleNameInput); + +// 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