Create Working Chatbot in HTML CSS and JavaScript | Chatbot HTML CSS JavaScript
HTML-код
- Опубликовано: 16 май 2024
- In this video tutorial, I've shown how to create a working chatbot using HTML, CSS, and JavaScript. In this chatbot, you can ask any question and receive instant responses. This chatbot is also responsive, which means you can use it on your phone too.
Create your own ChatGPT in HTML CSS & JavaScript
Watch: • Create Your Own ChatGP...
Hire me on Fiverr
www.fiverr.com/prakashahi
Follow me on Instagram
/ coding.np
Visit my website for helpful coding projects with source code
www.codingnepalweb.com
Timestamps:
0:00 Chatbot Demo
1:57 HTML & CSS Start
16:14 JavaScript Start
17:29 Adding User Message to the Chatbox
21:00 Generating Response for User Messages
26:19 Auto-Scrolling the Chatbox
29:27 Toggling Chatbot Visibility with Button Click
33:23 Enabling Textarea Auto-Resize
#javascript #html #css #javascriptprojects #js #chatbot
Music Credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...
Those Restless Nights - Artificial.Music
• Those Restless Nights ...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
![Gunna - whatsapp (wassam) [Official Video]](http://i.ytimg.com/vi/bY1kLt4iz94/mqdefault.jpg)
Create AI Image Generator Website in HTML CSS and JavaScript: ruclips.net/video/fA_tWwPMapM/видео.html
Create your own ChatGPT in HTML CSS and JavaScript: ruclips.net/video/atKtG29iroY/видео.html
Can you share source code
an error occurred even though I entered the API_keys correctly
is there any solution for that?
how would you modify this to work as a livechat instead of a chat bot
Awesome, I can't believe it, never though I would do something like this even though I'm just calling an API, it's still very cool. Great work bro, the amount of projects in this channel is just insane! this cannel is really underrated, nice video.
is the API is free ? and if it is free then for how long ?
Awesome Tutorial 👍
I have been looking for this dude, Thank you so much!!
Most awesome tutorial ever!
You are the best, I send you a hug from Colombia. 🙌
Thank You So Much 🤗
Amazing Project For Me...
i learnt so many things from it.
why is this channel so underrated 😭😭
Bcz he don't make it with voice
Communities*
Spanish (from spain) devs communities.
They choose whose to 'grow'
200k subscribers is not underrated bro
THIS IS THE MOSSTTT UNDERRATEDDD RUclipsE VIDEOO I HAVE EVERRR SEEEEEEEN IN MY ENTIRE LIFFEEEEE!!!!!!!!!!!!!!!
THANKK YOUUUUUUU!!!!!!!!!! SOOOOOOOOO MUCHCHHHHHHCHCHCHCHC!H!!!
Incrediblyyy Helpful!!!
This is a great post.
MashAllah !
what a great video !
I can't wait to subscribe
🎉 super awesome ❤️😎
thanks sir your this video was really helpful to me
Thank you very much. A wonderful explanation that helped me a lot.
is the API is free ? and if it is free then for how long ?
You are my savior.
Love from US
Can you make it using Nodejs , ExpressJs and React for realtime updates?
thank you very much
awesome video brother'❤❤, pls explain how to create an account and API key.
Thank you
🔥🔥🔥
great video worked for me thank you. and another thing can we use any free API if yes please suggest the name
awesome.....
Thanks bro 😊😊😉, can you make a valid evaluation form that validates both login and registration?
Yes, sure
@@CodingNepal Thanks bro💙😊✋
uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Nice🙂
what is the import url in the css code can u send this ????
it was brilliant but GPT doesn't be supported in my country so if you can recommend something else or do another video with another technique I will appreciate it
Whats is Your Country?
Bard in an option
@@realdrumfan Egypt
I'm able to get it worked in my asp support chat project. i'm just gonna figure out how to save to the convo in the DB.
Great tutorial 👍. Because I am new to this topic two questions: 1) How can I embed the bot in my Wordpress site? 2) I am using most of the time a local LLM (LM Studio) for testing. I changed the api-url, the api-key and the model name, but it didn't work (error messages field is required). Any hints for me?
How do I resolve the "too many requests" error? I am not able to get the bot to respond to me
Hey I'm facing same error in console can you tell me have you solved this one?
Nice bro but please in The future video please explain in detail so we will understand the code better instead of using background music
For the API usage, do you have to pay for it after using it once?
Amazing i like this video
Thank you very much!
the best thank you
It's working
why mine didnt answer correctly and always got error message, but in console after I inspect, everything is fine..????
What is the way to maintain session of user
Nice bro but how would you implement exporting and importing chat history?
Watch this video: ruclips.net/video/atKtG29iroY/видео.html Here I've shown how to save chat history to the browser's local storage and retrieve it from there.
@@CodingNepal as ur from nepal so pls speak if u speak ur viewership will increase
awesome project
Glad you like it!
sir make a tutorial about " About us page generator, contact us page generator, terms and conditions page generator, disclaimer page generator and also privacy policy page generator. please please please please.
Your content is awesome but can you please start explaining the code instead of using music 🎵 🎶 . It's a request ☺️
Is this chatbot can be integrated to database for fetching data like customer orders
dear bro.
I want to push the file to github, to deploy for friends to use,
but the file contains the api key.
so is there any way to deploy?
Bro, Are you solved this problem? Because i am facing same problem.
@@KaptanSingh-oy1bp
As far as I know, putting the API key into the evn variable (.evn), then putting the .evn file into the .gitignore file solves the API leak problem. But I get an error when I import the .evn variable into the .js file
Can you able to provide your github link
Wow❤
Bro one small doubt.you implement the package how to modify example "hi to reply message how can i help you"... Please tell me bro... Waiting for you bro....
can we use Bard API_KEYS instead? open ai available in only 45 countries. pls make a video. and let me know if you see this comment.
Bro listen, How to pass the API in deployment it is getting revoked, I'm not able to set up environment variables please help
Hi Great Please Show me How to Add Custom Data i mean Custom Response and Custom Answers PLZ PLZ
Please make youtube video downloader in php. i've done subscribed you with 3 account😉
hi i made a new API key and it is saying status 404 not found what should i do now... btw keep up the good work.
Brother, may you please make a video on how to continue from here to hide our API key?
Because, we cannot host this chatbot as the API key is hardcoded into our key, so may you please make a video on how do we evade this problem?
Scientific calculator for engineering study make it bro
What is the content of material-symbols-outlined?
Bro, when I made this Chatbot, I coded it perfectly with no errors, but after using my API Key , I m getting the error 'Too many requests , you have completed your current quota', Please tell what should I do
same, Have you got any solution?
maybe try generating API key with a new account which is not logged in to GPT
I've completed this project now anyone tell me how to solve API issue cuz I cant find it on stack-overflow if there is error 429 (too many requests ) and it is expired how will I solve this
same , im getting that error, what did you do to resolve it?
@@ANUJAGUPTA-jx5ri the only solution was to make a new id and generate API key, we can't use free API if we are already using openapi for a long time.... They offer free APIs to new users only (for some time )you should make new id and then generate your API key that will work .... May be there's another solution but I haven't found any yet
Same error is coming to me also!
Did you get the solution of it ?
🙂🙂👏
Omg that’s what I’m finding on RUclips since last two months 😭
if you will explain with your voice, then it will give you more views and people will like your content
It's bad practices to include API key in Javascript. Anyone who views the bot could view your secret key, & run your API account thru the roof astronomically.
i implement this, but cant run show me error...
@@mrravipandee+1
Please Create like and comment functionality using ajax and php.
how to embed on website
can i use custom info for this chatbot?
Bro do we need to work on back-end for this ?
Yes, for sure. To hide the API key.
Sir how you learnt Javascript plz telll me !!!!!!
anything will help !!!!
javascript part was literally hard for me..
guys im getting authorization error code 401 errors, i put in the api key in the authorization bearer im also signed in open ai how do i fix this
Why its giving error: "You exceeded your current quota, please check your plan and billing details." I didn't ever use the API. Is this API not included in free plan?
Do you use websocket?
Please Resume Generator HTML CSS JavaScript & Create ReactJS Project.
How can I integrate this chatbot to my website ?
Found any way ?
4th comment pin pls and can you make a sidebar that can randomize any photo and set it and is fixed on top and also save in localstorage. And also shows his name and age.
For example:
Save
Edit
// Get elements
const nameInput = document.getElementById('name');
const roleInput = document.getElementById('role');
const imageInput = document.getElementById('image');
const saveButton = document.getElementById('save-button');
const editButton = document.getElementById('edit-button');
// Check if data exists in local storage
if (localStorage.getItem('userData')) {
// Retrieve and populate data from local storage
const userData = JSON.parse(localStorage.getItem('userData'));
nameInput.value = userData.name;
roleInput.value = userData.role;
imageInput.disabled = true;
saveButton.disabled = true;
} else {
editButton.disabled = true;
}
// Save data to local storage
saveButton.addEventListener('click', function() {
const userData = {
name: nameInput.value,
role: roleInput.value
};
localStorage.setItem('userData', JSON.stringify(userData));
nameInput.disabled = true;
roleInput.disabled = true;
imageInput.disabled = true;
saveButton.disabled = true;
editButton.disabled = false;
});
// Enable editing
editButton.addEventListener('click', function() {
nameInput.disabled = false;
roleInput.disabled = false;
imageInput.disabled = false;
saveButton.disabled = false;
editButton.disabled = true;
});
In sidebar. The photo is fixed at top and in the place of role there are radi🥺 os.tje 🥺 format 🥺 can 🥺 look 🥺 like 🥺 this 🙏:
(Image 🙏) (Name 🙏)
(Image 🙏) (age 🙏)•(role 🙏)
Please 🥺 it's 🥺 my 🙏 request 🥺🥺🥺🥺🥺🥺🙏🙏🙏🙏🙏🙏🥺🥺🙏🥺🥺
hi..Code is running successfully, but I only I can send the messages but I'm continuously receiving ( Oops Something went wrong) from bot
Any Solutions to the Problem ?
pleaseeee help me
Hey if you got the answer can you share with me.. Because I want to resolve that because I take my mini project as chat bot so i request to share that problem's solution
i love you tank yoiu
It will be beneficiary if you just include the font details on the description
I made this it was working but when i host it.. its showing error that api key is invalid and i am.mot getting any response
it's great and thanks but I have followed all your steps in the video and whenever I try to chat there is an error and the console says "You didn't provide an API key. You need to provide your API key in an Authorization header" Although I have put the API as you did in the video
Same here bro. Pls reply if your issue is solved now.
can you share source code plz
For me showing and 429 error what can i do?
Y I'm getting the something went wrong error.. I did checked tha code it's same and I created my own api key also .. can u please help ?
same message as me
bro, any solution for the API. free API is not woking.
My API KEY doesn't work, I continue have error for it that the key is not procvided, but I m 100% sure it is. What should I do?
I write the password in API_KEY, but the chatbot still does not work. All codes are correct, but the console says there is an error in the key. Can you help me pls?
You need to provide API key not password in the API_KEY variable.
@@CodingNepal no I mean like key,not password I know it, I maked API key and then copy paste but its still not working
@@CodingNepal every code true but no response from bot
You probably changed up the role from "user" to something else right that may be the caused of the error you must keep it as user if you want the chatbot to identify itself as some other bot names you gotta add another line for example in line 32
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{role: "user", content: userMessage},
{"role": "system", "content": "Jarvis is a chatbot thats created to help viewers to learn Algorithm and Data Structure in programming in a website called Easy Learn that specializes in that area."}],
})
How to make government rule Regulations chatbot
Can be created by. Website api key like government api key
Sir, I have gone through your source code. But the chatbot was only replying with one message "oops ! something went wrong". I have placed my own API key in it..even then it is showing only the same thing. What to do to make the chatbot work.
same here I also added the api and it says script line 39
so fir hua ki nai
mera bhi same aa raha haii
Okay so I found out something apparently we need to add out payment details for it to work I abandoned this method and instead created the chatbot with rule based chatbot
@@XylomICP okay
Error 429 us coming too many requests showing pls help to debug this
source code please
Something Wrong error coming although i have put correct api key and it is not expired
Did u find the issue
Bro please try to explain the code approach why(s) how(s) etc etc also in your voice either in hindi or English...
Okay, I'll try my best.
Please 👋👋👋👋
api key is free or paid
I get error in the Line starting with "fetch" in js, help
metoo
Did you solve it?
I make video from this channel with explanation in hindi
Send link
can this be done in other languages too???
In which language you required this ?
Why my API_URL doesn't work ??
its showing something went wrong please help
How Solve the problem Too Many Request
Hello !
Code is running successfully, but I only I can send the messages but I'm continuously receiving ( Oops Something went wrong) from bot
Any Solutions to the Problem ?
Did u get solution to this
@@NehaSharma-rl4qy No, I have stopped working on this & now I'm working on my own concept ChatBot
i need source code its not available in website bro?
Source code has bee uploaded. Link is in the video description.
make it on using socket
Api key paste karne ke baad bhi error aa raha hai defeat wala, api key pasted correctly, plz help me what I do
Hi sir Im used your chatbot my isnot workihng