Create Working Chatbot in HTML CSS and JavaScript | Chatbot HTML CSS JavaScript

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.

🗂️ Get Source Code of this Chatbot

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

👍 Follow me on Facebook

📷 Follow me on Instagram

📲 Follow me on X (Twitter)

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]

Miss You – LiQWYD

Those Restless Nights — Artificial.Music

Ehrling - You And Me (Vlog No Copyright Music)

[CodingNepal]

If you get an API error then please read this. If you’re getting the source code from the description link, you can skip this, as the file is already updated.

This chatbot project initially uses the OpenAI API to generate responses. However, OpenAI no longer offers free API keys; the minimum cost to get started is $5.

If you're willing to pay for the OpenAI API, follow the video steps as they are and ensure you purchase the API key during setup. Your chatbot should work without any issues.

For those who prefer not to pay, you can use Google's free Gemini API. Follow these steps to update your script.js file:


2. 21:24 In line 18, update the API URL to:

3. 21:46 In line 20, update the requestOptions object to:
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
contents: [{
role: "user",
parts: [{ text: userMessage }]
}]
}),
};

4. 25:24 In line 36, update:
messageElement.textContent = // Update message text with API response

This will allow your chatbot to function without API errors using the free Google Gemini API.

[danieloluwakemi]

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.

[tasneemayham]

THIS IS THE MOSSTTT UNDERRATEDDD YOUTUBEE VIDEOO I HAVE EVERRR IN MY ENTIRE
THANKK
Incrediblyyy Helpful!!!

[parindyapigera]

I have been looking for this dude, Thank you so much!!

[yalejolopez-gdez]

You are the best, I send you a hug from Colombia. 🙌

[codingwave]

Thank You So Much 🤗
Amazing Project For Me...
i learnt so many things from it.

[fighter]

MashAllah !
what a great video !
I can't wait to subscribe

[nanasatoruu]

why mine didnt answer correctly and always got error message, but in console after I inspect, everything is fine..????

[vaishnavisabbanwar]

thanks sir your this video was really helpful to me

[gehanadel]

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

[CricketGuruji]

Can you make it using Nodejs, ExpressJs and React for realtime updates?

[TradeEngineer]

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

[krishnachaitanya-mdwl]

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.

[mdms]

Thanks bro 😊😊😉, can you make a valid evaluation form that validates both login and registration?

[julianarobayo]

I get error in the Line starting with "fetch" in js, help

[abcedutechnadiaabdalla]

Thank you very much. A wonderful explanation that helped me a lot.

[abhishekkumar-gvsz]

awesome video brother'❤❤, pls explain how to create an account and API key.

[mcombatti]

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.

[binukbe]

Nice bro but how would you implement exporting and importing chat history?

[herbyprein]

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?