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..57c5f050 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,9 @@ # Project Name -Replace this readme with your own information about your project. +The French Chatbot -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## 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 project was to build a functional chatbot interface using JavaScript, HTML, and CSS. Creating a chatbot that can interact with users, ask questions, display messages, and respond with precision. ## 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://thefrenchbot.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..c3288384 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/assets/bot.png b/code/assets/bot.png index 2c894b15..1a1b4f50 100644 Binary files a/code/assets/bot.png and b/code/assets/bot.png differ diff --git a/code/assets/message-sent.mp3 b/code/assets/message-sent.mp3 new file mode 100644 index 00000000..aaef88b2 Binary files /dev/null and b/code/assets/message-sent.mp3 differ diff --git a/code/assets/new-notification.mp3 b/code/assets/new-notification.mp3 new file mode 100644 index 00000000..71d80c70 Binary files /dev/null and b/code/assets/new-notification.mp3 differ diff --git a/code/assets/user.png b/code/assets/user.png index 6d95f08f..bc7d3958 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..92fed5f6 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,33 @@ - - - - - - Chatbot - + + + + + + + - -

Welcome to my chatbot!

-
-
-
-
- - - -
-
-
+ The French Chatbot + - - + +

The French Bot

+
+
+
+
+ + +
+ +
+
- + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 125d6904..e20b617a 100644 --- a/code/script.js +++ b/code/script.js @@ -1,53 +1,133 @@ -// DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') +// DOM selectors +const chat = document.getElementById('chat'); +const nameInput = document.getElementById('name-input'); +const form = document.getElementById('name-form'); +const buttonContainer = document.getElementById('button-container'); -// Functions goes here 👇 +// Conversation state +let userName = ''; -// 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 += ` -
-
-

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

${message}

-
-
- ` +// Sound effects +const sendSound = new Audio('assets/message-sent.mp3'); +const receiveSound = new Audio('assets/new-notification.mp3'); + +// Functions + +// Play send sound +const playSendSound = () => { + sendSound.play(); +}; + +// Play receive sound +const playReceiveSound = () => { + receiveSound.play(); +}; + +// Final message +const goodbyeMessage = () => { + showMessage(`Félicitations, ${userName}! You've completed the French learning session. Au revoir!`, 'bot'); +}; + +// Handle user's answer to French questions +const handleFrenchAnswer = (answer, correctAnswer, nextQuestion) => { + showMessage(answer, 'user'); + playSendSound(); + buttonContainer.style.display = 'none'; // Hide buttons + setTimeout(() => { + if (answer === correctAnswer) { + showMessage(`Excellent! "${answer}" is correct. 🥐`, 'bot'); + } else { + showMessage(`Not quite.. The correct answer is "${correctAnswer}".`, 'bot'); + } + playReceiveSound(); + setTimeout(() => nextQuestion(), 1000); + }, 1000); +}; + +// Create buttons for French questions +const createFrenchButtons = (options, correctAnswer, nextQuestion) => { + form.style.display = 'none'; // Hide form + buttonContainer.innerHTML = options.map(option => + `` + ).join(''); + buttonContainer.style.display = 'flex'; // Show buttons + + // Add event listeners to buttons + buttonContainer.querySelectorAll('button').forEach(button => { + button.addEventListener('click', () => handleFrenchAnswer(button.textContent, correctAnswer, nextQuestion)); + }); +}; + +// Ask how to say "Yes" in French +const askYesInFrench = () => { + showMessage("How do you say 'Yes' in French?", 'bot'); + playReceiveSound(); + createFrenchButtons(["Non", "Oui", "Peut-être"], "Oui", goodbyeMessage); +}; + +// Ask how to say "Thank you" in French +const askThankYouInFrench = () => { + showMessage("How do you say 'Thank you' in French?", 'bot'); + playReceiveSound(); + createFrenchButtons(["S'il vous plaît", "Merci", "Oui"], "Merci", askYesInFrench); +}; + +// Ask how to say "Hello" in French +const askHelloInFrench = () => { + showMessage("How do you say 'Hello' in French?", 'bot'); + playReceiveSound(); + createFrenchButtons(["Bonjour", "Merci", "Au revoir"], "Bonjour", askThankYouInFrench); +}; + +// Start French lesson +const startFrenchLesson = (name) => { + userName = name; + showMessage(`Enchanté, ${name}! 👩🏻‍🎨🍷 Let's learn some French.`, 'bot'); + playReceiveSound(); + setTimeout(askHelloInFrench, 1000); +}; + +// Handle the name input +const handleNameInput = (event) => { + event.preventDefault(); + const name = nameInput.value.trim(); + if (name === '') { + showMessage('', 'user'); + playSendSound(); + setTimeout(() => { + showMessage(`You forgot to type your name`, 'bot'); + playReceiveSound(); + }, 1000); + } else { + showMessage(name, 'user'); + playSendSound(); + nameInput.value = ''; // Empty textfield + setTimeout(() => startFrenchLesson(name), 1000); } +}; + +// Event listener for the form +form.addEventListener('submit', handleNameInput); - // 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 -} +// Function that shows different chat bubbles depending on 'user' or 'bot' +const showMessage = (message, sender) => { + const messageHTML = ` +
+ ${sender === 'bot' ? 'Bot' : ''} +
+

${message}

+
+ ${sender === 'user' ? 'User' : ''} +
+ `; + chat.innerHTML += messageHTML; + chat.scrollTop = chat.scrollHeight; +}; -// A function to start the conversation +// Greeting message 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(`Bonjour! I'm the French Learning Bot. 🇫🇷🥖 What's your name?`, 'bot'); +}; + +// Start by greeting the user +setTimeout(greetUser, 1000); \ No newline at end of file diff --git a/code/style.css b/code/style.css index a275402f..c168f10c 100644 --- a/code/style.css +++ b/code/style.css @@ -5,16 +5,20 @@ body { margin: 0; padding: 0; - font-family: 'Montserrat', sans-serif; - background: #0026ff; + font-family: 'Raleway', sans-serif; + background: #272727; + font-weight:100; + } + h1 { font-weight: bold; font-size: 28px; line-height: 34px; color: #fff; text-align: center; + margin: 40px; } h2 { @@ -37,7 +41,7 @@ input { box-sizing: border-box; border: none; border-radius: 4px 0 0 4px; - background: #e5e9ff; + background: #ffffff; color: #0026ff; padding: 16px; font-size: 16px; @@ -49,12 +53,12 @@ input { } main { - margin: 0 auto; + margin: auto; width: 100%; max-width: 700px; - height: 600px; + height: 700px; border-radius: 30px; - background: #fff; + background: white; padding: 20px 24px; padding-top: 0; box-sizing: border-box; @@ -91,21 +95,24 @@ main { } .bubble { - background: #e5e9ff; - font-weight: 600; + + font-weight: 300; font-size: 16px; line-height: 26px; padding: 16px 24px; - color: #0026ff; max-width: 40%; } .bot-bubble { + background: #eadcfc; + color: rgb(0, 0, 0); border-radius: 0px 26px 26px 26px; margin-left: 8px; } .user-bubble { + background: #5EFC8D; + color: rgb(31, 31, 31); border-radius: 26px 0 26px 26px; margin-right: 8px; } @@ -123,14 +130,14 @@ main { label { font-size: 16px; - font-family: 'Montserrat'; + font-family: 'Raleway'; font-weight: 500; color: #0026ff; margin-right: 20px; } button { - background-color: #0026ff; + background-color: #ff006a; color: white; border: none; border-radius: 4px; @@ -138,7 +145,7 @@ button { margin-right: 4px; font-size: 16px; line-height: 26px; - font-family: 'Montserrat'; + font-family: 'Raleway'; font-weight: 500; cursor: pointer; transition: all 0.3s ease; @@ -147,4 +154,29 @@ button { button:hover { opacity: 0.9; transition: all 0.2s ease; +} + +#button-container { + display: flex; + justify-content: space-between; + width: 100%; +} + +#button-container button { + flex: 1; + margin: 0 5px; + padding: 10px; + font-size: 16px; + font-family: 'Raleway', sans-serif; + font-weight: 600; + color: #fff; + background-color: #FF6B6C; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#button-container button:hover { + background-color: #f89c9c; } \ No newline at end of file