Never mind, I found the issue, simply create your own font awesome kit and replace it with the default one. Then just use new icons in the join on send buttons. I’ve now did some css and created an actually chat pwa!
Dear Rhym, I wants you make a tutorial that shows how to make a screen recorder with no any other offline applications only on web with HTML and CSS and JS!
@@ecodersofficial your question was how to make a screen recorder right? Then there is no need of DB for that just have to pass the path where you have to save the record video I have already done that
Thank you. I love your content and follow you from Algeria. Whenever you think of leaving TH-cam, remember that there are those who follow you with love
Thanks big guy I have literally roamed here and there searching for a firebase chat app and I was wondering here and there since 3 days finally got a running project that was a great help THANKS.
i know this was a while ago. but on the left side of the code, youll see a little arrow at the start of the funtion. press it to collapse the function.
Hey sir rhymbil i love your tutorial. I have my school project and im gonna use this like a part of a .0chatting section. Is there a way to change the big memechat 2.0 int the title and how? thanks i dont mean it to plagiarize ur work. im sorry if its like that but i rly need so need reply asap pls
hello brother...Love from india.....this video help me alot....bro can you pls tell me how to add a button in same page in which when we click on that button the chat that are stored in db gets clear...plz...reply soon...
For sure! Start by creating a button. Then whenever it's clicked, call an on-click function that runs this command: firebase.database().ref("chats").remove()
Hey Rymbil, your tutorial was so good, thanks. I would appreciate it if you made a part 2 where you showed us how to upload files, a live user counter, and the time the message was sent
@@MelvinAdekanye I would also add another suggestion. The DB only stays up for 30 days. I would like you to show how to actually make it permanent. Thanks
You're most welcome. To add images and others. You would have to save the images to a storage database ( a cool function with Firebase ) and then it becomes a matter of sourcing the link into an img, video, and etc.
So I made the app and it worked! But a few days ago I got a notification from Firebase saying that I need to update the rules since the test mode rules are insecure. Idk much about Firebase rules so what do I do?
I get those too. Normally, they'd like you to use Firebase Auth along with their database. But it's quite unnecessary. But there are ways to turn off such Firebase notifications.
Hey! I have a project in my country in wich we help elderly people that are feeling alone with an initiative, me and my friends though about making a chat room but we know very litle about programming this type of stuff... is it cool if we use this code?
Hey RhymBil, I wanted to ask you if its possible to optimise it a bit? like load a small portion of messages instead of everything? If so, could you please give me a hint on how I can do that?
Yes, that would be great idea. My memechat has been stuck loading - there are so many messages. Here's what I would try, only load 10 messages at a time but when the user scrolls up, it loads more as they scroll.
Hey Rhymbil, I've seen that you've recieved this same comment before, but it seems that every time I try to go to the site I'm met with a blank page. The console error is "Failed to load resource: the server responded with a status of 404 ()". I checked multiple times to make sure I had typed everything in correctly, but I can't find any issues on my end. One thing I've noticed, however, is that instead of "var" when I copy the firebase configuration, I get "const". Could this be impacting anything? Thanks.
Maybe you should make a tutorial on Next.js with this? P.s. I'm now experienced programmer, sorry for the grammar etc in the below comment 💀 (let me try to make this thing in tailwindCSS and next.js I can do it I think)
Like a chat system without Firebase? Yes but you would have to use a back-end like NodeJs and etc. That way you can have your own database and server instead of using Firebase.
@@MelvinAdekanye this is the error in the console i get: a076d05399.js:1 Failed to load resource: the server responded with a status of 403 () index.js:12 Uncaught ReferenceError: initializeApp is not defined at window.onload (index.js:12)
I am having a problem i saw ur who video very helpful btw But problem is when i launched website it wasnt working then i directly hosted on gitub pages Now website turns on but the loading bar is on loop
hello! I find your video absolutely amazing, easy, simple to follow, but, I have one slight problem, I wished that I would be able to press the enter key to send the message, can you please help with that? it will mean much to me, and thank you in advance!
Thank you! // Get the input field var chat_input= document.getElementById("chat_input"); // Execute a function when the user releases a key on the keyboard chat_input.addEventListener("keyup", function(event) { // Number 13 is the "Enter" key on the keyboard if (event.keyCode === 13) { // Cancel the default action, if needed event.preventDefault(); // Trigger the button element with a click document.getElementById("chat_input_send").click(); } }); Put that somewhere. And this should do the trick
@@MelvinAdekanye Thank you so much, you should probably do memechat 3.0 were you add this feature and others like, sending photos and stuff, and I will be more than happy to help you with it, if you want, contact me on discord, Dmsapl#1065
CAN SOMEONE PLS HELP ME. I KNOW WHY MY CHAT ISN'T WORKING, BUT I DONT KNOW HOW TO FIX IT. Ok so i checked the inspect element of my page, and all thats there is my folder, and inside the folder is the html file. However, the file is empty. Normally, I think the js, css, and the html files that I wrote in Atom should be in the code of the chat app, but it isn't. Can some tell me how to add them???????
The username. You can ban them based on their username. Most likely this wouldn't work since they can change it. I would suggest you do an IP ban. So when a user joins the chat. Grab their IP and when they get out of line. Stop messages from being shared by that IP. The only way this wouldn't work is if they use a VPN. But most people wouldn't.
Yes, you definitely can. But for some features, you will need javascript. I understand JS to be confusing, but it actually is a variation of HTML. You'll grow to love Js over time.
Yes for sure. You would simply need to replace Firebase with some other database. Or you could create your own server and database to handle message requests.
Yes. Similar to how you save the users name and users message. Just make a new attribute "time". Then save the time attribute with the value set to the current time. But this will only work with local times. For example. 2:00pm in Wakanda could be 7:00am in Bikini Bottom. To solve this, use a centralized time. So the client isn't sending its time but the time of an API or your server.
well i pasted everything into atom or whatever, but it still doesnt work.. its just a white ppage ALSO IVE NEVER EVER CODED BEFORE AND I HAVE NO IDEA WHATS GOING ON SO HELP😭
Please i did everything correctly but how do I view it on my local Host when I tried it just showed me a blank space I'm using ksweb as my local Host on Android please reply
@@MelvinAdekanye no sir but I got error is If someone enter one msg the that msg show on 100 times and that msg save also 100 time in firebase pls. Help
Hey @{RhymBil} everything is working except i noticed that more than one user can use the same username and it gets confusing while chatting can you help me with this please or anyone else 🥺
k wait i keep on getting this error message "Failed to load resource: the server responded with a status of 403 ()" in the inspect element, and i can't send messages anymore. How do I fix this?
Followed everything step by step, but for some reason my site won't work. It still just displays a blank page. When I try to open the javascript file windows tells me I'm missing a '{' on line 5. Can anyone help me figure this out? I'm very new to programming!
I meant in the chatroom. We came off Facebook and inserted a chatroom but its not great functional wise hence the question. Thanks for a great post in any event.
How about I add functionality for a user to press "enter" to send the message? Also, if I wanted more than one chat instance, would I have to create more than one database?
@@jonathanpierce6194 Oh ok. No you would simply save the chat under sub categories. You don't need different databases for different groups. That would be insane.
Ohh! Firebase chat app! Seems interesting. Let's see. Thanks for the tutorial!
You know it. No worries
I don't think you know how many headaches you have saved me from succumbing to... Thank you, father.
Really! You're welcome. Glad I could help.
Thanks, man. You out here saving life
love you
You're very welcome. Glad I could help.
AGREE.
Hey Rhymbil, this is a very good tutorial. But I’m having a glitch where the send button sometimes doesn’t appear. Can you help me with that?
Never mind, I found the issue, simply create your own font awesome kit and replace it with the default one. Then just use new icons in the join on send buttons. I’ve now did some css and created an actually chat pwa!
hey how to fix that?
@@prathyusha6619 *TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*
DAMN NOW THIS IS A CLEAR UNDERSTANDING EXPLAINATION!
Dear Rhym, I wants you make a tutorial that shows how to make a screen recorder with no any other offline applications only on web with HTML and CSS and JS!
Woah. I like the challenge. I'll figure it out and I'll let you know.
@@MelvinAdekanye Okay! pls make
You can use python for that, it's easy
@@yashkapure8511 Yeah! But I didn't know much in python....I'll try but can't - I didn't know How to Make Database with python...
@@ecodersofficial your question was how to make a screen recorder right?
Then there is no need of DB for that just have to pass the path where you have to save the record video
I have already done that
You made it super easy mann !!!!
Glad it helped!
It's so very good! Thank you for this one!
Glad you like it!
How do you get a website to creat a separate conversation screen for each user 🤔
the js file isnt there edit never mind i had to click on the link in your profile and its there now thank u so much
Thank you. I love your content and follow you from Algeria. Whenever you think of leaving TH-cam, remember that there are those who follow you with love
That's awesome! Thank you.
wass up!! nice vid btw
keep it up
Lol
Has nothing to do with anything and your just bots lol
this is amazing! I wanted to see this for myself so I copied the code and checked it out, and was far beyond my expectations.
Wow. Thank you!
bro did u created website
@@saipranav434 yes
Thanks big guy I have literally roamed here and there searching for a firebase chat app and I was wondering here and there since 3 days finally got a running project that was a great help THANKS.
That's awesome to hear.
It works like charm!!!
I'm glad it does!
Really good, but I just started with coding, How to do the {} Colapse Part?
i know this was a while ago. but on the left side of the code, youll see a little arrow at the start of the funtion. press it to collapse the function.
Thx for the tutorial, by the way can i use github?
You're very welcome. And for sure. You can upload the code to github
@@MelvinAdekanye oh thanks bro!
u r a legend bro thanks
HELPED A LOT !!!!!!!!!!!!!!
"Math Homework. Definitely" LMAO
my web page is still empty not showing any of the css properties could someone pls tell me what the problem is?
did you link the html file to css?
Password system for this?
Very cool but why do you don´t use github to share the code?
is this work when there is no internet but have connected local LAN??
Now I can bypass my school blocking discord. And Hangouts. And every other chat app.
Hahaha. Modern problems require modern solutions. We're living in 2021. You're in 4021.
Same reason I’m using this
Same reason I’m using this
Thanks bro 😆😆😘
Can others chat with each other without you using this site?
Thanks for the Tutorial!
Just amazing🤩
Thanks for everything bro . I am grateful for this video.
You're very welcome!!
2:30 2:30 2:30 2:30
Hey sir rhymbil i love your tutorial. I have my school project and im gonna use this like a part of a .0chatting section. Is there a way to change the big memechat 2.0 int the title and how? thanks i dont mean it to plagiarize ur work. im sorry if its like that but i rly need so need reply asap pls
Yes, of course. No worries. In the create_title function. You'll be able to change the title
hello brother...Love from india.....this video help me alot....bro can you pls tell me how to add a button in same page in which when we click on that button the chat that are stored in db gets clear...plz...reply soon...
For sure! Start by creating a button. Then whenever it's clicked, call an on-click function that runs this command:
firebase.database().ref("chats").remove()
Amazing tutorial, but the send button is invisible. Is there a way to fix this issue?
experience the same thing Did you fix it?
@@Nathan-tp2oz *TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*
Hey Rymbil, your tutorial was so good, thanks. I would appreciate it if you made a part 2 where you showed us how to upload files, a live user counter, and the time the message was sent
For sure. that's an awesome idea. Look forward to it.
@@MelvinAdekanye I would also add another suggestion. The DB only stays up for 30 days. I would like you to show how to actually make it permanent. Thanks
Hello ok so Im a bit confused abt this. Where can I find the gstatic firebase app reference for my project? Or is it already added in the source code
The HTML gstatic reference should be in the source code.
awesome video!
also for some reason the send button does not appear
can you make a video on customizing the frontend? thanks
to make the button appear you just need to sign up to frontawesome and they'll give you a real URL that you can replace the old one with
*TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*
Thanks..it works.
You're welcome!
Thank you so much, but i have a small doubt so in order to add image in the chat how do i do ? like images, gifs, videos etc...
even preloaded emoji's
You're most welcome. To add images and others. You would have to save the images to a storage database ( a cool function with Firebase ) and then it becomes a matter of sourcing the link into an img, video, and etc.
@@MelvinAdekanye is this firebase database free forever or like after 30 days its not free
So I made the app and it worked! But a few days ago I got a notification from Firebase saying that I need to update the rules since the test mode rules are insecure. Idk much about Firebase rules so what do I do?
I get those too. Normally, they'd like you to use Firebase Auth along with their database. But it's quite unnecessary. But there are ways to turn off such Firebase notifications.
The send button is not visible
Thanks!
No problem. Glad you like it.
Email me
soo now can you help me convert it into an android app?
Can I make this I'm android mobile
Hey! I have a project in my country in wich we help elderly people that are feeling alone with an initiative, me and my friends though about making a chat room but we know very litle about programming this type of stuff... is it cool if we use this code?
Wow that's awesome! Yes for sure. Feel free to use or edit the code.
That's the best and easiest chat to make! Can you make a censoring system(it censors curse words and etc ,if it it possible.
Yes you can. Right before a user sends a message. You can do an if statement to check if a word in their message matches a "bad word" in an array.
@@MelvinAdekanye thank you very much :)
my java script is not adding to the site please help me what to do sir
can you tell me what to do
really appreciated!!! A great tutorial with well documentation and explanation!
Where can I find the written masages? Thx 🙂
In your Firebase database realtime section.
Its really good 👍🏻 thanks for this vedio 😇😍
Most welcome 😊
Thank You very much man
You're welcome!
I think you should hide your private details like firebase config because there are many bad guys that can exploit this thing.
-shisirkhan
Hey RhymBil, I wanted to ask you if its possible to optimise it a bit? like load a small portion of messages instead of everything? If so, could you please give me a hint on how I can do that?
does the website even work for u?
@@jamesbuckybarnes9290 Yeap, I can help you if you want.
Yes, that would be great idea. My memechat has been stuck loading - there are so many messages. Here's what I would try, only load 10 messages at a time but when the user scrolls up, it loads more as they scroll.
@@MelvinAdekanye yes do it please any idea till when will u release it?
@@jamesbuckybarnes9290 memechat 3.0.?!? 😊😊
Hey Rhymbil, I've seen that you've recieved this same comment before, but it seems that every time I try to go to the site I'm met with a blank page. The console error is "Failed to load resource: the server responded with a status of 404 ()". I checked multiple times to make sure I had typed everything in correctly, but I can't find any issues on my end. One thing I've noticed, however, is that instead of "var" when I copy the firebase configuration, I get "const". Could this be impacting anything? Thanks.
Oh no not at all. But I do wonder. Do you get the "Failed to load resource .." on my memechat website? Or yours?
@@MelvinAdekanye on my website, yours works fine
I’ve ran into this problem also (for my chat)
@@MelvinAdekanye i see this was a year ago. Have you solved the issue? if so could you tell me what to do because im struggling with the same thing.
Hi rhymbilyt i have an error
Nothing is coming except a blank page
even I have linked the CSS and js
plz help me
make sure the security of your firebase db is set to "true"
hi it is been struck loading what to do
I have a problem.
I want to add text and pictures in bottom of website. But it always take it to top. What i do?
what parts of the code should we change if we want to change the name?
In the JS there is a line:
title.textContent = 'MemeChat 2.0'.
That would allow you to change the title & name.
Maybe you should make a tutorial on Next.js with this?
P.s. I'm now experienced programmer, sorry for the grammar etc in the below comment 💀
(let me try to make this thing in tailwindCSS and next.js I can do it I think)
Such a good point. It would be way easier with NextJs and TailwindCSS
why is it stuck in the loading screen, sire? this is very good tutorial but that is just the problem.
Do you get any errors when you use it?
I am not getting the option of logout
HELP PLIS
do you know if it's possible to do this without using another program?
Like a chat system without Firebase? Yes but you would have to use a back-end like NodeJs and etc. That way you can have your own database and server instead of using Firebase.
I dont understand how I get all files running at the same time cuz i just start the html file but my website is just white
I had the same problem at first I clicked inspect and it said there was an error
@@zxwar1111 Did you fix it?
Do you have your tag referenced in your HTML? Or are you getting an error in the console (inspect element)
@@MelvinAdekanye this is the error in the console i get: a076d05399.js:1 Failed to load resource: the server responded with a status of 403 ()
index.js:12 Uncaught ReferenceError: initializeApp is not defined
at window.onload (index.js:12)
@@lirree4025 same
One question can I separate this into different component and then create it using React??
Thanks
Yes you certainly can.
how could this chat platform be integrated/embedded in an already existing own website?
I am having a problem i saw ur who video very helpful btw
But problem is when i launched website it wasnt working then i directly hosted on gitub pages
Now website turns on but the loading bar is on loop
okkk check if there are any problems in the console
hello! I find your video absolutely amazing, easy, simple to follow, but, I have one slight problem, I wished that I would be able to press the enter key to send the message, can you please help with that? it will mean much to me, and thank you in advance!
Thank you!
// Get the input field
var chat_input= document.getElementById("chat_input");
// Execute a function when the user releases a key on the keyboard
chat_input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("chat_input_send").click();
}
});
Put that somewhere. And this should do the trick
@@MelvinAdekanye Thank you so much, you should probably do memechat 3.0 were you add this feature and others like, sending photos and stuff, and I will be more than happy to help you with it, if you want, contact me on discord, Dmsapl#1065
@@MelvinAdekanye Where do I put it?
@@Dmsapl Where did you put that code in. Java script? Css? Where?
@@DonutXweb
*add* *this* *code (in index.js) :*
chat_input.setAttribute('onkeydown', "if (event.keyCode == 13) document.getElementById('chat_input_send').click()")
*just* *after* *this* *line* *:*
var chat_input = document.createElement('input')
Thank You
You're very welcome
thanks for the code :)
Any time
I have question. Upon clicking join, it doesn't show the chat box unless I refresh the page.
Did you have any errors in your console?
Right click, then click inspect, then look for the console tab.
Hey why does it sometimes not show the send arrow
It has to do with the font awesome reference we're using.
@@MelvinAdekanye Wait plss how do i fix it
:O he did it
im piggydoe btw if u remember me :D
You know it. I sure do! Let me know what you think of the video.
@@MelvinAdekanye for sure
rhymbil, this no longer works so could you make an updated video? much appreciated
For sure. There are so many cool videos to come.
Thanks a lot for this but could you make one with audio chat too
You're welcome. Yes for sure. Definitely a step up from a text based chat.
You are simply awesome @{Rhymbil}! Thank you so much..
Thanks! You're most welcome.
CAN SOMEONE PLS HELP ME. I KNOW WHY MY CHAT ISN'T WORKING, BUT I DONT KNOW HOW TO FIX IT. Ok so i checked the inspect element of my page, and all thats there is my folder, and inside the folder is the html file. However, the file is empty. Normally, I think the js, css, and the html files that I wrote in Atom should be in the code of the chat app, but it isn't. Can some tell me how to add them???????
WAIT NVM I FIXED IT. All I had to do is save the files for the js, the css, and the html files in Atom and it worked.
That's great!
How can i block someone at my chat app? i meant, when someone idk a guy join i have to eject him. How can i do this?
The username. You can ban them based on their username. Most likely this wouldn't work since they can change it. I would suggest you do an IP ban. So when a user joins the chat. Grab their IP and when they get out of line. Stop messages from being shared by that IP. The only way this wouldn't work is if they use a VPN. But most people wouldn't.
could you please tell me how to reverse the order of messages like latest messages are displayed at top
it doesn't work for me
I have the firebase working, I can see the texts being stored. But I don't have the css loaded why?
Do you have your style sheet linked in your HTML file? If so, is your index.css file in the same folder as your HTML file?
Can you do this without using JavaScript to create the html tag, it’s quite confusing. Thanks tho
Yes, you definitely can. But for some features, you will need javascript.
I understand JS to be confusing, but it actually is a variation of HTML. You'll grow to love Js over time.
after log-in - > write not defined... doesnt working
can i make this without firebase?
Yes for sure. You would simply need to replace Firebase with some other database. Or you could create your own server and database to handle message requests.
hey u got a edit word script?
Is there a way we could share image or GIF content in the chat ?
Yes for sure. Firebase has a great feature for saving images/gifs.
So yes. Memechat 3.0 will be a thing in the coming weeks.
Any ideas on how to time stamp the messages ??
Yes. Similar to how you save the users name and users message. Just make a new attribute "time". Then save the time attribute with the value set to the current time.
But this will only work with local times. For example. 2:00pm in Wakanda could be 7:00am in Bikini Bottom. To solve this, use a centralized time. So the client isn't sending its time but the time of an API or your server.
@@MelvinAdekanye Thank you❤️
Hi rhymbil , this works but the send button is again and again hiding. Can you tell me the solution. Plz
For sure. Replace the old font awesome link with this one:
@@MelvinAdekanye , ok i try it
well i pasted everything into atom or whatever, but it still doesnt work.. its just a white ppage
ALSO IVE NEVER EVER CODED BEFORE AND I HAVE NO IDEA WHATS GOING ON SO HELP😭
No worries. i got you. First things first are you getting any errors in your console.log? ( Ctrl + Shift + i )
I copy and Paste all code , but IN my Interface I don't have send button,, how can I fix it?
*TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*
Please i did everything correctly but how do I view it on my local Host when I tried it just showed me a blank space I'm using ksweb as my local Host on Android please reply
Oh. You don't need localhost. It's a simple HTML and JS file.
Ok
its just a white screen how do i fix it?
Sure. First what error are you getting?
@@MelvinAdekanye No error, the website is online and I go into it but it's just a white screen. I tested it on my phone and pc.
Hey I got error means if I say Hello then msg show lots of hello word
Pls help me to solve this problem 🙏
Sure. Do you get any error messages in the console.
@@MelvinAdekanye no sir but I got error is
If someone enter one msg the that msg show on 100 times and that msg save also 100 time in firebase pls. Help
will you make a Memechat 3.0?
of course! Just taking some time off.
Hey @{RhymBil} everything is working except i noticed that more than one user can use the same username and it gets confusing while chatting can you help me with this please or anyone else 🥺
That will be a good idea for a future video.
@@MelvinAdekanye when is the future video coming because i see many people suggesting new stuff years ago and yu still said the same thing
k wait i keep on getting this error message "Failed to load resource: the server responded with a status of 403 ()" in the inspect element, and i can't send messages anymore. How do I fix this?
Sure. Email me.
Followed everything step by step, but for some reason my site won't work. It still just displays a blank page. When I try to open the javascript file windows tells me I'm missing a '{' on line 5. Can anyone help me figure this out? I'm very new to programming!
I figured out what was different when I rewatched the video, but now its giving me a syntax error for the line 'class MEME_Chat{'.
wait whats ur website called?
nvm
Please tell me to upload my chat website for free
I did everything you did, but the screen is just white when I open the index.html in chrome? Do you know how to fix this @{RhymBil}
For sure. Are you getting any errors in your console?
Can you use GIFS in the RhymBill
I meant in the chatroom. We came off Facebook and inserted a chatroom but its not great functional wise hence the question. Thanks for a great post in any event.
Yes, you definitely can. It'd incorporate using the Firebase storage to get that working.
How about I add functionality for a user to press "enter" to send the message? Also, if I wanted more than one chat instance, would I have to create more than one database?
Check this website: www.w3schools.com/howto/howto_js_trigger_button_enter.asp
What do you mean by chat instance, like multiple rooms/groups?
@@MelvinAdekanye Yep! Multiple rooms that can be on different pages
@@jonathanpierce6194 Oh ok. No you would simply save the chat under sub categories. You don't need different databases for different groups. That would be insane.
Hey send button's not visible. Can you help me with that?
*TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*
Brother, I see you that you are very concerned about your privacy. Love from india
Thanks! Appreciate the love.