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

BTS Album order chatbot #292

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

BTS Album order chatbot #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57d7df6
added Cholpon
cholpoun Sep 11, 2024
17fd3cb
changed the name and the title of the bot
cholpoun Sep 11, 2024
b09f72c
user is able to answer and bot is capturing the response
cholpoun Sep 12, 2024
107dcaf
added button for menu options, update the images, styling etc
cholpoun 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
Empty file added code/example.js
View file
Open in desktop
Empty file.
62 changes: 33 additions & 29 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
<!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>

<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>

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

</html>
<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&display=swap"
rel="stylesheet" />
<title>Weverse chatbot</title>
</head>

<body>
<h1>Weverse chatbot: Order your BTS album!</h1>

<main>
<section class="chat" id="chat"></section>

<div class="input-wrapper" id="input-wrapper">

<form id="name-form">
<input id="name-input" type="text" />




<button class="send-btn" type="submit">Send</button>
</form>
</div>
</main>

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

</html>
209 changes: 178 additions & 31 deletions code/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 += `
<section class="bot-msg">
<div class="bubble bot-bubble">
<button id="golden-btn">Golden</button>
<button id="muse-btn">Muse</button>
<button id="layover-btn">Layover</button>
Comment on lines +18 to +20
Copy link
Contributor

Choose a reason for hiding this comment

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

I think all these buttons that the user should click, would fit better in the inputWrapper 👀

</div>
</section>
`;

// 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 = `
<button id="golden-special-btn">Special edition</button>
<button id="golden-vynil-btn">Vynil</button>
<button id="golden-limited-btn">Limited edition</button>
`;
} else if (album === 'Muse') {
subtypes = `
<button id="muse-weverse-btn">Weverse version</button>
<button id="muse-limited-btn">Limited edition</button>
<button id="muse-vynil-btn">Vynil</button>
`;
} else if (album === 'Layover') {
subtypes = `
<button id="layover-vynil-btn">Vynil</button>
<button id="layover-special-btn">Special edition</button>
<button id="layover-limited-btn">Limited edition</button>
`;
}

// Display the subtypes
showMessage(`Which ${album} would you like to order?`, 'bot');
chat.innerHTML += `
<section class="bot-msg">
<div class="bubble bot-bubble">
${subtypes}
</div>
</section>
`;

// 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 += `
<section class="bot-msg">
<div class="bubble bot-bubble">
<button id="random-btn">Random</button>
<button id="set-btn">Set</button>
</div>
</section>
`;

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 [email protected]", '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 += `
<section class="user-msg">
<div class="bubble user-bubble">
<p>${message}</p>
</div>
<img src="assets/user.png" alt="User" />
<img src="https://images.fineartamerica.com/images/artworkimages/medium/3/bts-army-logo-angel-purpletete-transparent.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" />
<img src="https://e7.pngegg.com/pngimages/307/249/png-clipart-bts-love-yourself-her-k-pop-logo-korean-language-bts-logo-purple-angle.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
}
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);
Loading