Building a Messaging App | Javascript | Tutorial 15
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Source Code - www.giraffeacad... This video is one in a series of videos where we'll be looking at programming in JavaScript. The course is designed for new programmers, and will introduce common programming topics using the JavaScript language.
Throughout the course we'll be looking at various topics including variables, arrays, getting user input, loops, conditionals, interacting with the DOM and much more.
Now this is someone who knows how to teach.
Right! Have a great day! Jesus Christ loves you!
I means you have not seen Dev Ed tilll now
Wow I know him too
Love the way you enlarge the text... It helps us who only use 144p and 240p... because the net in our country is so slow...
There's an XSS vulnerability in your code, use innerText instead of innerHTML, because if you use innerHTML, then someone could just put "helloalert('xss attack');" and the script would run.
Just finished learning Tutorial 15.Thanks to Mike
I understood you better than my college lecturers...it be awesome if you could do more basic lessons 🤘🔥
bro you are a genius. i have been watching your videos trying to teach my self javascript and i must acknowledge your efforts in teaching some of us for free. I wish you could teach me javascript personally. Thank you for every sharing your knowledge with us for free. with love from Belgium
I love how you explain things and stuff. I just really like it.
wow i thought you were a nitro type player right lol did not know you could code
Mike is one of the best teachers on this earth. Much love from India
if this man is not making truck loads of money; there is a problem or two with our world. I am an older guy learning from a millenial (i guess) ...This guy is the best programming teacher I have come across so far and I am a teacher too (not programming though).
What do you teach
im using visual studio code and for some reason the js code and HTML code isnt working together
Great!! Someone who ACTUALLY SHOWS JAVASCRIPT IN ACTION On A PAGE!! Thnx dude! You are awesome!
it's a very old video, but very useful for beginner students like me, thank you!
Thank you your way of teaching is cool and understandable.
Dude how do u remember all the codes..?
Is there any way to get codes ..
Please do reply
i typed exactly what you did and it does not post text entered. Fails to work. // Thanks for the video though
Same here
@@senor_nathak Where?, Are u sure you are linking correctly the js ?
@@naza3519 yes
Same 😥
add js file after html code in body
Now the real stuff is kicking in!!!!
you are great but can you please even keep how to make a app like youtube using only js and html
i love how people watching this in 2021 too.. Love it
Another great video Mike, thank you. I love the way that you use an as a sort of replacement for a database. This is where you stand out from other tutorials I watch. Often the tutor will divert down a path about databases at that point and next thing i know I feel hopeless that theres another area that I am so far off from understanding. The focus on JS and ability to keep it on track here is so refreshing.
Nice Video
I wouldn't exactly Call this beginner friendly, but nice stuff
U know what i like abt u man is that u make things simpl i wish that u keep it like this forever keeep it up king
I couldn't understand the element calling here, using append and everything that happened inside the function.
I tried and it worked...amazing😊
uncaught type Error:can not read this property 'addEventListener' of null
line6
Getting this exact same issue, have you figured it out yet?
You might not be properly referencing the button right when you do document.getElementById('button').
Breaking it down, Line 6 (if your code is the exact same as the tutorial) says something like this:
button.addEventListener('click', function(){//code})
The error says that it can't read the PROPERTY addEventListener of NULL.
With that we can make the assumption that your code is being read like this:
null.addEventListener('click', function(){//code})
***Notice that is it null before the addEventListener instead of button
The only way that can happen is if button = document.getElementById('button') is returning null i.e. button = null
Thus, the issue could be:
(1) The HTML is not quite right, make sure that the button has an id of button i.e.
Send
(2) The is not in the correct spot in the HTML file. Make sure the is the the LAST tag in the body tag. Or if it comes before the button tag make sure it has the defer attribute(so the file loads after the button loads) i.e.
(3) If (1) and (2) are good, then the reference to the button in the JS is not quite right, so make sure the reference is like this:
const button = document.getElementById('button')
This might be too late but maybe it might help someone down the line.
Mike I need your help because I have completed with this vidio and I understand it very well but I was trying to run this code is not display a massages i don't what is my error pls can u help me
I tried it the way you did it but didn't get the same output as yours
which kind of server ar the html running on. And can i use the vscode server?
open live server extension
i have a problem it keep saying button not defined
hey im new to webdev can sombody tell me what program is used in this toturial mayby it is just me that is dam but i vant figure it out
Watch his 2nd tutorial of this course.
visual studios
how would I create a real app that sends through a WebSocket
wow so much hate, I really liked this tutorial, thanks mike!
How can I build a broadcast app with java script plus help me
yoooo this man is the best I hope he can upload new vids like days every time
It's was super easy to understand...Thank you
and you can use: bgcolor="purple" this is for the background color
Hi, I tried it but my text is coming up on the same line. Where should I insert the ,
its just
Neharika technically doesn't need to be closed off. As for where to insert it usually depends on where your problem lies. And generally you'd have an idea as to where you'd need a break.
doesnt need an ending tag btw
i dont understand why he used appendchild????
I love you bro I have learned so many tutorials with you.....
Why don’t you just add the attribute onclick to the button through the HTML code?
It’s simpler.
Woah, it, it's me from a year ago. Wait, I WATCHED THIS :O
@@nostalgia5031 Hello, you from a year ago! XD
@@nostalgia5031 😂😂
hei mike can u teach me how to learn java script native??
i dont know how to start it
Not working
This is really useful, however I think the title is a bit misleading. Maybe use this video as a starting point for a series?
how is it misleading?? you should convey the truth bro you are a saint.
@@sau-students-union9552 Why the hostility? "building a messaging app" implies that the app could be deployed and used by two parties to communicate. This video only covers the basic front-end mechanics which is why I said its useful but would be better suited as a starting point in a series that covers the back-end as well. Cheers.
@@skateboarderlucc It's a beginner javascript course. It's not missleading.
So basically you have built a messaging app that shows your messages to yourself. It might be a good tutorial for javascript point of view but the title is a bit misleading. You need to have a server-based communication system as well.
Mayank Chauhan totally agree, has nothing to do with an messaging app ...
Agree, this is a tutorial for alter the DOM.
Really love u bro .......amazing teaching
A very easy todoList
This guy is just great 👍🏻 and I really mean it.
Will this message appear to everyone in the website
What about queryselector?
raj shekhar Ya
It’s way easier
Thank you sir for making this video😀😀🙏
How to add data in a textbox without replacing the current data.
Hey can any one tell me how to make the dot disappeared
How will we create app I entered the javasc Ripton but nothing happened
Hey buddy I am a beginner. How do I start to create an App since I am interested in software engineering
Great one Mike. But I observed something here. Even when the textbox contains nothing, when the SEND button is clicked, an empty message is sent. Who can help me rewrite the code?
Mike's Page
Send
JS Code:
const messages = document.getElementById("messages");
const textbox = document.getElementById("textbox");
const button = document.getElementById("button");
const msg = document.getElementById("errormsg");
button.addEventListener("click",function(){
if(textbox.value ==='')
{
msg.innerHTML = 'Please enter text on the text box';
msg.style.backgroundColor = "red";
setTimeout(()=>msg.remove(),3000);
textbox.focus();
} else{
let newMessage = document.createElement("li");
newMessage.innerHTML = textbox.value;
messages.appendChild(newMessage);
textbox.value = "";
textbox.focus();
}
});
i have a error when i press send it is not getting send
plz help
'genrally' You would use document.querySelector to define a variable with an element, this is far easier to understand during a debugging process and the DOM is more reliable. How long have you been practising js css and html?? doesnt seem like for long
why not both? getelement is better supported, and for this guys use is perfectly fine as hes only selecting by id. If he needed to refine the selection queryselector would better.
the best one ever , with all my respects
Bro this is no messaging app, cut it out. Its more like a to-do list app.
Bro he is really really smart
What about the client side??
Well done chap!
which app or web we can us to make java
good job dude, very helpful
Did this work for you. It is not working for me
The textbox and button show up on my page, but no messages show up after clicking send. EDIT: Problem solved. I had misspelled "messenger" when referencing the JS source in HTML and (as Arkeel and Xeo pointed out below), I had made input a container tag when it shouldn't have been.
Can i see your code?
I kinda have the same problem and then I realized I wrote ".appendchild" instead of ".appendChild" lol
@@xeomiku4940 This is my JS code...
var messages = document.getElementById("messages");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");
button.addEventListener("click", function(){
var newMessage = document.createElement("li");
newMessage.innerHTML = textbox.value;
messages.appendChild(newMessage);
textbox.value = "";
});
And this is my HTML code...
JS Messenger App
JS Messenger App
Send
I had tried taking the h1 header out of the HTML file to see if that made a difference, but it didn't.
@@xeomiku4940 Ha Ha :) Yeah, I'm pretty careful about the case sensitive stuff. But I have made typos before or I have text on the wrong side of brackets.
@@scottisitt input is not a container tag.
The correct format is
.
Are These Messages
shown for everybody on the Page?
this is great but what i now want to know is how to actually make a functioning messaging website
great work done by you...
What app is that
Hello Currently this chanel working ?
Awesome tutorial
you're incredible.
is it just me or the code really doesn't work!
It's not working for me too
What is the computer app called
It is not working☹
working great!
i do it line by line but get this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
your button does not exist in HTML
Always add the js file after body mean at last
Amazing well explain 👍👍👍
the zoom is a little much
If you want a easier way just use python and html although there not freinds they still work
They are cousins. Then 😂
HOW DO I DOWNLOAD THE CODE?!!!!!!!!!!
I'm pretty sure you just go through the source code link in the description.
@@nostalgia5031 it leads to a website with no download code thing
please make bootstrap tutorials
Would be happy to see a back end part too.
It doesn’t save when you refresh dude!!!
@@kgaming7599 save it in localstorage
Thanks bro. you are the best
what app are you using
its an software .... use visual code editor
Thank u so much ^^
this guy isperfect
thanks alot
Don't zoom in too much!
Thank you you are my one of the teacher.
Perfect 👍
great sir
nice tutorial
Hi Alright Mike. How do I make sure that I persist the information on the screen and be seen by everyone at that moment in the url?
Thats socket.io stuff (th-cam.com/video/rxzOqP9YwmM/w-d-xo.html)
good man
Sir which software
visual code editor
Its called Atom, it's a great software he recommends for web development languages like PHP , HTML,javascript and so on:)
thanks you !
8:06
thanks buddy
thanks
my computer decided to shiz the bed right as coding and i ha dent saved