Add functionality

Witchcraft-Coding · Jun 12, 2024 · 17dde11 · 17dde11
1 parent e292704
commit 17dde11
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 15 deletions.
diff --git a/functions.js b/functions.js
@@ -0,0 +1,63 @@
+const responses = {
+    srk: [
+        "Eh-eh-eh-eh",
+        "K-k-k-k-kiran!",
+        "Kuch kuch hota hai, Anjali, tum nahi samjhogi.",
+        "Agar yeh tujhe pyaar karti hai to ye palat ke dekhegi…palat…palat!",
+        "Kabhi kabhi jeetne ke liye kuch haarna padta hai. Aur haar ke jeetne waale ko Baazigar kehte hai."
+    ],
+    bebo: [
+        "Woohoo!",
+        "Papa ki pari hu main!",
+        "Main apni favorite hoon!",
+        "Black makes me look thin, and green makes you look fat!",
+        "Aye mujhe maasi mat bolo.",
+        "Prem!"
+    ]
+};
+
+function addMessage(message, direction) {
+    const messageElement = $('<div></div>').addClass(["message", direction]).text(message);
+    $("#message-container").append(messageElement);
+}
+
+function showDisclaimer() {
+    addMessage("Hi User! I am a bot you can get B-wood nonsense from!", "left");
+}
+
+function clearMessages() {
+    $("#message-container").empty();
+}
+
+function getSelectedBot() {
+    return $('#selector').find(":selected").val();
+}
+
+function getRandomNumber(upperlimit) {
+    return Math.floor(Math.random() * upperlimit);
+}
+
+function showBotMessage() {
+    const selection = getSelectedBot();
+    const messageList = responses[selection];
+    const randomIndex = getRandomNumber(messageList.length);
+    addMessage(messageList[randomIndex], "left");
+}
+
+function getUserMessage() {
+    return $("#input-box").val();
+}
+
+function clearUserMessage() {
+    $("#input-box").val('');
+}
+
+function sendUserMessage() {
+    const usermessage = getUserMessage();
+    if (usermessage === '') {
+        return;
+    }
+    addMessage(usermessage, "right");
+    clearUserMessage();
+    showBotMessage();
+}
diff --git a/index.html b/index.html
@@ -6,6 +6,8 @@
 	<title>Bollywood Chatbot</title>
 	<link href='style.css' rel='stylesheet' />
 	<script src='jquery.js'></script>
+	<script src='functions.js'></script>
+	<script src='script.js'></script>
 </head>
 <body>
 	<h1>Bollywood Chatbot</h1>
@@ -16,14 +18,12 @@ <h1>Bollywood Chatbot</h1>
 		</select>
 	</div>
 	<div id='messages'>
-		<div id='message-container'>
-			<div class='message left'>Hi!</div>
-			<div class='message right'>Hello!</div>
-		</div>
-		<div class='input'>
-			<input type='text' class='input-box'/>
-			<button class='send'>Send</button>
+		<div id='message-container'></div>
+		<div id='input'>
+			<input type='text' id='input-box'/>
+			<button id='send'>Send</button>
 		</div>
 	</div>
+	<h2>Made by Medha and Param.</h2>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,15 @@
+$(function() {
+    showDisclaimer();
+    $('#selector').on('change', function() {
+        clearMessages();
+        showDisclaimer();
+    });
+    $("#input-box").on('keypress', function (e) {
+        if (e.key === 'Enter') {
+            sendUserMessage();
+        }
+    });
+    $("#send").on('click', function() {
+        sendUserMessage();
+    });
+});
diff --git a/style.css b/style.css
@@ -25,6 +25,12 @@ h1 {
 	font-size: 40px;
 }
 
+h2 {
+	text-align: center;
+	font-size: 15px;
+	margin-top: 90px;
+}
+
 #selection-wrapper {
 	width: fit-content;
 	margin: 25px auto;
@@ -65,7 +71,7 @@ h1 {
 	align-self: flex-end;
 }
 
-.left::after {
+/* .left::after {
 	content: '';
 	position: absolute;
 	left: 10%;
@@ -78,9 +84,9 @@ h1 {
 	border-top: 0;
 	margin-top: -10px;
 	margin-left: -20px;
-}
+} */
 
-.right::after {
+/* .right::after {
 	content: '';
 	position: absolute;
 	right: 10%;
@@ -93,16 +99,16 @@ h1 {
 	border-top: 0;
 	margin-top: -10px;
 	margin-right: -20px;
-}
+} */
 
-.input {
+#input {
 	margin-top: 10px;
 	width: 100%;
 	display: flex;
 	flex-direction: row;
 }
 
-.input-box {
+#input-box {
 	padding: 8px;
 	flex: 80;
 	margin: 0;
@@ -111,7 +117,7 @@ h1 {
 	border: none;
 }
 
-.send {
+#send {
 	flex: 20;
 	margin: 0;
 	font-size: 20px;
@@ -121,6 +127,6 @@ h1 {
 	border-radius: 0 6px 6px 0;
 }
 
-.send:hover, .send:active, .send:focus {
+#send:hover, #send:active, #send:focus {
 	filter: brightness(90%);
 }