├── resources └── favicon.png ├── README.md ├── index.html ├── index.js └── styles.css /resources/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theyaxh/Purrrfect-Chatbot/main/resources/favicon.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Purrrfect-Chatbot 2 | A chatbot that just meows😺 3 | 4 | Made using simple html, css and js. 5 | deployed on netlify :) 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Purrrfect Chatbot 7 | 8 | 9 | 10 | 11 |
12 |
13 | Mr. Purrr 14 |
Purrrfect Chatbot
15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const chatMessages = document.getElementById('chat-messages'); 2 | const userInput = document.getElementById('user-input'); 3 | const sendButton = document.getElementById('send-button'); 4 | 5 | function addMessage(message, isUser = false) { 6 | const messageElement = document.createElement('div'); 7 | messageElement.classList.add('message'); 8 | messageElement.classList.add(isUser ? 'user-message' : 'bot-message'); 9 | messageElement.textContent = message; 10 | chatMessages.appendChild(messageElement); 11 | chatMessages.scrollTop = chatMessages.scrollHeight; 12 | } 13 | 14 | function generateMeowResponse() { 15 | const meowCount = Math.floor(Math.random() * 10) + 1; 16 | return 'Meow '.repeat(meowCount).trim(); 17 | } 18 | 19 | function handleUserInput() { 20 | const message = userInput.value.trim(); 21 | if (message) { 22 | addMessage(message, true); 23 | userInput.value = ''; 24 | 25 | setTimeout(() => { 26 | const botResponse = generateMeowResponse(); 27 | addMessage(botResponse); 28 | }, 500); 29 | } 30 | } 31 | 32 | sendButton.addEventListener('click', handleUserInput); 33 | userInput.addEventListener('keypress', (e) => { 34 | if (e.key === 'Enter') { 35 | handleUserInput(); 36 | } 37 | }); -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | min-height: 100vh; 7 | margin: 0; 8 | background-color: #f0f0f0; 9 | padding: 10px 0; 10 | } 11 | .chat-container { 12 | width: 320px; 13 | min-height: 600px; 14 | border: 1px solid #ccc; 15 | border-radius: 12px; 16 | display: flex; 17 | flex-direction: column; 18 | background-color: white; 19 | } 20 | .chat-header { 21 | display: flex; 22 | align-items: center; 23 | border-bottom: 1px solid #ccc; 24 | padding: 10px 16px; 25 | } 26 | .chat-header img { 27 | width: 35px; 28 | height: 35px; 29 | border-radius: 50%; 30 | margin-right: 16px; 31 | } 32 | .chat-header h6 { 33 | margin: 0; 34 | font-weight: 600; 35 | font-size: 18px; 36 | } 37 | .chat-messages { 38 | flex-grow: 1; 39 | padding: 16px; 40 | display: flex; 41 | flex-direction: column; 42 | gap: 10px; 43 | font-size: 16px; 44 | } 45 | .message { 46 | padding: 8px 16px; 47 | border-radius: 16px; 48 | max-width: 70%; 49 | word-wrap: break-word; 50 | } 51 | .user-message { 52 | background-color: #007bff; 53 | color: white; 54 | align-self: flex-end; 55 | } 56 | .bot-message { 57 | background-color: #f1f0f0; 58 | align-self: flex-start; 59 | } 60 | .chat-input { 61 | display: flex; 62 | padding: 16px; 63 | } 64 | #user-input { 65 | flex-grow: 1; 66 | padding: 12px 16px; 67 | border: 1px solid #ccc; 68 | border-radius: 24px; 69 | } 70 | #send-button { 71 | padding: 5px 16px; 72 | background-color: #007bff; 73 | color: white; 74 | border: none; 75 | border-radius: 24px; 76 | margin-left: 5px; 77 | cursor: pointer; 78 | } 79 | #send-button:hover { 80 | background-color: #48a1ff; 81 | } --------------------------------------------------------------------------------