├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── dependabot.yml └── workflows │ └── static.yml ├── .vscode └── settings.json ├── README.md ├── SECURITY.md ├── chatbot.js ├── index.html ├── send-message.png └── style.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | 4 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 5 | patreon: # Replace with a single Patreon username 6 | open_collective: # Replace with a single Open Collective username 7 | ko_fi: # Replace with a single Ko-fi username 8 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 9 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 10 | liberapay: # Replace with a single Liberapay username 11 | issuehunt: # Replace with a single IssueHunt username 12 | otechie: # Replace with a single Otechie username 13 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 14 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | 2 | # To get started with Dependabot version updates, you'll need to specify which 3 | # package ecosystems to update and where the package manifests are located. 4 | # Please see the documentation for all configuration options: 5 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 6 | 7 | version: 2 8 | updates: 9 | - package-ecosystem: "" # See documentation for possible values 10 | directory: "/" # Location of package manifests 11 | schedule: 12 | interval: "weekly" 13 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v3 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v3 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v1 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v2 44 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabCompletion": "on", 3 | "diffEditor.codeLens": true 4 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My_Chatbot 2 | 3 |
4 | 5 | ![GitHub](https://img.shields.io/github/license/hegdepavankumar/Basic-Chatbot-using-HTML-CSS-and-JavaScript?style=flat) 6 | ![GitHub top language](https://img.shields.io/github/languages/top/hegdepavankumar/Basic-Chatbot-using-HTML-CSS-and-JavaScript?style=flat) 7 | ![GitHub last commit](https://img.shields.io/github/last-commit/hegdepavankumar/Basic-Chatbot-using-HTML-CSS-and-JavaScript?style=flat) 8 | ![ViewCount](https://views.whatilearened.today/views/github/hegdepavankumar/Basic-Chatbot-using-HTML-CSS-and-JavaScript.svg?cache=remove) 9 | 10 | 11 | ## Preview 12 | 13 | ![chatbot-2](https://github.com/hegdepavankumar/Basic-Chatbot-using-HTML-CSS-and-JavaScript/assets/85627085/54b7bff0-cd2a-43b6-b29f-2303874d1474) 14 | 15 | 16 |
17 | 18 | ## Instructions 19 | 1). Fork this repository
20 | 2). Clone the forked repository
21 | 3). Add your contributions (code or documentation)
22 | 4). Commit and push
23 | 5). Wait for the pull request to be merged
24 | 25 | 26 |
27 | 28 | ## Contributing 29 | Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. 30 | 31 | 1. Fork the Project 32 | 2. Create your Feature Branch (git checkout -b feature/AmazingFeature) 33 | 3. Commit your changes (git commit -m 'Add some AmazingFeature') 34 | 4. Push to the Branch (git push origin feature/AmazingFeature) 35 | 5. Open a Pull Request 36 | 37 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. 38 | 39 | 40 | ## Creator [🔝] 41 | 42 | (https://github.com/hegdepavankumar). This Project is Created by:- 43 | 44 | | [
@hegdepavankumar](https://github.com/hegdepavankumar) | 45 | 46 | 47 |
48 |

Show some  ❤️  by starring some of the repositories!

49 |
50 | 51 | 52 | 53 | 54 | 55 | if you like what I do, maybe consider buying me a coffee🥺👉👈 56 | 57 | Buy Me A Coffee 58 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /chatbot.js: -------------------------------------------------------------------------------- 1 | // Get chatbot elements 2 | const chatbot = document.getElementById('chatbot'); 3 | const conversation = document.getElementById('conversation'); 4 | const inputForm = document.getElementById('input-form'); 5 | const inputField = document.getElementById('input-field'); 6 | 7 | 8 | // Add event listener to input form 9 | inputForm.addEventListener('submit', function(event) { 10 | // Prevent form submission 11 | event.preventDefault(); 12 | 13 | // Get user input 14 | const input = inputField.value; 15 | 16 | // Clear input field 17 | inputField.value = ''; 18 | const currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: "2-digit" }); 19 | 20 | // Add user input to conversation 21 | let message = document.createElement('div'); 22 | message.classList.add('chatbot-message', 'user-message'); 23 | message.innerHTML = `

${input}

`; 24 | conversation.appendChild(message); 25 | 26 | // Generate chatbot response 27 | const response = generateResponse(input); 28 | 29 | // Add chatbot response to conversation 30 | message = document.createElement('div'); 31 | message.classList.add('chatbot-message','chatbot'); 32 | message.innerHTML = `

${response}

`; 33 | conversation.appendChild(message); 34 | message.scrollIntoView({behavior: "smooth"}); 35 | }); 36 | 37 | // Generate chatbot response function 38 | function generateResponse(input) { 39 | // Add chatbot logic here 40 | const responses = [ 41 | "Hello, how can I help you today? 😊", 42 | "I'm sorry, I didn't understand your question. Could you please rephrase it? 😕", 43 | "I'm here to assist you with any questions or concerns you may have. 📩", 44 | "I'm sorry, I'm not able to browse the internet or access external information. Is there anything else I can help with? 💻", 45 | "What would you like to know? 🤔", 46 | "I'm sorry, I'm not programmed to handle offensive or inappropriate language. Please refrain from using such language in our conversation. 🚫", 47 | "I'm here to assist you with any questions or problems you may have. How can I help you today? 🚀", 48 | "Is there anything specific you'd like to talk about? 💬", 49 | "I'm happy to help with any questions or concerns you may have. Just let me know how I can assist you. 😊", 50 | "I'm here to assist you with any questions or problems you may have. What can I help you with today? 🤗", 51 | "Is there anything specific you'd like to ask or talk about? I'm here to help with any questions or concerns you may have. 💬", 52 | "I'm here to assist you with any questions or problems you may have. How can I help you today? 💡", 53 | ]; 54 | 55 | // Return a random response 56 | return responses[Math.floor(Math.random() * responses.length)]; 57 | } 58 | //tab switch 59 | 60 | window.onblur = function (tabs) { 61 | alert('trying to switch tabs eh !'); 62 | }; 63 | 64 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ask Your Questions! 8 | 9 | 10 | 11 |
12 | 15 |
16 |
17 |
18 |

Hi! I,m Pavankumar👋 it's great to see you!

19 |
20 |
21 |
22 | 23 | 24 | 27 | 28 | 29 |
30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 |
39 |

Copyright © 2023 Mr.Pavankumar. All Rights are reserved

40 |
41 | 42 | -------------------------------------------------------------------------------- /send-message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hegdepavankumar/Basic-Chatbot-using-HTML-CSS-and-JavaScript/ceb2c8351a67fd12e4bb41250085400e3b04944b/send-message.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | 6 | .chatbot-container { 7 | width: 500px; 8 | margin: 0 auto; 9 | background-color: #f8e0e0; 10 | border: 1px solid #0a0101; 11 | border-radius: 5px; 12 | box-shadow: 0 2px 4px rgba(39, 8, 214, 0.1); 13 | } 14 | 15 | #chatbot { 16 | background-color: #47788b; 17 | border: 1px solid #000000; 18 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); 19 | border-radius: 4px; 20 | } 21 | 22 | #header { 23 | background-color: rgb(93, 109, 109); 24 | color: #ffffff; 25 | padding: 20px; 26 | font-size: 1em; 27 | font-weight: bold; 28 | } 29 | 30 | message-container { 31 | background: #9aa171; 32 | width: 100%; 33 | display: flex; 34 | align-items: center; 35 | } 36 | 37 | 38 | 39 | #conversation { 40 | height: 400px; 41 | overflow-y: auto; 42 | padding: 20px; 43 | display: flex; 44 | flex-direction: column; 45 | } 46 | 47 | @keyframes message-fade-in { 48 | from { 49 | opacity: 0; 50 | transform: translateY(-20px); 51 | } 52 | to { 53 | opacity: 1; 54 | transform: translateY(0); 55 | } 56 | } 57 | 58 | .chatbot-message { 59 | display: flex; 60 | align-items: flex-start; 61 | position: relative; 62 | font-size: 16px; 63 | line-height: 20px; 64 | border-radius: 20px; 65 | word-wrap: break-word; 66 | white-space: pre-wrap; 67 | max-width: 100%; 68 | padding: 0 15px; 69 | } 70 | 71 | .user-message { 72 | justify-content: flex-end; 73 | } 74 | 75 | 76 | .chatbot-text { 77 | background-color: rgb(234, 237, 238); 78 | color: #000000; 79 | font-size: 1.1em; 80 | padding: 15px; 81 | border-radius: 5px; 82 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 83 | } 84 | 85 | #input-form { 86 | display: flex; 87 | align-items: center; 88 | border-top: 1px solid #196bd6; 89 | } 90 | 91 | #input-field { 92 | flex: 1; 93 | height: 60px; 94 | border: 1px solid #7f9bbe; 95 | border-radius: 4px; 96 | padding: 0 10px; 97 | font-size: 14px; 98 | transition: border-color 0.3s; 99 | background: #e9dce6; 100 | color: #000000; 101 | border: none; 102 | } 103 | 104 | .send-icon { 105 | margin-right: 10px; 106 | cursor: pointer; 107 | } 108 | 109 | #input-field:focus { 110 | border-color: #000000; 111 | outline: none; 112 | } 113 | 114 | #submit-button { 115 | background-color: transparent; 116 | border: none; 117 | } 118 | 119 | p[sentTime]:hover::after { 120 | content: attr(sentTime); 121 | position: absolute; 122 | top: -3px; 123 | font-size: 14px; 124 | color: gray; 125 | } 126 | 127 | .chatbot p[sentTime]:hover::after { 128 | left: 15px; 129 | } 130 | 131 | .user-message p[sentTime]:hover::after { 132 | right: 15px; 133 | } 134 | 135 | 136 | /* width */ 137 | ::-webkit-scrollbar { 138 | width: 10px; 139 | } 140 | 141 | /* Track */ 142 | ::-webkit-scrollbar-track { 143 | background: #f1f1f1; 144 | } 145 | 146 | /* Handle */ 147 | ::-webkit-scrollbar-thumb { 148 | background: #888; 149 | } 150 | 151 | /* Handle on hover */ 152 | ::-webkit-scrollbar-thumb:hover { 153 | background: #555; 154 | } --------------------------------------------------------------------------------