diff --git a/README.md b/README.md index 60f55e53..2f718c18 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ # Project Name -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This is a chatbot that is a digital version of a Magic 8 Ball. It gives random answers to the users questions. ## 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? +I wanted to start with a greeting and personalized welcome message with the username. Then i wanted the chatbot to give randomized answers to the users questions. Only questions that ends with a ? are valid. + +I think the code could be structured a bit better, but It's organically arranged based on my work process. I first struggeled with how to make the chatbot start giving the Magic 8 Ball answers AFTER the first greeting. Once I figured that out, it was pretty much done. I wanted to keep it simple, so no more features were added. I'm very happy with the end result and my kids loved asking the chatbot different questions! ## 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://pink-magic-8-ball.netlify.app/ +Your future awaits \ No newline at end of file diff --git a/code/assets/ask.png b/code/assets/ask.png new file mode 100644 index 00000000..46b6ac27 Binary files /dev/null and b/code/assets/ask.png differ diff --git a/code/assets/bot.png b/code/assets/bot.png deleted file mode 100644 index 2c894b15..00000000 Binary files a/code/assets/bot.png and /dev/null differ diff --git a/code/assets/pink-8-ball.png b/code/assets/pink-8-ball.png new file mode 100644 index 00000000..af3f3a5b Binary files /dev/null and b/code/assets/pink-8-ball.png differ diff --git a/code/assets/user.png b/code/assets/user.png deleted file mode 100644 index 6d95f08f..00000000 Binary files a/code/assets/user.png and /dev/null differ diff --git a/code/index.html b/code/index.html index 316eb187..05d51df3 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,45 @@ - - - - - - Chatbot - + + + + + + + - -

Welcome to my chatbot!

-
-
-
-
- - - -
-
-
+ + + + Chatbot + - - + +

Ask Your Fate:

+

The Magic 8 Ball ✨ Knows

+

Welcome to the Magic 8 Ball Chatbot! +
+ Ask me any YES or NO question, +
+ and I'll provide you + with a wise and prophetic + response. +

+
+
+
+
+ + +
+
+
- + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 125d6904..c035d525 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,11 @@ +console.log(`let's chat`) + // DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') +const chat = document.getElementById('chat'); +const nameForm + = document.getElementById('name-form'); +const nameInput = document.getElementById('name-input'); + // Functions goes here 👇 @@ -13,41 +19,113 @@ const showMessage = (message, sender) => {

${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') { + console.log('bot says:', message) chat.innerHTML += `
- Bot + Bot

${message}

` } +}; + +// A function to save the user's name and respond +const saveNameAndRespond = (name) => { + // Save the name to local storage for future use + localStorage.setItem('userName', name); + + + // Convert the name to uppercase + const capitalizedName = name.toUpperCase(); + + // Respond to the user with their name + showMessage(`Hello ${capitalizedName}! Do you have a question for me?`, 'bot'); +}; + +// Event listeners +// Flag to track if the bot has asked for the name +let hasAskedName = false; +nameForm.addEventListener('submit', (event) => { + event.preventDefault(); + + const userName = nameInput.value; + nameInput.value = ''; + + // Display the user's message + showMessage(userName, 'user'); + // Check if the bot has already asked for the // Check if the bot has already asked for the name + if (hasAskedName) { + // If yes, validate the question + if (userName.endsWith('?')) { + // If the question is valid, respond + showMessage(generateMagic8BallResponse(userName), 'bot'); + } else { + // If not, prompt the user to ask a question + showMessage("I can only answer questions that end with a question mark. Please try again.", 'bot'); + } + } else { + // If not, save the name and respond with the greeting + saveNameAndRespond(userName); + hasAskedName = true; + } // 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 } -// Eventlisteners goes here 👇 + +const magic8BallResponses = [ + "Yes, definitely.", + "It is certain.", + "Without a doubt.", + "Yes.", + "Absolutely.", + "As I see it, yes.", + "Most likely.", + "It's possible.", + "Signs point to yes.", + "Yes, indeed.", + "Probably not.", + "Maybe.", + "Time will tell.", + "Cannot predict now.", + "Don't count on it.", + "No.", + "Absolutely not.", + "My sources say no.", + "That's a tough one.", + "Very doubtful." +]; + +function generateMagic8BallResponse() { + const randomIndex = Math.floor(Math.random() * magic8BallResponses.length); + return magic8BallResponses[randomIndex]; +} // 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) +setTimeout(greetUser, 2000) diff --git a/code/style.css b/code/style.css index a275402f..56a7fd26 100644 --- a/code/style.css +++ b/code/style.css @@ -5,32 +5,56 @@ body { margin: 0; padding: 0; - font-family: 'Montserrat', sans-serif; - background: #0026ff; + font-family: "Josefin Sans", sans-serif; + background: #ac335c; } h1 { - font-weight: bold; - font-size: 28px; - line-height: 34px; + font-weight: 800; + font-family: "Baloo 2", sans-serif; + font-size: 24px; + line-height: 29px; color: #fff; text-align: center; + margin: 8px 1px 2px 1px; } h2 { - font-weight: bold; - font-size: 24px; - line-height: 34px; + font-weight: 800; + font-family: "Baloo 2", sans-serif; + font-size: 20px; + line-height: 25px; color: #fff; text-align: center; - margin-bottom: 36px; + margin: 2px 1px 8px 1px; } -p { - font-size: 18px; +.info-text { + font-size: 14px; font-weight: 600; - line-height: 28px; + line-height: 18px; + color: #ffeefa; + margin: 0 auto; + text-align: center; + width: 80%; +} + +span { + color: #fb9dd5; + font-weight: bold; +} + +p { + font-size: 14px; + line-height: 22px; + font-weight: 500; + color: #841f32; margin: 0; + padding: 0; + text-align: left; + overflow-wrap: break-word; + hyphens: auto; + width: 100%; } input { @@ -38,10 +62,10 @@ input { border: none; border-radius: 4px 0 0 4px; background: #e5e9ff; - color: #0026ff; + color: #d94f92; padding: 16px; font-size: 16px; - font-family: 'Montserrat'; + font-family: "Josefin Sans", sans-serif; font-weight: 600; line-height: 26px; flex: 1; @@ -50,16 +74,19 @@ input { main { margin: 0 auto; - width: 100%; + width: 95%; max-width: 700px; height: 600px; + margin-top: 8px; + margin-bottom: 4px; border-radius: 30px; background: #fff; - padding: 20px 24px; + padding: 10px 12px; padding-top: 0; box-sizing: border-box; display: flex; flex-direction: column; + border: solid 4px #f4c538; } .chat { @@ -67,20 +94,21 @@ main { display: flex; justify-content: flex-start; overflow: scroll; + scrollbar-width: none; flex-direction: column; - padding-bottom: 16px; + padding: 16px 0; } .bot-msg { display: flex; - margin: 16px 8px 0 0; + margin: 4px 2px 0 0; flex-shrink: 0; } .user-msg { display: flex; justify-content: flex-end; - margin: 16px 0 0 8px; + margin: 4px 0 0 2px; flex-shrink: 0; } @@ -88,31 +116,40 @@ main { .user-msg img { width: 60px; height: 60px; + border-radius: 100%; } .bubble { - background: #e5e9ff; - font-weight: 600; - font-size: 16px; - line-height: 26px; - padding: 16px 24px; - color: #0026ff; - max-width: 40%; + max-width: 50%; + width: fit-content; + margin-top: 14px; + margin-bottom: 4px; } .bot-bubble { + background: + #f1f2f1; border-radius: 0px 26px 26px 26px; margin-left: 8px; + padding: 10px; + display: flex; + align-items: center; + text-align: left; } .user-bubble { + background: #ffdef5; border-radius: 26px 0 26px 26px; margin-right: 8px; + padding: 10px; + display: flex; + align-items: center; } .input-wrapper { display: flex; justify-content: center; + margin-bottom: 4px; } .input-wrapper form { @@ -121,24 +158,16 @@ main { align-items: center; } -label { - font-size: 16px; - font-family: 'Montserrat'; - font-weight: 500; - color: #0026ff; - margin-right: 20px; -} - button { - background-color: #0026ff; + background-color: + #e9c5dd; color: white; border: none; border-radius: 4px; padding: 16px 20px; - margin-right: 4px; font-size: 16px; line-height: 26px; - font-family: 'Montserrat'; + font-family: "Josefin Sans", sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease;